{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "all-blocks",
  "type": "registry:block",
  "title": "All Blocks",
  "author": "codefellas <codefellasdd@gmail.com>",
  "description": "All Blocks in one",
  "dependencies": [
    "lucide-react",
    "framer-motion"
  ],
  "registryDependencies": [
    "button",
    "@fellasUI/blur-in",
    "@fellasUI/fade-in",
    "@fellasUI/marquee",
    "@fellasUI/bento-grid",
    "@fellasUI/utils",
    "badge",
    "card",
    "@fellasUI/content-grid",
    "@fellasUI/draggable-dashboard"
  ],
  "files": [
    {
      "path": "registry/@fellas/block/bento/bento.tsx",
      "content": "\"use client\";\nimport Image from \"next/image\";\nimport {\n  BentoCard,\n  BentoGrid,\n} from \"@/registry/@fellas/ui/bento-grid/bento-grid\";\nimport BlurIn from \"@/registry/@fellas/ui/blur-in/blur-in\";\nimport FadeIn from \"@/registry/@fellas/ui/fade-in/fade-in\";\nimport Marquee from \"@/registry/@fellas/ui/marquee/marquee\";\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"framer-motion\";\nimport { Github, Mail, Sun } from \"lucide-react\";\nimport { Button } from \"@/registry/@fellas/ui/button\";\n\ntype defaultBgImages = {\n  image: string;\n}[];\n\nconst defaultDomains = [\n  {\n    name: \"Crypto\",\n    body: \"Interface with blockchains, create smart contracts, track market data, manage digital assets.\",\n    slug: \"crypto\",\n    image: \"crypto\",\n  },\n  {\n    name: \"Commerce\",\n    body: \"Sell your product or service online.\",\n    slug: \"commerce\",\n    image: \"crypto\",\n  },\n  {\n    name: \"Web\",\n    body: \"Create beautiful, responsive, and performant websites.\",\n    slug: \"web\",\n    image: \"crypto\",\n  },\n  {\n    name: \"IOT\",\n    body: \"Interface with things around you.\",\n    slug: \"iot\",\n    image: \"crypto\",\n  },\n  {\n    name: \"AI\",\n    body: \"Create intelligent, context-aware applications that understand your unique data.\",\n    slug: \"ai\",\n    image: \"crypto\",\n  },\n  {\n    name: \"API\",\n    body: \"Create APIs that power your applications.\",\n    slug: \"api\",\n    image: \"crypto\",\n  },\n];\n\nconst defaultBgImages = [\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01541.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01551.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01539.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01530.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01500.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01455.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01459.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01436.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01435.jpg\",\n  },\n];\nconst features = [\n  {\n    Icon: \"\",\n    name: \"\",\n    description: \"\",\n    href: \"\",\n    cta: \"\",\n    className: \"col-span-3 md:col-span-2\",\n    background: (\n      <>\n        <div\n          id=\"hero\"\n          className=\"absolute right-0 top-0 h-full w-full border-none transition-all duration-300 ease-out\"\n        >\n          <div className=\"relative flex h-full w-full mx-auto items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n            <div className=\"flex flex-col items-start justify-center h-full overflow-hidden p-6 z-50\">\n              <p className=\"font-display text-center text-6xl md:text-7xl lg:text-8xl font-bold leading-[5rem] tracking-tighter drop-shadow-sm\">\n                FellasUI\n              </p>\n              <div className=\"text-lg text-neutral-500 dark:text-neutral-400 lg:p-2 w-full \">\n                <BlurIn className=\"w-3/4 sm:w-2/3\">\n                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi\n                  necessitatibus suscipit consequatur aspernatur nemo magni...\n                </BlurIn>\n\n                <FadeIn direction=\"down\" className=\"my-class\">\n                  <div className=\"flex items-center gap-2 w-full lg:w-2/3 mt-6\">\n                    <a href={\"#\"} target=\"_blank\" className=\"flex-1\">\n                      <Button\n                        variant=\"default\"\n                        size=\"lg\"\n                        className=\"flex items-center gap-2 w-full group/Github\"\n                      >\n                        <div>GitHub</div>\n                        <Github className=\"h-5 w-5 lg:group-hover/Github:translate-x-1 transition-all duration-300\" />\n                      </Button>\n                    </a>\n\n                    <a\n                      href=\"mailto:codefellasdd@gmail.com\"\n                      target=\"_blank\"\n                      className=\"flex-1\"\n                    >\n                      <Button\n                        variant=\"default\"\n                        size=\"lg\"\n                        className=\"flex items-center gap-2 w-full group/Mail\"\n                      >\n                        <div>Email Me</div>\n                        <Mail className=\"h-5 w-5 lg:group-hover/Mail:translate-x-1 transition-all duration-300\" />\n                      </Button>\n                    </a>\n                  </div>\n                </FadeIn>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"absolute right-4 top-4 z-50\">\n          <FadeIn direction=\"down\">\n            <Sun />\n          </FadeIn>\n        </div>\n      </>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"\",\n    description:\n      \"software engineer & open-source contributor focused in gen-ai, web, linux, cybersecurity, and finance.\",\n    className: \"col-span-3 md:col-span-1\",\n    href: ``,\n    cta: \"Visit portfolio\",\n    background: (\n      <div>\n        <div className=\"absolute right-0 top-0 h-3/4 w-full border-none transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_5%,#000_50%)] group-hover:scale-105\">\n          <BlurIn duration={0.5} className=\"h-full\">\n            <Image\n              className=\"object-cover object-center h-full w-full\"\n              src={process.env.AVATAR_URL || defaultBgImages[0].image}\n              alt=\"avatar image\"\n              width={300}\n              height={200}\n              priority // Load image immediately\n              quality={100} // Adjust quality for optimization\n              placeholder=\"blur\" // Placeholder to improve perceived performance\n              blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n            />\n          </BlurIn>\n        </div>\n\n        <FadeIn\n          direction=\"right\"\n          framerProps={{\n            show: { transition: { delay: 1.5 } },\n          }}\n        >\n          <a\n            href={\"#\"}\n            className=\"absolute top-2 right-2 bg-background rounded-lg px-4 py-2 text-xs text-neutral-500 dark:text-neutral-300 max-w-3/4 w-fit\"\n          >\n            <div className=\"flex items-center gap-2\">\n              <div className=\"w-3 h-3 rounded-full animate-pulse bg-emerald-400\"></div>\n              <div className=\"\">aktiv</div>\n            </div>\n          </a>\n        </FadeIn>\n      </div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"Tech Domain\",\n    description: \"Sector-agnostic, focused on solving problems with code.\",\n    href: `#/projects`,\n    cta: \"View projects\",\n    className: \"col-span-3 md:col-span-1\",\n    background: (\n      <motion.div\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        transition={{ duration: 2.5 }}\n      >\n        <Marquee\n          className=\"absolute h-2/3 top-10 [--duration:40s] [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] w-full\"\n          pauseOnHover\n        >\n          {defaultDomains.map((f, idx) => (\n            <a\n              href={`#/tags/${f.slug}`}\n              key={idx}\n              className={cn(\n                \"relative w-40 h-full cursor-pointer overflow-hidden rounded-xl border p-4 hover:-translate-y-1\",\n                \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n                \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n                \"transform-gpu transition-all duration-300 ease-out hover:blur-none\"\n              )}\n            >\n              <div className=\"flex flex-row items-center gap-2\">\n                <div className=\"flex flex-col\">\n                  <figcaption className=\"text-lg font-bold dark:text-white \">\n                    {f.name}\n                  </figcaption>\n                </div>\n              </div>\n              <blockquote className=\"mt-2 text-xs\">{f.body}</blockquote>\n            </a>\n          ))}\n        </Marquee>\n      </motion.div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"Technologies\",\n    description:\n      \"Using a combination of cutting-edge, and time-tested technologies to build robust, scalable, and secure applications.\",\n    href: \"/technologies\",\n    cta: \"View all technologies\",\n    className: \"col-span-3 md:col-span-2\",\n    background: (\n      <div className=\"absolute right-0 top-0 w-[100%] origin-top translate-x-0 transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_70%)] md:[mask-image:linear-gradient(to_top,transparent_50%,#000_70%)] group-hover:-translate-y-5 group-hover:scale-105\">\n        <FadeIn direction=\"up\">\n          <Image\n            className=\"object-cover object-center h-full w-full\"\n            src={process.env.AVATAR_URL || defaultBgImages[1].image}\n            alt=\"avatar image\"\n            width={300}\n            height={200}\n            priority // Load image immediately\n            quality={100} // Adjust quality for optimization\n            placeholder=\"blur\" // Placeholder to improve perceived performance\n            blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n          />\n        </FadeIn>\n      </div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"AI Integrations\",\n    description:\n      \"Generative UIs, LLMs, Transformers, Chatbots, Classification, and more.\",\n    href: `#/tags/ai`,\n    cta: \"Visit AI projects\",\n    className: \"col-span-3 md:col-span-2\",\n    background: (\n      <motion.div\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        transition={{ duration: 1.5 }}\n      >\n        <BlurIn duration={0.5} className=\"h-full\">\n          <Image\n            className=\"object-cover object-center h-full w-full\"\n            src={process.env.AVATAR_URL || defaultBgImages[2].image}\n            alt=\"avatar image\"\n            width={300}\n            height={200}\n            priority // Load image immediately\n            quality={100} // Adjust quality for optimization\n            placeholder=\"blur\" // Placeholder to improve perceived performance\n            blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n          />\n        </BlurIn>\n      </motion.div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"Seamless Deployments\",\n    description: \"Push, build, deploy.\",\n    className: \"col-span-3 md:col-span-1\",\n    href: `${process.env.NEXT_PUBLIC_PORTFOLIO_URL}/tags/vercel`,\n    cta: \"Learn more\",\n    background: (\n      <div className=\"absolute w-full h-full right-0 top-0 origin-top rounded-md transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_25%,#000_70%)] group-hover:scale-105\">\n        <BlurIn duration={0.5} className=\"h-full\">\n          <Image\n            className=\"object-cover object-center h-full w-full\"\n            src={process.env.AVATAR_URL || defaultBgImages[3].image}\n            alt=\"avatar image\"\n            width={300}\n            height={200}\n            priority // Load image immediately\n            quality={100} // Adjust quality for optimization\n            placeholder=\"blur\" // Placeholder to improve perceived performance\n            blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n          />\n        </BlurIn>\n      </div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"Worldwide Reach\",\n    description:\n      \"Deploy to any region on earth. From remote servers, on-prem, in the cloud, or to the edge.\",\n    className: \"col-span-3 md:col-span-3\",\n    href: `#/tags/vercel`,\n    cta: \"Learn more\",\n    background: (\n      <div className=\"absolute w-full h-full right-0 top-0 origin-top rounded-md transition-all duration-300 ease-out  [mask-image:linear-gradient(to_top,transparent_20%,#000_100%)] md:[mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] group-hover:scale-105 group-hover:-translate-y-4\">\n        <BlurIn duration={0.5} className=\"h-full\">\n          <Image\n            className=\"object-cover object-center h-full w-full\"\n            src={process.env.AVATAR_URL || defaultBgImages[4].image}\n            alt=\"avatar image\"\n            width={300}\n            height={200}\n            priority // Load image immediately\n            quality={100} // Adjust quality for optimization\n            placeholder=\"blur\" // Placeholder to improve perceived performance\n            blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n          />\n        </BlurIn>\n      </div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"GitHub Stars\",\n    description: \"Star this repository to show your support.\",\n    className: \"col-span-3 md:col-span-1\",\n    href: `${process.env.GITHUB_URL}/${process.env.REPO_NAME}`,\n    cta: \"Star repository\",\n    background: (\n      <div className=\"absolute h-full w-full left-0 top-0 origin-top rounded-md transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_70%)] group-hover:scale-105 group-hover:-translate-y-4\">\n        <div className=\"text-7xl font-semibold w-full flex justify-center items-center h-2/3 group-hover:-translate-y-2 transition-all duration-300\">\n          <a\n            href={`${process.env.GITHUB_URL}/${process.env.REPO_NAME}`}\n            className=\"flex items-center gap-2 border shadow-xl p-5 rounded-lg border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\"\n          >\n            <BlurIn duration={0.5} className=\"h-full\">\n              <Image\n                className=\"object-cover object-center h-full w-full\"\n                src={process.env.AVATAR_URL || defaultBgImages[5].image}\n                alt=\"avatar image\"\n                width={120}\n                height={90}\n                priority // Load image immediately\n                quality={100} // Adjust quality for optimization\n                placeholder=\"blur\" // Placeholder to improve perceived performance\n                blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n              />\n            </BlurIn>\n          </a>\n        </div>\n      </div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"Project Showcase\",\n    description:\n      \"Here are a few of my recent projects, using the technologies mentioned above.\",\n    className: \"col-span-3 md:col-span-2\",\n    href: `${process.env.NEXT_PUBLIC_PORTFOLIO_URL}/projects`,\n    cta: \"All projects\",\n    background: (\n      <div className=\"absolute h-full w-full left-0 top-0 origin-top rounded-md transition-all duration-300 ease-out group-hover:scale-[102%]\">\n        <div className=\"absolute h-full w-full [mask-image:linear-gradient(to_top,transparent_20%,#000_70%)]\">\n          <div className=\"absolute h-full w-full [mask-image:linear-gradient(to_bottom,transparent_2%,#000_10%)]\">\n            <div className=\"text-7xl font-semibold w-full flex justify-center items-center h-2/3 transition-all duration-300\">\n              <div className=\"flex items-center gap-2\">\n                <BlurIn duration={0.5} className=\"h-full\">\n                  <Image\n                    className=\"object-cover object-center h-full w-full\"\n                    src={process.env.AVATAR_URL || defaultBgImages[6].image}\n                    alt=\"avatar image\"\n                    width={300}\n                    height={200}\n                    priority // Load image immediately\n                    quality={100} // Adjust quality for optimization\n                    placeholder=\"blur\" // Placeholder to improve perceived performance\n                    blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n                  />\n                </BlurIn>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"Daily Visitors\",\n    description:\n      \"Live visitor stats for this website, powered by Umami Analytics.\",\n    href: \"https://umami.is\",\n    cta: \"Umami\",\n    className: \"col-span-3 md:col-span-2\",\n    background: (\n      <>\n        <div className=\"absolute h-full w-full left-0 top-0 origin-top rounded-md transition-all duration-300 ease-out group-hover:scale-[102%]\">\n          <div className=\"absolute h-full w-full [mask-image:linear-gradient(to_top,transparent_20%,#000_70%)]\">\n            <div className=\"absolute h-full w-full [mask-image:linear-gradient(to_bottom,transparent_2%,#000_10%)]\">\n              <BlurIn duration={0.5} className=\"h-full\">\n                <Image\n                  className=\"object-cover object-center h-full w-full\"\n                  src={\n                    process.env.AVATAR_URL || defaultBgImages[6].image}\n                  alt=\"avatar image\"\n                  width={300}\n                  height={200}\n                  priority // Load image immediately\n                  quality={100} // Adjust quality for optimization\n                  placeholder=\"blur\" // Placeholder to improve perceived performance\n                  blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n                />\n              </BlurIn>\n            </div>\n            <div className=\"sm:-translate-y-5\"></div>\n          </div>\n        </div>\n      </>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"\",\n    description: \"\",\n    className: \"col-span-3 md:col-span-1\",\n    href: `${process.env.NEXT_PUBLIC_PORTFOLIO_URL}/now`,\n    cta: \"Ideas\",\n    background: (\n      <div className=\"absolute h-full w-full left-0 top-0 origin-top rounded-md transition-all duration-300 ease-out group-hover:scale-[105%]\">\n        <div className=\"absolute h-full w-full [mask-image:linear-gradient(to_top,transparent_20%,#000_70%)]\">\n          <div className=\"absolute h-full w-full [mask-image:linear-gradient(to_bottom,transparent_2%,#000_10%)]\">\n            <BlurIn duration={0.5} className=\"h-full\">\n              <Image\n                className=\"object-cover object-center h-full w-full\"\n                src={\n                  process.env.AVATAR_URL || defaultBgImages[7].image}\n                alt=\"avatar image\"\n                width={300}\n                height={200}\n                priority // Load image immediately\n                quality={100} // Adjust quality for optimization\n                placeholder=\"blur\" // Placeholder to improve perceived performance\n                blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n              />\n            </BlurIn>\n          </div>\n        </div>\n      </div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"\",\n    description: \"\",\n    className: \"col-span-3 md:col-span-3\",\n    href: \"\",\n    cta: \"\",\n    background: (\n      <div\n        id=\"contact-form\"\n        className=\"absolute h-full w-full left-0 top-0 origin-top rounded-md transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_0%,#000_0%)]\"\n      >\n        <div className=\"absolute inset-0 z-50 flex justify-center items-center gap-5 p-5\">\n          <div className=\"max-w-sm w-full flex flex-col gap-2\">\n            <div className=\"text-5xl md:text-6xl font-semibold text-neutral-700 dark:text-neutral-300 w-full flex justify-start\">\n              <BlurIn duration={0.5} className=\"h-full\">\n                Get in touch.\n              </BlurIn>\n            </div>\n            <div className=\"w-full flex justify-center text-neutral-500 dark:text-neutral-400\">\n              Leave your email to get the conversation started. We&apos;ll be in\n              touch soon.\n            </div>\n            <div className=\"text-sm text-neutral-500 dark:text-neutral-400 mt-2\">\n              *Your email will never be shared with anyone.\n            </div>\n            <div className=\"\"></div>\n          </div>\n        </div>\n      </div>\n    ),\n  },\n];\nexport function Bento() {\n  return (\n    <>\n      <BentoGrid>\n        {features.map((feature, idx) => (\n          <BentoCard key={idx} {...feature} />\n        ))}\n      </BentoGrid>\n    </>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/fellasUI/block/bento/bento.tsx"
    },
    {
      "path": "registry/@fellas/block/content-grid-view/content-grid-view.tsx",
      "content": "\"use client\";\n\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/registry/@fellas/ui/card\";\nimport { Badge } from \"@/registry/@fellas/ui/badge\";\nimport { Button } from \"@/registry/@fellas/ui/button\";\nimport { Star, Eye, Download } from \"lucide-react\";\nimport { ContentGrid } from \"@/registry/@fellas/ui/content-grid/content-grid\";\n\nexport default function ContentGridView() {\n  const sampleItems = [\n    {\n      id: 1,\n      title: \"Dashboard Template\",\n      description:\n        \"A comprehensive dashboard template with charts and analytics.\",\n      category: \"Template\",\n      price: \"$49\",\n      rating: 4.9,\n      views: 1234,\n      downloads: 892,\n    },\n    {\n      id: 2,\n      title: \"UI Kit Pro\",\n      description: \"Complete UI kit with modern components and layouts.\",\n      category: \"UI Kit\",\n      price: \"$29\",\n      rating: 4.8,\n      views: 956,\n      downloads: 643,\n    },\n  ];\n\n  const renderCard = (item: any, viewMode: \"grid\" | \"list\") => {\n    const isListMode = viewMode === \"list\";\n\n    return (\n      <Card\n        key={item.id}\n        className={`hover:shadow-md transition-shadow ${\n          isListMode ? \"flex items-center gap-4\" : \"\"\n        }`}\n      >\n        <div className={`flex-1 ${isListMode ? \"mr-4\" : \"\"}`}>\n          <CardHeader className=\"pb-2\">\n            <div className=\"flex items-start justify-between\">\n              <div>\n                <CardTitle className=\"text-base\">{item.title}</CardTitle>\n                <Badge variant=\"outline\" className=\"mt-1 text-xs\">\n                  {item.category}\n                </Badge>\n              </div>\n              <div className=\"text-right\">\n                <div className=\"font-bold text-primary\">{item.price}</div>\n                <div className=\"flex items-center gap-1 text-sm text-muted-foreground\">\n                  <Star className=\"h-3 w-3 fill-yellow-400 text-yellow-400\" />\n                  {item.rating}\n                </div>\n              </div>\n            </div>\n          </CardHeader>\n          <CardContent className=\"pt-0\">\n            <p className=\"text-muted-foreground text-sm mb-3 line-clamp-2\">\n              {item.description}\n            </p>\n            <div className=\"flex items-center gap-4 text-sm text-muted-foreground mb-3\">\n              <div className=\"flex items-center gap-1\">\n                <Eye className=\"h-4 w-4\" />\n                {item.views.toLocaleString()}\n              </div>\n              <div className=\"flex items-center gap-1\">\n                <Download className=\"h-4 w-4\" />\n                {item.downloads.toLocaleString()}\n              </div>\n            </div>\n            <Button size=\"sm\" className=\"w-full\">\n              <Download className=\"h-4 w-4 mr-2\" />\n              Download\n            </Button>\n          </CardContent>\n        </div>\n      </Card>\n    );\n  };\n\n  return (\n    <ContentGrid\n      items={sampleItems}\n      renderCard={renderCard}\n      defaultViewMode=\"grid\"\n      gridColumns={2}\n      className=\"w-full\"\n    />\n  );\n\n}",
      "type": "registry:block",
      "target": "components/fellasUI/block/content-grid-view/content-grid-view.tsx"
    },
    {
      "path": "registry/@fellas/block/draggable-dashboard-view/draggable-dashboard-view.tsx",
      "content": "\"use client\"\nimport React from 'react'\nimport DraggableDashboard, { DraggableWrapper } from '@/registry/@fellas/ui/draggable-dashboard/draggable-dashboard'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/@fellas/ui/card'\nimport {\n  TrendingUp,\n  TrendingDown,\n  Users,\n  DollarSign,\n  ShoppingCart,\n  Activity\n} from 'lucide-react'\n\nexport default function DraggableDashboardView() {\n  const RevenueCard = () => (\n    <Card className=\"h-full\">\n      <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle className=\"text-sm font-medium\">Total Revenue</CardTitle>\n        <DollarSign className=\"h-4 w-4 text-muted-foreground\" />\n      </CardHeader>\n      <CardContent>\n        <div className=\"text-2xl font-bold\">$45,231.89</div>\n        <div className=\"flex items-center text-xs text-muted-foreground\">\n          <TrendingUp className=\"mr-1 h-3 w-3 text-green-500\" />\n          +20.1% from last month\n        </div>\n      </CardContent>\n    </Card>\n  )\n\n  const UsersCard = () => (\n    <Card className=\"h-full\">\n      <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle className=\"text-sm font-medium\">Active Users</CardTitle>\n        <Users className=\"h-4 w-4 text-muted-foreground\" />\n      </CardHeader>\n      <CardContent>\n        <div className=\"text-2xl font-bold\">2,350</div>\n        <div className=\"flex items-center text-xs text-muted-foreground\">\n          <TrendingUp className=\"mr-1 h-3 w-3 text-green-500\" />\n          +180.1% from last month\n        </div>\n      </CardContent>\n    </Card>\n  )\n\n  const SalesCard = () => (\n    <Card className=\"h-full\">\n      <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle className=\"text-sm font-medium\">Sales</CardTitle>\n        <ShoppingCart className=\"h-4 w-4 text-muted-foreground\" />\n      </CardHeader>\n      <CardContent>\n        <div className=\"text-2xl font-bold\">12,234</div>\n        <div className=\"flex items-center text-xs text-muted-foreground\">\n          <TrendingDown className=\"mr-1 h-3 w-3 text-red-500\" />\n          -19% from last month\n        </div>\n      </CardContent>\n    </Card>\n  )\n\n  const PerformanceCard = () => (\n    <Card className=\"h-full\">\n      <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle className=\"text-sm font-medium\">Performance</CardTitle>\n        <Activity className=\"h-4 w-4 text-muted-foreground\" />\n      </CardHeader>\n      <CardContent>\n        <div className=\"text-2xl font-bold\">573</div>\n        <div className=\"flex items-center text-xs text-muted-foreground\">\n          <TrendingUp className=\"mr-1 h-3 w-3 text-green-500\" />\n          +201 since last hour\n        </div>\n      </CardContent>\n    </Card>\n  )\n\n  const SimpleChart = () => (\n    <Card className=\"h-full\">\n      <CardHeader>\n        <CardTitle>Revenue Overview</CardTitle>\n        <CardDescription>Last 6 months</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"h-[120px] flex items-end justify-between gap-2\">\n          {[65, 45, 78, 52, 89, 67].map((height, i) => (\n            <div key={i} className=\"flex-1 flex flex-col items-center gap-2\">\n              <div\n                className=\"w-full bg-primary rounded-t-sm transition-all hover:bg-primary/80\"\n                style={{ height: `${height}%` }}\n              />\n              <span className=\"text-xs text-muted-foreground\">\n                {['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'][i]}\n              </span>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n    </Card>\n  )\n\n  return (\n    <div className=\"w-full max-w-4xl mx-auto\">\n      <DraggableDashboard\n        showLockToggle={true}\n        showHandles={true}\n        gridCols={3}\n        gap={4}\n        defaultLocked={false}\n        persistenceKey=\"demo-dashboard\"\n      >\n        <DraggableWrapper id=\"revenue\" gridSize={{ cols: 1, rows: 1 }}>\n          <RevenueCard />\n        </DraggableWrapper>\n\n        <DraggableWrapper id=\"users\" gridSize={{ cols: 1, rows: 1 }}>\n          <UsersCard />\n        </DraggableWrapper>\n\n        <DraggableWrapper id=\"sales\" gridSize={{ cols: 1, rows: 1 }}>\n          <SalesCard />\n        </DraggableWrapper>\n        <DraggableWrapper id=\"performance\" gridSize={{ cols: 1, rows: 1 }}>\n          <PerformanceCard />\n        </DraggableWrapper>\n        <DraggableWrapper id=\"chart\" gridSize={{ cols: 2, rows: 1 }}>\n          <SimpleChart />\n        </DraggableWrapper>\n      </DraggableDashboard>\n    </div>\n  )\n}",
      "type": "registry:block",
      "target": "components/fellasUI/block/draggable-dashboard-view/draggable-dashboard-view.tsx"
    }
  ]
}