{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar1",
  "title": "Sidebar Exemple 1",
  "description": "Frequently asked questions section with collapsible items.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/blocks/Sidebar/sidebar1.tsx",
      "content": "\"use client\";\r\n\r\nimport { motion } from \"framer-motion\";\r\nimport {\r\n    Bell,\r\n    MoreVertical,\r\n    Search,\r\n    Edit3,\r\n    CheckCheck,\r\n} from \"lucide-react\";\r\n\r\nexport default function Sidebar() {\r\n    return (\r\n        <motion.aside\r\n            className=\"w-[320px] lg:w-[340px] h-full flex flex-col bg-white border-r border-gray-100\"\r\n            initial={{ opacity: 0, x: -10 }}\r\n            animate={{ opacity: 1, x: 0 }}\r\n            transition={{ duration: 0.3 }}\r\n        >\r\n            {/* Header */}\r\n            <div className=\"p-4 flex items-center justify-between\">\r\n                <div className=\"w-10 h-10 rounded-full bg-gradient-to-br from-orange-400 to-amber-500 overflow-hidden\">\r\n                    <div className=\"w-full h-full flex items-center justify-center text-white font-semibold text-sm\">\r\n                        Me\r\n                    </div>\r\n                </div>\r\n\r\n                <div className=\"flex items-center gap-1\">\r\n                    <button className=\"w-9 h-9 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors text-gray-500\">\r\n                        <Bell size={18} />\r\n                    </button>\r\n\r\n                    <button className=\"w-9 h-9 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors text-gray-500\">\r\n                        <MoreVertical size={18} />\r\n                    </button>\r\n                </div>\r\n            </div>\r\n\r\n            {/* Search */}\r\n            <div className=\"px-4 pb-3\">\r\n                <div className=\"relative\">\r\n                    <Search\r\n                        size={15}\r\n                        className=\"absolute left-3 top-1/2 -translate-y-1/2 text-gray-400\"\r\n                    />\r\n\r\n                    <input\r\n                        placeholder=\"Search chats\"\r\n                        className=\"w-full pl-9 pr-4 py-2 bg-gray-100 rounded-xl text-sm text-gray-700 placeholder:text-gray-400 outline-none\"\r\n                    />\r\n                </div>\r\n            </div>\r\n\r\n            {/* Tabs */}\r\n            <div className=\"px-4 pb-3 flex items-center gap-1\">\r\n                <button className=\"relative flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium text-gray-900\">\r\n                    <span className=\"absolute inset-0 bg-gray-100 rounded-full\" />\r\n                    <span className=\"relative\">All</span>\r\n\r\n                    <span className=\"relative text-xs px-1.5 py-0.5 rounded-full font-semibold bg-gray-800 text-white\">\r\n            24\r\n          </span>\r\n                </button>\r\n\r\n                <button className=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium text-gray-500\">\r\n                    <span>Friends</span>\r\n\r\n                    <span className=\"text-xs px-1.5 py-0.5 rounded-full font-semibold bg-gray-200 text-gray-600\">\r\n            18\r\n          </span>\r\n                </button>\r\n\r\n                <button className=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium text-gray-500\">\r\n                    <span>Groups</span>\r\n\r\n                    <span className=\"text-xs px-1.5 py-0.5 rounded-full font-semibold bg-gray-200 text-gray-600\">\r\n            6\r\n          </span>\r\n                </button>\r\n            </div>\r\n\r\n            {/* Contact List */}\r\n            <div className=\"flex-1 overflow-y-auto\">\r\n                {[\r\n                    {\r\n                        name: \"Alex Morgan\",\r\n                        avatar: \"AM\",\r\n                        message: \"See you tomorrow 👋\",\r\n                        time: \"2m\",\r\n                        online: true,\r\n                        verified: true,\r\n                        unread: 2,\r\n                        color: \"from-indigo-500 to-purple-600\",\r\n                    },\r\n                    {\r\n                        name: \"Isabella Green\",\r\n                        avatar: \"IG\",\r\n                        message: \"The designs look amazing!\",\r\n                        time: \"15m\",\r\n                        online: false,\r\n                        verified: false,\r\n                        unread: 0,\r\n                        color: \"from-orange-400 to-red-500\",\r\n                    },\r\n                    {\r\n                        name: \"Creative Board\",\r\n                        avatar: \"CB\",\r\n                        message: \"New project uploaded.\",\r\n                        time: \"1h\",\r\n                        online: false,\r\n                        verified: true,\r\n                        unread: 5,\r\n                        color: \"from-red-700 to-red-900\",\r\n                    },\r\n                    {\r\n                        name: \"Victoria Stone\",\r\n                        avatar: \"VS\",\r\n                        message: \"Thanks for your feedback.\",\r\n                        time: \"3h\",\r\n                        online: true,\r\n                        verified: false,\r\n                        unread: 0,\r\n                        color: \"from-sky-400 to-blue-600\",\r\n                    },\r\n                ].map((contact, index) => (\r\n                    <motion.div\r\n                        key={index}\r\n                        initial={{ opacity: 0, y: 8 }}\r\n                        animate={{ opacity: 1, y: 0 }}\r\n                        transition={{ delay: index * 0.05 }}\r\n                        className=\"flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors cursor-pointer\"\r\n                    >\r\n                        {/* Avatar */}\r\n                        <div className=\"relative flex-shrink-0\">\r\n                            <div\r\n                                className={`w-12 h-12 rounded-full bg-gradient-to-br ${contact.color} flex items-center justify-center text-white font-semibold text-sm`}\r\n                            >\r\n                                {contact.avatar}\r\n                            </div>\r\n\r\n                            {contact.online && (\r\n                                <span className=\"absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full\" />\r\n                            )}\r\n                        </div>\r\n\r\n                        {/* Info */}\r\n                        <div className=\"flex-1 min-w-0\">\r\n                            <div className=\"flex items-center justify-between mb-0.5\">\r\n                                <div className=\"flex items-center gap-1 min-w-0\">\r\n                  <span className=\"font-semibold text-gray-900 text-sm truncate\">\r\n                    {contact.name}\r\n                  </span>\r\n\r\n                                    {contact.verified && (\r\n                                        <span className=\"w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0\">\r\n                      <CheckCheck size={9} className=\"text-white\" />\r\n                    </span>\r\n                                    )}\r\n                                </div>\r\n\r\n                                <span className=\"text-xs text-gray-400 flex-shrink-0 ml-2\">\r\n                  {contact.time}\r\n                </span>\r\n                            </div>\r\n\r\n                            <div className=\"flex items-center justify-between\">\r\n                                <p className=\"text-sm text-gray-500 truncate\">\r\n                                    {contact.message}\r\n                                </p>\r\n\r\n                                {contact.unread > 0 && (\r\n                                    <span className=\"ml-2 min-w-5 h-5 px-1 rounded-full bg-gray-900 text-white text-xs font-semibold flex items-center justify-center flex-shrink-0\">\r\n                    {contact.unread}\r\n                  </span>\r\n                                )}\r\n                            </div>\r\n                        </div>\r\n                    </motion.div>\r\n                ))}\r\n            </div>\r\n\r\n            {/* New Chat Button */}\r\n            <div className=\"p-4\">\r\n                <motion.button\r\n                    whileHover={{ scale: 1.02 }}\r\n                    whileTap={{ scale: 0.98 }}\r\n                    className=\"w-full flex items-center justify-center gap-2 py-3.5 bg-gray-900 hover:bg-gray-800 text-white rounded-2xl font-medium text-sm transition-colors\"\r\n                >\r\n                    <Edit3 size={16} />\r\n                    Start a new chat\r\n                </motion.button>\r\n            </div>\r\n        </motion.aside>\r\n    );\r\n}",
      "type": "registry:block",
      "target": "components/Sidebar1.tsx"
    }
  ],
  "type": "registry:block"
}