\r\n \r\n \r\n {items.map((item, index) => (\r\n \r\n {item}\r\n \r\n ))}\r\n
\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport const Card = ({\r\n project,\r\n index,\r\n layout = false,\r\n}: {\r\n project: Project\r\n index: number\r\n layout?: boolean\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false)\r\n const containerRef = useRef\r\n scroll(\"left\")}\r\n disabled={!canScrollLeft}\r\n >\r\n scroll(\"right\")}\r\n disabled={!canScrollRight}\r\n >\r\n
\r\n \r\n \r\n {project.title}\r\n \r\n \r\n {project.description}\r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default page\r\n",
"language": "tsx"
}
},
"carousel-2": {
"components": {
"@/registry/view/carousel-2/components/carousel-container": {
"content": "import { CarouselsData } from \"../constant\"\r\nimport { Card, Carousel } from \"./carousel\"\r\n\r\nconst CarouselContainer = () => {\r\n const cards = CarouselsData.map((card, index) => (\r\n \r\n \r\n \r\n {items.map((item, index) => (\r\n \r\n {item}\r\n \r\n ))}\r\n
\r\n \r\n \r\n \r\n )\r\n}\r\nexport const Card = ({\r\n card,\r\n index,\r\n layout = false,\r\n}: {\r\n card: Card\r\n index: number\r\n layout?: boolean\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false)\r\n const containerRef = useRef\r\n scroll(\"left\")}\r\n disabled={!canScrollLeft}\r\n >\r\n scroll(\"right\")}\r\n disabled={!canScrollRight}\r\n >\r\n
\r\n \r\n \r\n {card.category}\r\n \r\n \r\n {card.title}\r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default page\r\n",
"language": "tsx"
}
},
"case-studies-1": {
"components": {
"@/registry/view/case-studies-1/components/case-studies": {
"content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { motion } from \"framer-motion\"\r\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\r\nimport Image from \"next/image\"\r\nimport { useEffect, useRef, useState } from \"react\"\r\n\r\ninterface CaseStudy {\r\n id: string\r\n title: string\r\n description: string\r\n image: string\r\n}\r\n\r\ninterface CaseStudiesCarouselProps {\r\n title: string\r\n description: string\r\n caseStudies: CaseStudy[]\r\n}\r\n\r\nexport default function CaseStudiesCarousel({\r\n title = \"Case Studies\",\r\n description = \"Discover how leading companies and developers are leveraging modern web technologies to build exceptional digital experiences. These case studies showcase real-world applications and success stories.\",\r\n caseStudies = [\r\n {\r\n id: \"shadcn\",\r\n title: \"shadcn/ui: Building a Modern Component Library\",\r\n description:\r\n \"Explore how shadcn/ui revolutionized React component development\",\r\n image: \"/blocks/case-studies-1/image-1.jpg\",\r\n },\r\n {\r\n id: \"tailwind\",\r\n title: \"Tailwind CSS: The Utility-First Revolution\",\r\n description:\r\n \"Discover how Tailwind CSS transformed the way developers style applications\",\r\n image: \"/blocks/case-studies-1/image-2.jpg\",\r\n },\r\n {\r\n id: \"astro\",\r\n title: \"Astro: The All-in-One Web Framework\",\r\n description:\r\n \"Learn how Astro's innovative 'Islands Architecture' and zero-JS approach\",\r\n image: \"/blocks/case-studies-1/image-3.jpg\",\r\n },\r\n {\r\n id: \"react\",\r\n title: \"React: Pioneering Component-Based UI\",\r\n description:\r\n \"See how React continues to shape modern web development with its component model\",\r\n image: \"/blocks/case-studies-1/image-4.jpg\",\r\n },\r\n {\r\n id: \"nextjs\",\r\n title: \"Next.js: The React Framework\",\r\n description:\r\n \"Explore how Next.js has become the go-to framework for React applications\",\r\n image: \"/blocks/case-studies-1/image-5.jpg\",\r\n },\r\n ],\r\n}: CaseStudiesCarouselProps) {\r\n const carouselRef = useRef\r\n
\r\n \r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/case-studies-1/page": {
"content": "import CaseStudies from \"./components/case-studies\"\r\n\r\nconst page = () => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {title}\r\n
\r\n\r\n {description}\r\n
\r\n\r\n scroll(\"left\")}\r\n disabled={!canScrollLeft}\r\n aria-label=\"Previous slide\"\r\n >\r\n scroll(\"right\")}\r\n disabled={!canScrollRight}\r\n aria-label=\"Next slide\"\r\n >\r\n
\r\n \r\n {\r\n checkScrollAbility()\r\n if (carouselRef.current) {\r\n const scrollLeft = carouselRef.current.scrollLeft\r\n const cardWidth =\r\n carouselRef.current.querySelector(\"div[data-card]\")\r\n ?.clientWidth || 300\r\n const newIndex = Math.round(scrollLeft / cardWidth)\r\n if (\r\n newIndex !== activeIndex &&\r\n newIndex >= 0 &&\r\n newIndex < caseStudies.length\r\n ) {\r\n setActiveIndex(newIndex)\r\n }\r\n }\r\n }}\r\n >\r\n {caseStudies.map((study, index) => (\r\n \r\n
\r\n \r\n
\r\n \r\n ))}\r\n \r\n
\r\n \r\n {study.title}\r\n
\r\n\r\n {study.description}\r\n
\r\n \r\n\r\n {caseStudies.map((_, index) => (\r\n scrollToIndex(index)}\r\n className={cn(\r\n \"w-2 h-2 rounded-full transition-all duration-300\",\r\n activeIndex === index\r\n ? \"bg-gray-800 dark:bg-white w-4\"\r\n : \"bg-gray-300 dark:bg-gray-600\"\r\n )}\r\n aria-label={`Go to slide ${index + 1}`}\r\n aria-current={activeIndex === index ? \"true\" : \"false\"}\r\n />\r\n ))}\r\n
\r\n \r\n
\r\n \r\n \r\n )\r\n}\r\n\r\nfunction CaseStudyCard({\r\n card,\r\n index,\r\n layout = false,\r\n}: {\r\n card: CaseStudy\r\n index: number\r\n layout?: boolean\r\n}) {\r\n const [open, setOpen] = useState(false)\r\n const containerRef = useRef\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {title}\r\n
\r\n\r\n {description}\r\n
\r\n\r\n scroll(\"left\")}\r\n disabled={!canScrollLeft}\r\n aria-label=\"Previous slide\"\r\n >\r\n scroll(\"right\")}\r\n disabled={!canScrollRight}\r\n aria-label=\"Next slide\"\r\n >\r\n
\r\n \r\n \r\n {caseStudies.map((study, index) => (\r\n
\r\n \r\n
\r\n )\r\n\r\n return (\r\n <>\r\n \r\n {card.fullDescription || card.description}\r\n
\r\n {card.technologies && card.technologies.length > 0 && (\r\n\r\n
\r\n )}\r\n {card.image && (\r\n \r\n Technologies\r\n
\r\n\r\n {card.technologies.map((tech) => (\r\n \r\n {tech}\r\n \r\n ))}\r\n
\r\n \r\n
\r\n )}\r\n {card.company && (\r\n \r\n
\r\n )}\r\n {card.link && (\r\n \r\n Company\r\n
\r\n{card.company}
\r\n\r\n \r\n Visit Website\r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n {card.category}\r\n \r\n \r\n {card.title}\r\n \r\n
\r\n )}\r\n {cardContent}
\r\n \r\n \r\n \r\n {card.category}\r\n \r\n \r\n {card.title}\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ContactForm;",
"language": "tsx"
}
},
"constant": {},
"lib": {
"@/registry/view/contact-1/lib/utils.ts": {
"content": "import z from \"zod\";\r\n\r\nexport const authFormConfirmingOrderSchema = z.object({\r\n fullName: z.string().min(3, {\r\n message: \"Full Name Must be At Least 3 Characters\",\r\n }),\r\n phoneNumber: z.string().min(11, {\r\n message: \"Please enter a valid number that contains 11 numbers\",\r\n }),\r\n address: z.string().max(150, {\r\n message: \"Address Must be clear\",\r\n }),\r\n state: z.string().min(2, {\r\n message: \"State Must be at least 2 characters like: Nasr City\",\r\n }),\r\n city: z.string().min(2, {\r\n message: \"City must be at least 2 characters \",\r\n }),\r\n zipCode: z\r\n .string()\r\n .min(2)\r\n .max(10, {\r\n message: \"Zip Code Must be clear like cairo zip code: 4461232\",\r\n })\r\n .optional(),\r\n country: z.string().min(2, {\r\n message: \"country must be at least 2 characters like : EG\",\r\n }),\r\n});\r\n",
"language": "typescript"
}
},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/contact-1/page": {
"content": "import Contact from \"./components/contact\";\r\n\r\nexport default function Page() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Contact Us\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n Visit Us
\r\n\r\n Come visit us at our main headquarters\r\n
\r\n Cairo, Egypt - New Administrative Capital\r\n
\r\n
\r\n \r\n \r\n hello@alpha.dev\r\n \r\n
\r\n Email Us
\r\n\r\n Our technical team is ready to help you\r\n
\r\n\r\n
\r\n \r\n \r\n (+20) 10 123-456-78\r\n \r\n
\r\n Call Us
\r\n\r\n Sunday-Thursday from 9 AM to 6 PM (Cairo time)\r\n
\r\n\r\n
\r\n Follow Us
\r\n\r\n {[\r\n { Icon: FaFacebook, href: '#', label: 'Facebook' },\r\n { Icon: FaLinkedin, href: '#', label: 'LinkedIn' },\r\n { Icon: AiFillInstagram, href: '#', label: 'Instagram' },\r\n { Icon: IoLogoTwitter, href: '#', label: 'Twitter' },\r\n ].map(({ Icon, href, label }) => (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {isSubmitting ? (\r\n <>\r\n \r\n Submitting...\r\n \r\n ) : formData.agreeToPrivacy ? (\r\n <>\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {errors.firstName}\r\n
\r\n )}\r\n\r\n \r\n
\r\n \r\n {errors.lastName}\r\n
\r\n )}\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {errors.email}\r\n
\r\n )}\r\n\r\n \r\n
\r\n \r\n
\r\n {errors.phone && (\r\n \r\n {errors.phone}\r\n
\r\n )}\r\n\r\n Example: +20 10 1234 5678, +966 50 123 4567, +971 50 123 4567\r\n
\r\n\r\n \r\n
\r\n \r\n {errors.message ? (\r\n
\r\n \r\n {errors.message}\r\n
\r\n ) : (\r\n\r\n Minimum 10 characters\r\n
\r\n )}\r\n450 ? 'text-destructive' : 'text-muted-foreground')}>\r\n {formData.message.length}/500\r\n
\r\n\r\n
\r\n \r\n \r\n setFormData(prev => ({ ...prev, agreeToPrivacy: !!checked }))\r\n }\r\n className=\"mt-1\"\r\n />\r\n
\r\n \r\n \r\n {errors.agreeToPrivacy && (\r\n
\r\n \r\n {errors.agreeToPrivacy}\r\n
\r\n )}\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Contact;",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/contact-2/page": {
"content": "import Contact from \"./components/contact\";\r\n\r\nexport default function Page() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Get In Touch\r\n
\r\n\r\n We'd love to hear from you! Whether you have questions, need\r\n support, or want to learn more about our services, our team is here\r\n to help.\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Our Address\r\n
\r\n\r\n
\r\n \r\n Alpha Tower\r\n
\r\n\r\n New Administrative Capital\r\n
\r\n\r\n Cairo, Egypt\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Contact Info\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n +20 101 234 567\r\n
\r\n\r\n
\r\n \r\n hello@alpha.dev\r\n
\r\n\r\n
\r\n \r\n Sun-Thu: 9AM - 6PM\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Request a Demo\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n Full Name*\r\n \r\n handleInputChange('fullName', e.target.value)}\r\n placeholder=\"Enter your name\"\r\n className=\"w-full px-4 py-3 rounded-lg transition-all duration-200 focus:ring-2 focus:ring-emerald-500 focus:border-transparent border bg-white border-gray-300 text-gray-900 placeholder-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400\"\r\n required\r\n />\r\n
\r\n \r\n \r\n Job Position*\r\n \r\n handleInputChange('jobPosition', e.target.value)}\r\n placeholder=\"Enter your job position\"\r\n className=\"w-full px-4 py-3 rounded-lg transition-all duration-200 focus:ring-2 focus:ring-emerald-500 focus:border-transparent border bg-white border-gray-300 text-gray-900 placeholder-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400\"\r\n required\r\n />\r\n
\r\n \r\n \r\n Email Address*\r\n \r\n handleInputChange('email', e.target.value)}\r\n placeholder=\"Enter your email\"\r\n className=\"w-full px-4 py-3 rounded-lg transition-all duration-200 focus:ring-2 focus:ring-emerald-500 focus:border-transparent border bg-white border-gray-300 text-gray-900 placeholder-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400\"\r\n required\r\n />\r\n
\r\n \r\n \r\n Phone Number*\r\n \r\n handleInputChange('phoneNumber', e.target.value)}\r\n placeholder=\"Enter your phone number\"\r\n className=\"w-full px-4 py-3 rounded-lg transition-all duration-200 focus:ring-2 focus:ring-emerald-500 focus:border-transparent border bg-white border-gray-300 text-gray-900 placeholder-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400\"\r\n required\r\n />\r\n
\r\n \r\n \r\n {isSubmitting ? (\r\n <>\r\n \r\n Submitting...\r\n \r\n ) : (\r\n <>\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n •\r\n Response within 24 hours\r\n
\r\n \r\n •\r\n Free consultation\r\n
\r\n \r\n
\r\n )\r\n}",
"language": "tsx"
}
},
"dashboard-1": {
"components": {
"@/registry/view/dashboard-1/components/dashboard": {
"content": "\"use client\"\r\n\r\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\r\nimport { Badge } from \"@/components/ui/badge\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\"\r\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from \"@/components/ui/dropdown-menu\"\r\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"@/components/ui/table\"\r\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport {\r\n Bell,\r\n DollarSign,\r\n Filter,\r\n MoreHorizontal,\r\n Package,\r\n Search,\r\n ShoppingCart,\r\n TrendingDown,\r\n TrendingUp,\r\n Users,\r\n} from \"lucide-react\"\r\nimport { useMemo, useState } from \"react\"\r\nimport { useResponsiveOrientation } from \"../hooks/use-responsive-orientation\"\r\nimport { formatDate, formatPrice } from \"../lib/utils\"\r\nimport { Sidebar } from \"./sidebar\"\r\n\r\ntype OrderStatus = \"awaiting_shipment\" | \"processing\" | \"fulfilled\" | \"cancelled\"\r\n\r\ninterface Order {\r\n id: number\r\n customerName: string\r\n customerEmail: string\r\n customerAvatar: string\r\n productName: string\r\n productImage: string\r\n productPrice: number\r\n quantity: number\r\n shippingPrice: number\r\n discountRate: number\r\n totalPrice: number\r\n status: OrderStatus\r\n createdAt: string\r\n}\r\n\r\nconst mockOrders: Order[] = [\r\n {\r\n id: 1001,\r\n customerName: \"Ahmed Hassan\",\r\n customerEmail: \"ahmed.hassan@email.com\",\r\n customerAvatar: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face\",\r\n productName: \"iPhone 15 Pro Max\",\r\n productImage: \"https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=100&h=100&fit=crop\",\r\n productPrice: 1199,\r\n quantity: 1,\r\n shippingPrice: 25,\r\n discountRate: 0.1,\r\n totalPrice: 1104.1,\r\n status: \"fulfilled\",\r\n createdAt: \"2024-01-15T10:30:00Z\",\r\n },\r\n {\r\n id: 1002,\r\n customerName: \"Fatima Al-Zahra\",\r\n customerEmail: \"fatima.zahra@email.com\",\r\n customerAvatar: \"https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=100&h=100&fit=crop&crop=face\",\r\n productName: \"MacBook Air M3\",\r\n productImage: \"https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=100&h=100&fit=crop\",\r\n productPrice: 1299,\r\n quantity: 1,\r\n shippingPrice: 0,\r\n discountRate: 0,\r\n totalPrice: 1299,\r\n status: \"processing\",\r\n createdAt: \"2024-01-14T14:20:00Z\",\r\n },\r\n {\r\n id: 1003,\r\n customerName: \"Omar Khaled\",\r\n customerEmail: \"omar.khaled@email.com\",\r\n customerAvatar: \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face\",\r\n productName: \"AirPods Pro 2\",\r\n productImage: \"https://images.unsplash.com/photo-1606220945770-b5b6c2c55bf1?w=100&h=100&fit=crop\",\r\n productPrice: 249,\r\n quantity: 2,\r\n shippingPrice: 15,\r\n discountRate: 0.05,\r\n totalPrice: 487.1,\r\n status: \"awaiting_shipment\",\r\n createdAt: \"2024-01-14T09:15:00Z\",\r\n },\r\n {\r\n id: 1004,\r\n customerName: \"Layla Mohammed\",\r\n customerEmail: \"layla.mohammed@email.com\",\r\n customerAvatar: \"https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=100&h=100&fit=crop&crop=face\",\r\n productName: \"iPad Pro 12.9\",\r\n productImage: \"https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=100&h=100&fit=crop\",\r\n productPrice: 1099,\r\n quantity: 1,\r\n shippingPrice: 20,\r\n discountRate: 0.15,\r\n totalPrice: 954.15,\r\n status: \"cancelled\",\r\n createdAt: \"2024-01-13T16:45:00Z\",\r\n },\r\n {\r\n id: 1005,\r\n customerName: \"Youssef Ali\",\r\n customerEmail: \"youssef.ali@email.com\",\r\n customerAvatar: \"\",\r\n productName: \"Apple Watch Series 9\",\r\n productImage: \"https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=100&h=100&fit=crop\",\r\n productPrice: 399,\r\n quantity: 1,\r\n shippingPrice: 10,\r\n discountRate: 0,\r\n totalPrice: 409,\r\n status: \"fulfilled\",\r\n createdAt: \"2024-01-13T11:30:00Z\",\r\n },\r\n {\r\n id: 1006,\r\n customerName: \"Nour Abdel Rahman\",\r\n customerEmail: \"nour.abdel@email.com\",\r\n customerAvatar: \"\",\r\n productName: \"Magic Keyboard\",\r\n productImage: \"https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=100&h=100&fit=crop\",\r\n productPrice: 299,\r\n quantity: 1,\r\n shippingPrice: 12,\r\n discountRate: 0.08,\r\n totalPrice: 286.08,\r\n status: \"processing\",\r\n createdAt: \"2024-01-12T13:20:00Z\",\r\n },\r\n]\r\n\r\nconst getStatusBadgeClassName = (status: OrderStatus) => {\r\n switch (status) {\r\n case \"cancelled\":\r\n return \"bg-red-500 text-white hover:bg-red-600\"\r\n case \"processing\":\r\n return \"bg-yellow-500 text-white hover:bg-yellow-600\"\r\n case \"fulfilled\":\r\n return \"bg-green-500 text-white hover:bg-green-600\"\r\n case \"awaiting_shipment\":\r\n return \"bg-blue-500 text-white hover:bg-blue-600\"\r\n default:\r\n return \"bg-gray-500 text-white hover:bg-gray-600\"\r\n }\r\n}\r\n\r\nconst LABEL_MAP: Record\r\n
\r\n \r\n
\r\n \r\n
\r\n E-commerce Admin
\r\n\r\n \r\n \r\n \r\n AD \r\n \r\n
\r\n \r\n \r\n \r\n Total Revenue \r\n \r\n \r\n \r\n \r\n \r\n \r\n Total Orders \r\n \r\n \r\n \r\n \r\n \r\n \r\n Customers \r\n \r\n \r\n \r\n \r\n \r\n \r\n Avg. Order Value \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default function Dashboard() {\r\n const [filter, setFilter] = useState{formatPrice(stats.totalSales)}
\r\n \r\n
{stats.totalOrders}
\r\n \r\n
{stats.totalCustomers}
\r\n \r\n
{formatPrice(stats.avgOrderValue)}
\r\n \r\n
\r\n
\r\n \r\n )\r\n}\r\n",
"language": "tsx"
},
"@/registry/view/dashboard-1/components/sidebar": {
"content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\r\nimport Link from \"next/link\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { motion } from \"framer-motion\"\r\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\r\nimport { usePathname } from \"next/navigation\"\r\nimport { useState } from \"react\"\r\nimport { DASHBOARDS } from \"../constant/index\"\r\n\r\ntype OrderStatus = \"pending\" | \"processing\" | \"shipped\" | \"delivered\" | \"cancelled\"\r\n\r\ninterface SidebarProps {\r\n className?: string\r\n}\r\n\r\nexport function Sidebar({ className }: SidebarProps) {\r\n const [isOpen, setIsOpen] = useState(false)\r\n const [activeFilter, setActiveFilter] = useState\r\n
\r\n \r\n
\r\n Dashboard
\r\nWelcome back! Here's what's happening with your store today.
\r\n\r\n \r\n \r\n All Orders \r\n Awaiting \r\n Processing \r\n Fulfilled \r\n Cancelled \r\n \r\n \r\n \r\n \r\n Orders \r\n Manage your orders and view their status. \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Recent Orders
\r\n \r\n\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n A\r\n
\r\n \r\n
\r\n Admin Panel
\r\nEcommerce Dashboard
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n JD\r\n
\r\n \r\n
\r\n John Doe
\r\njohn@example.com
\r\n\r\n {children} \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"@/registry/view/dashboard-1/page": {
"content": "import Dashboard from \"./components/dashboard\"\r\n\r\nexport default function Page() {\r\n return (\r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"dashboard-2": {
"components": {
"@/registry/view/dashboard-2/components/dashboard-header": {
"content": "import { SidebarTrigger } from \"@/components/ui/sidebar\"\r\nimport { Separator } from \"@/components/ui/separator\"\r\n\r\nexport function DashboardHeader() {\r\n return (\r\n \r\n
\r\n Dashboard
\r\n\r\n {user.name}\r\n \r\n {user.email}\r\n \r\n
\r\n \r\n \r\n CN \r\n \r\n
\r\n \r\n {user.name}\r\n \r\n {user.email}\r\n \r\n
\r\n \r\n \r\n \r\n Total Revenue \r\n \r\n {formatPrice(85637)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n New Customers \r\n \r\n 1,234\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Active Accounts \r\n \r\n 45,678\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Growth Rate \r\n \r\n 4.5%\r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {
"@/registry/view/dashboard-2/lib/utils.ts": {
"content": "// this for formatting the price in the product overview page for your country currency\r\nexport const formatPrice = (price: number) => {\r\n const formatter = new Intl.NumberFormat(\"en-US\", {\r\n style: \"currency\",\r\n currency: \"EGP\",\r\n useGrouping: false,\r\n })\r\n return formatter.format(price)\r\n}\r\n",
"language": "typescript"
}
},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/dashboard-2/page": {
"content": "\"use client\"\r\n\r\nimport {\r\n Avatar,\r\n AvatarFallback,\r\n AvatarImage,\r\n} from \"@/components/ui/avatar\"\r\nimport { Badge } from \"@/components/ui/badge\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n Card,\r\n CardContent,\r\n CardDescription,\r\n CardFooter,\r\n CardHeader,\r\n CardTitle,\r\n} from \"@/components/ui/card\"\r\nimport {\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableHead,\r\n TableHeader,\r\n TableRow,\r\n} from \"@/components/ui/table\"\r\nimport { SidebarInset, SidebarProvider } from \"@/components/ui/sidebar\"\r\nimport { ArrowUpRight } from \"lucide-react\"\r\nimport dynamic from \"next/dynamic\"\r\nimport Link from \"next/link\"\r\nimport { formatPrice } from \"../dashboard-3/lib/utils\"\r\nimport { DashboardHeader } from \"./components/dashboard-header\"\r\nimport DashboardSidebar from \"./components/dashboard-sidebar\"\r\nimport { SectionCards } from \"./components/section-cards\"\r\n\r\nconst ReactECharts = dynamic(() => import(\"echarts-for-react\"), { ssr: false })\r\nconst salesData = [\r\n { name: \"Jan\", sales: 4000 },\r\n { name: \"Feb\", sales: 3000 },\r\n { name: \"Mar\", sales: 5000 },\r\n { name: \"April\", sales: 2780 },\r\n { name: \"May\", sales: 1890 },\r\n { name: \"June\", sales: 6390 },\r\n { name: \"July\", sales: 3490 },\r\n { name: \"Aug\", sales: 9688 },\r\n { name: \"Seb\", sales: 2500 },\r\n { name: \"Oct\", sales: 7538 },\r\n { name: \"Nov\", sales: 1598 },\r\n { name: \"Dec\", sales: 7412 },\r\n]\r\nconst salesChartOptions = {\r\n tooltip: {\r\n trigger: \"axis\",\r\n backgroundColor: \"#fff\",\r\n borderColor: \"#e5e7eb\",\r\n borderWidth: 1,\r\n textStyle: { color: \"#111827\", fontSize: 12 },\r\n },\r\n grid: { left: \"3%\", right: \"4%\", bottom: \"3%\", containLabel: true },\r\n xAxis: {\r\n type: \"category\",\r\n data: salesData.map((d) => d.name),\r\n axisTick: { show: false },\r\n axisLine: { lineStyle: { color: \"#d1d5db\" } },\r\n axisLabel: {\r\n fontSize: 12,\r\n interval: (index: number, value: string) => {\r\n return window.innerWidth > 640 ? true : index % 2 === 0\r\n },\r\n },\r\n },\r\n yAxis: {\r\n type: \"value\",\r\n axisLine: { show: false },\r\n splitLine: { lineStyle: { color: \"#e5e7eb\", type: \"dashed\" } },\r\n axisLabel: { fontSize: 12 },\r\n },\r\n series: [\r\n {\r\n data: salesData.map((d) => d.sales),\r\n type: \"bar\",\r\n itemStyle: {\r\n borderRadius: [4, 4, 0, 0],\r\n color: \"#6366f1\",\r\n },\r\n barWidth: \"40%\",\r\n },\r\n ],\r\n media: [\r\n {\r\n query: { maxWidth: 640 },\r\n option: {\r\n grid: { left: \"8%\", right: \"8%\" },\r\n xAxis: { axisLabel: { fontSize: 10, rotate: 45 } },\r\n yAxis: { axisLabel: { fontSize: 10 } },\r\n },\r\n },\r\n ],\r\n}\r\n\r\nconst recentOrders = [\r\n {\r\n id: \"ORD-7352\",\r\n date: \"2025-04-24\",\r\n customer: \"Emma Johnson\",\r\n amount: 235.89,\r\n status: \"Delivered\",\r\n },\r\n {\r\n id: \"ORD-7351\",\r\n date: \"2025-04-23\",\r\n customer: \"Michael Chen\",\r\n amount: 125.99,\r\n status: \"Processing\",\r\n },\r\n {\r\n id: \"ORD-7350\",\r\n date: \"2025-04-23\",\r\n customer: \"Sophia Martinez\",\r\n amount: 432.2,\r\n status: \"Shipped\",\r\n },\r\n {\r\n id: \"ORD-7349\",\r\n date: \"2025-04-22\",\r\n customer: \"James Wilson\",\r\n amount: 76.45,\r\n status: \"Delivered\",\r\n },\r\n {\r\n id: \"ORD-7348\",\r\n date: \"2025-04-21\",\r\n customer: \"Olivia Brown\",\r\n amount: 189.5,\r\n status: \"Processing\",\r\n },\r\n {\r\n id: \"ORD-7347\",\r\n date: \"2025-04-20\",\r\n customer: \"William Davis\",\r\n amount: 312.75,\r\n status: \"Delivered\",\r\n },\r\n {\r\n id: \"ORD-7346\",\r\n date: \"2025-04-19\",\r\n customer: \"Ava Garcia\",\r\n amount: 94.2,\r\n status: \"Shipped\",\r\n },\r\n]\r\n\r\nexport default function DashboardPage() {\r\n return (\r\n \r\n \r\n
\r\n \r\n Trending up this month{\" \"}\r\n
\r\n \r\n Visitors for the last 6 months\r\n
\r\n \r\n \r\n
\r\n \r\n Down 20% this period{\" \"}\r\n
\r\n \r\n Acquisition needs attention\r\n
\r\n \r\n \r\n
\r\n \r\n Strong user retention{\" \"}\r\n
\r\n \r\n Engagement exceed targets\r\n
\r\n \r\n \r\n
\r\n \r\n Steady performance
\r\n \r\n Meets growth projections\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n Recent Orders\r\n \r\n \r\n Detailed view of the last 7 days order history\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n View All Orders\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Sales Overview\r\n \r\n \r\n Yearly sales performance for the last 12 months\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n Last 3 months\r\n \r\n \r\n Last 30 days\r\n \r\n \r\n Last 7 days\r\n \r\n \r\n \r\n
\r\n \r\n table.toggleAllPageRowsSelected(!!value)}\r\n aria-label=\"Select all\"\r\n />\r\n
\r\n ),\r\n cell: ({ row }) => (\r\n \r\n row.toggleSelected(!!value)}\r\n aria-label=\"Select row\"\r\n />\r\n
\r\n ),\r\n enableSorting: false,\r\n enableHiding: false,\r\n },\r\n {\r\n accessorKey: \"header\",\r\n header: \"Header\",\r\n cell: ({ row }) => {\r\n return \r\n \r\n {row.original.type}\r\n \r\n
\r\n ),\r\n },\r\n {\r\n accessorKey: \"status\",\r\n header: \"Status\",\r\n cell: ({ row }) => (\r\n Target
,\r\n cell: ({ row }) => (\r\n Limit
,\r\n cell: ({ row }) => (\r\n \r\n \r\n \r\n \r\n Outline \r\n \r\n Past Performance{\" \"}\r\n \r\n 3\r\n \r\n \r\n \r\n Key Personnel{\" \"}\r\n \r\n 2\r\n \r\n \r\n Focus Documents \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {table\r\n .getAllColumns()\r\n .filter(\r\n (column) =>\r\n typeof column.accessorFn !== \"undefined\" &&\r\n column.getCanHide()\r\n )\r\n .map((column) => {\r\n return (\r\n \r\n column.toggleVisibility(!!value)\r\n }\r\n >\r\n {column.id}\r\n \r\n )\r\n })}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\r\n {table.getFilteredRowModel().rows.length} row(s) selected.\r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n table.setPageSize(Number(value))\r\n }}\r\n >\r\n \r\n \r\n \r\n {[10, 20, 30, 40, 50].map((pageSize) => (\r\n \r\n {pageSize}\r\n \r\n ))}\r\n \r\n \r\n
\r\n \r\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\r\n {table.getPageCount()}\r\n
\r\n \r\n table.setPageIndex(0)}\r\n disabled={!table.getCanPreviousPage()}\r\n >\r\n Go to first page\r\n table.previousPage()}\r\n disabled={!table.getCanPreviousPage()}\r\n >\r\n Go to previous page\r\n table.nextPage()}\r\n disabled={!table.getCanNextPage()}\r\n >\r\n Go to next page\r\n table.setPageIndex(table.getPageCount() - 1)}\r\n disabled={!table.getCanNextPage()}\r\n >\r\n Go to last page\r\n
\r\n \r\n {!isMobile && (\r\n <>\r\n \r\n \r\n value.slice(0, 3)}\r\n hide\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n Trending up by 5.2% this month{\" \"}\r\n
\r\n \r\n Showing total visitors for the last 6 months. This is just\r\n some random text to test the layout. It spans multiple lines\r\n and should wrap around.\r\n
\r\n \r\n {user.name}\r\n \r\n {user.email}\r\n \r\n
\r\n \r\n \r\n CN \r\n \r\n
\r\n \r\n {user.name}\r\n \r\n {user.email}\r\n \r\n
\r\n \r\n \r\n \r\n Total Revenue \r\n \r\n {formatPrice(1250)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n New Customers \r\n \r\n 1,234\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Active Accounts \r\n \r\n 45,678\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Growth Rate \r\n \r\n 4.5%\r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
},
"@/registry/view/dashboard-3/components/site-header": {
"content": "import { SidebarTrigger } from \"@/components/ui/sidebar\"\r\nimport { Separator } from \"@/components/ui/separator\"\r\n\r\nexport function SiteHeader() {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n Trending up this month
\r\n \r\n Visitors for the last 6 months\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n Down 20% this period
\r\n \r\n Acquisition needs attention\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n Strong user retention
\r\n Engagement exceed targets
\r\n \r\n \r\n \r\n
\r\n \r\n Steady performance
\r\n Meets growth projections
\r\n \r\n
\r\n Documents
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {galleryItems.map((item, index) => (\r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"faq-1": {
"components": {
"@/registry/view/faq-1/components/faqs": {
"content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport {\r\n BarChart3,\r\n BookOpen,\r\n ChevronDown,\r\n Code,\r\n CreditCard,\r\n DollarSign,\r\n HelpCircle,\r\n Mail,\r\n MessageCircle,\r\n} from \"lucide-react\"\r\nimport Link from \"next/link\"\r\nimport type React from \"react\"\r\nimport { useState } from \"react\"\r\n\r\ninterface FAQ {\r\n id: string\r\n question: string\r\n answer: string\r\n icon: React.ReactNode\r\n category: string\r\n}\r\n\r\ninterface FAQBlockProps {\r\n title?: string\r\n subtitle?: string\r\n linkText?: string\r\n linkHref?: string\r\n categories?: string[]\r\n faqs?: FAQ[]\r\n className?: string\r\n}\r\n\r\nconst defaultFAQs: FAQ[] = [\r\n {\r\n id: \"1\",\r\n question: \"Is there a free trial available?\",\r\n answer:\r\n \"Yes, you can try us for free for 30 days. If you want, we'll provide you with a free 30-minute onboarding call to get you up and running. Book a call here.\",\r\n icon: \r\n
\r\n {filteredFAQs.length === 0 && (\r\n \r\n
\r\n {title}
\r\n\r\n {subtitle}{\" \"}\r\n
\r\n {categories.map((category) => (\r\n setActiveCategory(category)}\r\n className={cn(\r\n \"rounded-full px-6 py-2 text-sm font-medium transition-all duration-200\",\r\n activeCategory === category\r\n ? \"bg-foreground text-background hover:bg-foreground/90 shadow-md\"\r\n : \"bg-background text-foreground border-border hover:bg-accent hover:text-accent-foreground shadow-sm hover:shadow-md\",\r\n )}\r\n aria-pressed={activeCategory === category}\r\n role=\"tab\"\r\n aria-selected={activeCategory === category}\r\n >\r\n {category}\r\n \r\n ))}\r\n
\r\n \r\n {filteredFAQs.map((faq, index) => (\r\n toggleItem(faq.id)}>\r\n
\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {faq.icon}\r\n
\r\n \r\n {faq.question}\r\n
\r\n\r\n {faq.answer}\r\n
\r\n \r\n
\r\n )}\r\n \r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/faq-1/page": {
"content": "import FAQ from \"./components/faqs\";\r\n\r\nexport default function page() {\r\n return (\r\n \r\n
\r\n No FAQs found
\r\n\r\n There are no frequently asked questions in the {activeCategory} category yet.\r\n
\r\n\r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"features-showcase-1": {
"components": {
"@/registry/view/features-showcase-1/components/feature-showcase": {
"content": "import { ArrowRight, Box, LayoutGrid, Library } from \"lucide-react\"\r\n\r\nexport default function FeatureShowcase() {\r\n return (\r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/features-showcase-1/page": {
"content": "import FeatureShowcase from \"./components/feature-showcase\"\r\n\r\nexport default function Page() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n Key highlights
\r\nWhy Alpha only?
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n Pixel Perfect Layout
\r\n\r\n All the sections are perfectly designed with pixel perfect grids\r\n and layouts. Everything you see is responsive for all devices.\r\n
\r\n\r\n Learn more\r\n
\r\n \r\n
\r\n \r\n
\r\n Editable Components
\r\n\r\n With the help of Framer variables, everything is under you\r\n control. Just click the component and start changing everything\r\n but not anything.\r\n
\r\n\r\n Learn more\r\n
\r\n \r\n
\r\n \r\n
\r\n Scalable Library
\r\n\r\n Since each component is custom made, you can easily scale you\r\n library with new components, icons, colors, etc.\r\n
\r\n\r\n Learn more\r\n
\r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"features-showcase-2": {
"components": {
"@/registry/view/features-showcase-2/components/features-showcase": {
"content": "import type React from \"react\"\r\nimport { Ban, CreditCard, Shield, Smartphone } from \"lucide-react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\ninterface FeatureCardProps {\r\n icon: React.ReactNode\r\n title: string\r\n description: string\r\n variant: \"amber\" | \"cyan\" | \"emerald\" | \"blue\"\r\n className?: string\r\n}\r\n\r\nfunction FeatureCard({ icon, title, description, variant, className }: FeatureCardProps) {\r\n const variantStyles = {\r\n amber: \"bg-amber-50 dark:bg-amber-950/20 border-amber-200 dark:border-amber-800/30\",\r\n cyan: \"bg-cyan-50 dark:bg-cyan-950/20 border-cyan-200 dark:border-cyan-800/30\",\r\n emerald: \"bg-emerald-50 dark:bg-emerald-950/20 border-emerald-200 dark:border-emerald-800/30\",\r\n blue: \"bg-blue-50 dark:bg-blue-950/20 border-blue-200 dark:border-blue-800/30\",\r\n }\r\n\r\n const iconStyles = {\r\n amber: \"text-amber-600 dark:text-amber-400\",\r\n cyan: \"text-cyan-600 dark:text-cyan-400\",\r\n emerald: \"text-emerald-600 dark:text-emerald-400\",\r\n blue: \"text-blue-600 dark:text-blue-400\",\r\n }\r\n\r\n return (\r\n \r\n
\r\n {icon}
\r\n {title}
\r\n{description}
\r\n \r\n )\r\n}\r\n\r\nexport default function FinancialFeatures() {\r\n const features = [\r\n {\r\n icon:\r\n
\r\n \r\n
\r\n \r\n Custom-built for financial exchanges\r\n
\r\n\r\n Our platform offers secure and efficient transaction capabilities, tailored to meet diverse payment needs\r\n with robust features.\r\n
\r\n\r\n {features.map((feature, index) => (\r\n
\r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"features-showcase-3": {
"components": {
"@/registry/view/features-showcase-3/components/features-showcase": {
"content": "import { HeartPulse, Stethoscope, ShieldCheck, Activity } from \"lucide-react\"\r\n\r\nexport default function FeaturesShowcase() {\r\n const features = [\r\n {\r\n icon: ShieldCheck,\r\n title: \"Secure & Compliant by Default\",\r\n description:\r\n \"Built with end-to-end encryption and fully compliant with HIPAA standards to safeguard patient data and ensure trust.\",\r\n },\r\n {\r\n icon: HeartPulse,\r\n title: \"Realtime Vital Signs Display\",\r\n description:\r\n \"Designed for critical care environments — instantly render and update patient vitals with zero lag and clinical-grade precision.\",\r\n },\r\n {\r\n icon: Stethoscope,\r\n title: \"Ergonomic for Medical Workflows\",\r\n description:\r\n \"Crafted for doctors, nurses, and specialists. Clear layouts and intuitive spacing reduce cognitive load in high-pressure scenarios.\",\r\n },\r\n {\r\n icon: Activity,\r\n title: \"Live Health Metrics & Analytics\",\r\n description:\r\n \"Visualize trends, charts, and diagnostic data in real-time. Engineered for clarity and speed in data-driven medical decisions.\",\r\n },\r\n ]\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Healthcare-Optimized Components\r\n
\r\n\r\n Designed specifically for medical interfaces with a focus on clarity, performance, and compliance.\r\n
\r\n\r\n {features.map((feature, index) => (\r\n \r\n
\r\n ))}\r\n \r\n
\r\n {feature.title}
\r\n{feature.description}
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n Enterprise-Grade Solutions\r\n
\r\n\r\n Robust features designed to optimize operations, enhance security, and accelerate your organization's\r\n digital transformation.\r\n
\r\n\r\n {features.map((feature, index) => (\r\n setHoveredFeature(index)}\r\n onMouseLeave={() => setHoveredFeature(null)}\r\n initial={{ opacity: 0, y: 20 }}\r\n whileInView={{ opacity: 1, y: 0 }}\r\n viewport={{ once: true, amount: 0.2 }}\r\n transition={{ duration: 0.5, delay: index * 0.1 }}\r\n role=\"article\"\r\n aria-labelledby={`feature-title-${index}`}\r\n >\r\n \r\n {feature.title}\r\n \r\n {\r\n if (e.key === \"Enter\" || e.key === \" \") {\r\n e.preventDefault()\r\n }\r\n }}\r\n >\r\n \r\n Learn more\r\n \r\n
\r\n \r\n ))}\r\n \r\n \r\n {feature.icon}\r\n
\r\n \r\n {feature.description}\r\n
\r\n\r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"login-1": {
"components": {
"@/registry/view/login-1/components/login-form": {
"content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n Card,\r\n CardContent,\r\n CardDescription,\r\n CardHeader,\r\n CardTitle,\r\n} from \"@/components/ui/card\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport Link from \"next/link\"\r\nimport type React from \"react\"\r\nimport { useState } from \"react\"\r\nimport { FcGoogle } from \"react-icons/fc\"\r\nimport { FiEye, FiEyeOff } from \"react-icons/fi\"\r\n\r\nexport function LoginForm({\r\n className,\r\n ...props\r\n}: React.ComponentPropsWithoutRef<\"div\">) {\r\n const [showPassword, setShowPassword] = useState(false)\r\n\r\n const togglePasswordVisibility = () => {\r\n setShowPassword(!showPassword)\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n Login \r\n \r\n Enter your email below to login to your account\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/login-1/page": {
"content": "import Container from \"@/components/Container\"\r\nimport { LoginForm } from \"./components/login-form\"\r\n\r\nexport default function LogInPage() {\r\n return (\r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"login-2": {
"components": {
"@/registry/view/login-2/components/login-form": {
"content": "import { Button } from \"@/components/ui/button\"\r\nimport { Card, CardContent } from \"@/components/ui/card\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ArrowLeft, Eye, EyeOff } from \"lucide-react\"\r\nimport Link from \"next/link\"\r\nimport { useState } from \"react\"\r\n\r\nexport function LoginForm({\r\n className,\r\n ...props\r\n}: React.ComponentProps<\"div\">) {\r\n const [showPassword, setShowPassword] = useState(false)\r\n const togglePasswordVisibility = () => setShowPassword((prev) => !prev)\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/login-2/page": {
"content": "import Container from \"@/components/Container\"\r\nimport { LoginForm } from \"./components/login-form\"\r\n\r\nexport default function LogInPage() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n Join Alpha
\r\n\r\n Create your account and Get your first custom MVP\r\n
\r\n\r\n By clicking continue, you agree to our{\" \"}\r\n Terms of Service and{\" \"}\r\n Privacy Policy.\r\n
\r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"login-3": {
"components": {
"@/registry/view/login-3/components/login-form": {
"content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Eye, EyeOff } from \"lucide-react\"\r\nimport Link from \"next/link\"\r\nimport { useState } from \"react\"\r\n\r\nexport function LoginForm({\r\n className,\r\n ...props\r\n}: React.ComponentPropsWithoutRef<\"form\">) {\r\n const [showPassword, setShowPassword] = useState(false)\r\n const togglePasswordVisibility = () => setShowPassword((prev) => !prev)\r\n\r\n return (\r\n \r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/login-3/page": {
"content": "import { GalleryVerticalEnd } from \"lucide-react\"\r\nimport Link from \"next/link\"\r\nimport { LoginForm } from \"./components/login-form\"\r\n\r\nexport default function LoginPage() {\r\n return (\r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"login-4": {
"components": {
"@/registry/view/login-4/components/login-form": {
"content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Eye, EyeOff, GalleryVerticalEnd } from \"lucide-react\"\r\nimport Link from \"next/link\"\r\nimport { useState } from \"react\"\r\n\r\nexport function LoginForm({\r\n className,\r\n ...props\r\n}: React.ComponentPropsWithoutRef<\"div\">) {\r\n const [showPassword, setShowPassword] = useState(false)\r\n const togglePasswordVisibility = () => setShowPassword((prev) => !prev)\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n UniqueBrand.\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/login-4/page": {
"content": "import { LoginForm } from \"./components/login-form\"\r\n\r\nexport default function LoginPage() {\r\n return (\r\n \r\n By clicking continue, you agree to our Terms of Service{\" \"}\r\n and Privacy Policy.\r\n
\r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"mail-1": {
"components": {
"@/registry/view/mail-1/components/account-switcher": {
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\n\ninterface AccountSwitcherProps {\n isCollapsed: boolean\n accounts: {\n label: string\n email: string\n icon: React.ReactNode\n }[]\n}\n\nexport function AccountSwitcher({\n isCollapsed,\n accounts,\n}: AccountSwitcherProps) {\n const [selectedAccount, setSelectedAccount] = React.useState\r\n
\r\n \n
\n )\n}",
"language": "tsx"
},
"@/registry/view/mail-1/components/mail-list": {
"content": "import { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle } from \"@/components/ui/drawer\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { formatDistanceToNow } from \"date-fns\"\nimport React, { ComponentProps } from \"react\"\nimport { Mail } from \"../data\"\nimport { useMail } from \"../use-mail\"\nimport { MailDisplay } from \"./mail-display\"\ninterface MailListProps {\n items: Mail[]\n}\n\nexport function MailList({ items }: MailListProps) {\n const [mail, setMail] = useMail()\n const [open, setOpen] = React.useState(false)\n const selectedItem = items.find((item) => item.id === mail.selected)\n\n return (\n \n \n \n \n \n \n Mark as unread \n Star thread \n Add label \n Mute thread \n \n \n
\n \n \n \n \n \n \n Archive \n \n \n \n \n \n \n \n Move to junk \n \n \n \n \n \n \n \n Move to trash \n \n \n \n \n \n \n \n \n \n \n \n \n \n Snooze \n \n \n
\n \n
\n Snooze until
\n \n \n Later today{\" \"}\n \n {format(addHours(today, 4), \"E, h:m b\")}\n \n \n \n Tomorrow\n \n {format(addDays(today, 1), \"E, h:m b\")}\n \n \n \n This weekend\n \n {format(nextSaturday(today), \"E, h:m b\")}\n \n \n \n Next week\n \n {format(addDays(today, 7), \"E, h:m b\")}\n \n \n
\n \n
\n \n \n \n \n \n \n Reply \n \n \n \n \n \n \n \n Reply all \n \n \n \n \n \n \n \n Forward \n \n \n
\n \n \n \n
\n ) : (\n \n
\n \n \n \n {mail.name\n .split(\" \")\n .map((chunk) => chunk[0])\n .join(\"\")}\n \n \n
\n {mail.date && (\n \n
\n {mail.name}
\n {mail.subject}
\n \n Reply-To: {mail.email}\n
\n \n {format(new Date(mail.date), \"PPpp\")}\n
\n )}\n \n {renderEmailContent(mail.text)}\n
\n \n \n
\n \n No message selected\n
\n )}\n \n {items.map((item) => (\n {\n setMail({\n ...mail,\n selected: item.id,\n })\n setOpen(true)\n }}\n >\n
\n \n
\n \n \n {formatDistanceToNow(new Date(item.date), {\n addSuffix: true,\n })}\n
\n \n
\n {item.name}
\n {!item.read && (\n \n )}\n {item.subject}
\n \n {item.text.substring(0, 300)}\n
\n {item.labels.length ? (\n \n {item.labels.map((label) => (\n \n {label}\n \n ))}\n
\n ) : null}\n \n ))}\n \n \n {selectedItem &&
\n \n
\n {isCollapsed && \n \n {isDark ? (\n <>\n
\n \n \n \n \n All mail\n \n \n Unread\n \n \n
\n \n \n
\n \r\n {/* Desktop Navigation */}\r\n \r\n\r\n {/* Mobile Navigation */}\r\n
\r\n \r\n
\r\n \r\n \r\n {logo.title}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {logo.title}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {menu.map((item) => renderMobileMenuItem(item))}\r\n \r\n
\r\n \r\n
\r\n \r\n {mobileExtraLinks.map((link, idx) => (\r\n \r\n {link.name}\r\n \r\n ))}\r\n
\r\n \r\n \r\n \r\n
\r\n - \r\n {item.items.map((subItem) => (\r\n
- \r\n
\r\n \r\n\r\n\r\n \r\n\r\n {subItem.title}\r\n\r\n {subItem.description && (\r\n\r\n {subItem.description}\r\n
\r\n )}\r\n \r\n ))}\r\n
\r\n
\r\n \r\n ))}\r\n {subItem.title}
\r\n {subItem.description && (\r\n \r\n {subItem.description}\r\n
\r\n )}\r\n\r\n \r\n {item.title}\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default Navbar\r\n",
"language": "tsx"
}
},
"constant": {
"@/registry/view/navbar-1/constant/index": {
"content": "import { Book, Sunset, Trees, Zap } from \"lucide-react\"\r\n\r\nexport interface MenuItem {\r\n title: string\r\n url: string\r\n description?: string\r\n icon?: React.ReactNode\r\n items?: MenuItem[]\r\n}\r\n\r\nexport const defaultLogo = {\r\n url: \"https://uniquebrand.com\",\r\n alt: \"UniqueBrand Logo\",\r\n title: \"UniqueBrand\",\r\n}\r\n\r\nexport const defaultMenu: MenuItem[] = [\r\n { title: \"Dashboard\", url: \"/\" },\r\n {\r\n title: \"Services\",\r\n url: \"#\",\r\n items: [\r\n {\r\n title: \"Web Development\",\r\n description: \"Responsive and modern websites\",\r\n icon: \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n NEW
\r\n\r\n
\r\n \r\n \r\n \r\n Halo — LED Ring Suspended Lamp\r\n
\r\n\r\n Discover more\r\n
\r\n\r\n \r\n
\r\n NEW
\r\n\r\n
\r\n \r\n \r\n \r\n Halo — LED Ring Suspended Lamp\r\n
\r\n\r\n Discover more\r\n
\r\n\r\n \r\n
\r\n \r\n NEW
\r\n\r\n
\r\n \r\n \r\n \r\n Line — Up/Down LED Suspended Lamp\r\n
\r\n\r\n Discover more\r\n
\r\n\r\n
\r\n \r\n
\r\n Ecommerce Orders
\r\n\r\n
\r\n \r\n
\r\n \r\n setSearchQuery(e.target.value)}\r\n className=\"pl-8 w-full sm:w-48 md:w-64 lg:w-80\"\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n No new notifications \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n My Profile \r\n Settings \r\n Logout \r\n \r\n \r\n
\r\n \r\n {statCards.map((card) => {\r\n const IconComponent = card.icon\r\n return (\r\n \r\n \r\n {card.title} \r\n {IconComponent ? (\r\n \r\n \r\n \r\n \r\n )\r\n })}\r\n
\r\n )\r\n}\r\n\r\ninterface OrderActionsProps {\r\n order: Order\r\n}\r\n\r\nfunction OrderActions({ order }: OrderActionsProps) {\r\n const handleViewOrder = useCallback(() => console.log(\"View order:\", order.id), [order.id])\r\n const handleEditOrder = useCallback(() => console.log(\"Edit order:\", order.id), [order.id])\r\n const handlePrintInvoice = useCallback(() => console.log(\"Print invoice:\", order.id), [order.id])\r\n const handleTrackShipment = useCallback(\r\n () => console.log(\"Track shipment:\", order.trackingNumber),\r\n [order.trackingNumber],\r\n )\r\n const handleCancelOrder = useCallback(() => console.log(\"Cancel order:\", order.id), [order.id])\r\n\r\n return (\r\n {card.value}
\r\n {card.description}
\r\n\r\n \r\n {customerInitials} \r\n \r\n
\r\n \r\n
\r\n \r\n {order.customerName}\r\n
\r\n \r\n {order.customerEmail}\r\n
\r\n \r\n
\r\n {formatPrice(order.productPrice)}
\r\n {formatPrice(order.productPrice * (1 - order.discountRate))}
\r\n \r\n ) : (\r\n {formatPrice(order.productPrice)}
\r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n )\r\n}\r\n",
"language": "tsx"
},
"@/registry/view/orders-page-1/components/sidebar": {
"content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { motion } from \"framer-motion\"\r\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\r\nimport Link from \"next/link\"\r\nimport { usePathname } from \"next/navigation\"\r\nimport { useState } from \"react\"\r\nimport { DASHBOARDS } from \"../constant/index\"\r\n\r\ninterface SidebarProps {\r\n className?: string\r\n}\r\n\r\nexport function Sidebar({ className }: SidebarProps) {\r\n const [isOpen, setIsOpen] = useState(false)\r\n const pathname = usePathname()\r\n\r\n const toggleSidebar = () => {\r\n setIsOpen(!isOpen)\r\n }\r\n\r\n const sidebarVariants = {\r\n open: {\r\n width: 280,\r\n opacity: 1,\r\n display: \"block\",\r\n transition: {\r\n duration: 0.4,\r\n ease: [0.25, 0.46, 0.45, 0.94],\r\n },\r\n },\r\n closed: {\r\n width: 0,\r\n opacity: 0,\r\n display: \"none\",\r\n transition: {\r\n duration: 0.4,\r\n ease: [0.25, 0.46, 0.45, 0.94],\r\n },\r\n },\r\n }\r\n\r\n const contentVariants = {\r\n open: {\r\n opacity: 1,\r\n x: 0,\r\n transition: {\r\n duration: 0.4,\r\n delay: 0.1,\r\n ease: [0.25, 0.46, 0.45, 0.94],\r\n },\r\n },\r\n closed: {\r\n opacity: 0,\r\n x: -20,\r\n transition: {\r\n duration: 0.3,\r\n },\r\n },\r\n }\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n Orders
\r\nManage, track, and process all customer orders efficiently.
\r\n\r\n setActiveFilter(value as OrderStatus | \"all\")}\r\n className=\"w-full mb-5\"\r\n >\r\n \r\n \r\n All Orders\r\n {orientation === \"vertical\" && (\r\n \r\n {orderCountsByStatus.all}\r\n \r\n )}\r\n \r\n \r\n {orientation === \"horizontal\" ? \"Awaiting\" : \"Awaiting Shipment\"}\r\n {orientation === \"vertical\" && (\r\n \r\n {orderCountsByStatus.awaiting_shipment}\r\n \r\n )}\r\n \r\n \r\n Processing\r\n {orientation === \"vertical\" && (\r\n \r\n {orderCountsByStatus.processing}\r\n \r\n )}\r\n \r\n \r\n Fulfilled\r\n {orientation === \"vertical\" && (\r\n \r\n {orderCountsByStatus.fulfilled}\r\n \r\n )}\r\n \r\n \r\n Cancelled\r\n {orientation === \"vertical\" && (\r\n \r\n {orderCountsByStatus.cancelled}\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Orders Overview \r\n \r\n Detailed list of all customer orders and their statuses.\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n A\r\n
\r\n \r\n
\r\n Admin Panel
\r\nEcommerce Dashboard
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n JD\r\n
\r\n \r\n
\r\n John Doe
\r\njohn@example.com
\r\n\r\n
\r\n )\r\n}",
"language": "tsx"
}
},
"orders-page-2": {
"components": {
"@/registry/view/orders-page-2/components/orders-header": {
"content": "import { SidebarTrigger } from \"@/components/ui/sidebar\"\r\nimport { Separator } from \"@/components/ui/separator\"\r\n\r\nexport function OrdersHeader() {\r\n return (\r\n \r\n
\r\n Orders
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Orders Management
\r\nView and manage all customer orders
\r\n\r\n
\r\n \r\n
\r\n \r\n setSearchTerm(e.target.value)}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n All Orders \r\n \r\n Showing {filteredOrders.length} of {orders.length} total orders\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n Orders
\r\n\r\n {user.name}\r\n \r\n {user.email}\r\n \r\n
\r\n \r\n \r\n CN \r\n \r\n
\r\n \r\n {user.name}\r\n \r\n {user.email}\r\n \r\n
\r\n \r\n \r\n \r\n Total Orders \r\n 2,543 \r\n \r\n \r\n \r\n \r\n \r\n \r\n Average Order Value \r\n \r\n {formatPrice(89.5)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Pending Orders \r\n 78 \r\n \r\n \r\n \r\n \r\n \r\n \r\n Conversion Rate \r\n 3.8% \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
},
"@/registry/view/orders-page-3/components/orders-chart": {
"content": "\"use client\"\r\n\r\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\"\r\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from \"@/components/ui/chart\"\r\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\"\r\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\"\r\nimport { useIsMobile } from \"@/hooks/use-mobile\"\r\nimport * as React from \"react\"\r\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\r\n\r\nconst chartData = [\r\n { date: \"2024-04-01\", completed: 42, pending: 15, shipped: 25, processing: 18, cancelled: 5 },\r\n { date: \"2024-04-02\", completed: 37, pending: 18, shipped: 22, processing: 15, cancelled: 3 },\r\n { date: \"2024-04-03\", completed: 45, pending: 12, shipped: 28, processing: 20, cancelled: 4 },\r\n { date: \"2024-04-04\", completed: 52, pending: 26, shipped: 30, processing: 22, cancelled: 6 },\r\n { date: \"2024-04-05\", completed: 63, pending: 29, shipped: 35, processing: 25, cancelled: 8 },\r\n { date: \"2024-04-06\", completed: 71, pending: 34, shipped: 40, processing: 30, cancelled: 7 },\r\n { date: \"2024-04-07\", completed: 55, pending: 18, shipped: 32, processing: 24, cancelled: 5 },\r\n { date: \"2024-04-08\", completed: 69, pending: 32, shipped: 38, processing: 28, cancelled: 9 },\r\n { date: \"2024-04-09\", completed: 39, pending: 11, shipped: 25, processing: 18, cancelled: 4 },\r\n { date: \"2024-04-10\", completed: 51, pending: 19, shipped: 30, processing: 22, cancelled: 6 },\r\n { date: \"2024-04-11\", completed: 67, pending: 35, shipped: 36, processing: 27, cancelled: 8 },\r\n { date: \"2024-04-12\", completed: 52, pending: 21, shipped: 31, processing: 23, cancelled: 5 },\r\n { date: \"2024-04-13\", completed: 72, pending: 38, shipped: 40, processing: 30, cancelled: 9 },\r\n { date: \"2024-04-14\", completed: 47, pending: 22, shipped: 28, processing: 21, cancelled: 6 },\r\n { date: \"2024-04-15\", completed: 40, pending: 17, shipped: 25, processing: 19, cancelled: 4 },\r\n { date: \"2024-04-16\", completed: 48, pending: 19, shipped: 29, processing: 22, cancelled: 5 },\r\n { date: \"2024-04-17\", completed: 76, pending: 36, shipped: 42, processing: 32, cancelled: 10 },\r\n { date: \"2024-04-18\", completed: 74, pending: 41, shipped: 40, processing: 30, cancelled: 9 },\r\n { date: \"2024-04-19\", completed: 53, pending: 18, shipped: 32, processing: 24, cancelled: 6 },\r\n { date: \"2024-04-20\", completed: 39, pending: 15, shipped: 24, processing: 18, cancelled: 4 },\r\n { date: \"2024-04-21\", completed: 47, pending: 20, shipped: 28, processing: 21, cancelled: 5 },\r\n { date: \"2024-04-22\", completed: 54, pending: 17, shipped: 32, processing: 24, cancelled: 6 },\r\n { date: \"2024-04-23\", completed: 48, pending: 23, shipped: 29, processing: 22, cancelled: 5 },\r\n { date: \"2024-04-24\", completed: 67, pending: 29, shipped: 38, processing: 28, cancelled: 8 },\r\n { date: \"2024-04-25\", completed: 55, pending: 25, shipped: 33, processing: 25, cancelled: 7 },\r\n { date: \"2024-04-26\", completed: 35, pending: 13, shipped: 22, processing: 16, cancelled: 4 },\r\n { date: \"2024-04-27\", completed: 83, pending: 42, shipped: 45, processing: 34, cancelled: 10 },\r\n { date: \"2024-04-28\", completed: 42, pending: 18, shipped: 26, processing: 19, cancelled: 5 },\r\n { date: \"2024-04-29\", completed: 65, pending: 24, shipped: 37, processing: 28, cancelled: 8 },\r\n { date: \"2024-04-30\", completed: 84, pending: 38, shipped: 46, processing: 35, cancelled: 11 },\r\n { date: \"2024-05-01\", completed: 55, pending: 22, shipped: 33, processing: 25, cancelled: 6 },\r\n { date: \"2024-05-02\", completed: 63, pending: 31, shipped: 36, processing: 27, cancelled: 8 },\r\n { date: \"2024-05-03\", completed: 57, pending: 19, shipped: 34, processing: 25, cancelled: 7 },\r\n { date: \"2024-05-04\", completed: 85, pending: 42, shipped: 47, processing: 35, cancelled: 10 },\r\n { date: \"2024-05-05\", completed: 91, pending: 39, shipped: 50, processing: 38, cancelled: 12 },\r\n { date: \"2024-05-06\", completed: 98, pending: 52, shipped: 54, processing: 40, cancelled: 13 },\r\n { date: \"2024-05-07\", completed: 78, pending: 30, shipped: 43, processing: 32, cancelled: 10 },\r\n { date: \"2024-05-08\", completed: 49, pending: 21, shipped: 30, processing: 22, cancelled: 6 },\r\n { date: \"2024-05-09\", completed: 57, pending: 18, shipped: 34, processing: 25, cancelled: 7 },\r\n { date: \"2024-05-10\", completed: 63, pending: 33, shipped: 36, processing: 27, cancelled: 8 },\r\n { date: \"2024-05-11\", completed: 75, pending: 27, shipped: 42, processing: 31, cancelled: 9 },\r\n { date: \"2024-05-12\", completed: 57, pending: 24, shipped: 34, processing: 25, cancelled: 7 },\r\n { date: \"2024-05-13\", completed: 57, pending: 16, shipped: 34, processing: 25, cancelled: 7 },\r\n { date: \"2024-05-14\", completed: 88, pending: 49, shipped: 48, processing: 36, cancelled: 11 },\r\n { date: \"2024-05-15\", completed: 93, pending: 38, shipped: 51, processing: 38, cancelled: 12 },\r\n { date: \"2024-05-16\", completed: 78, pending: 40, shipped: 43, processing: 32, cancelled: 10 },\r\n { date: \"2024-05-17\", completed: 99, pending: 42, shipped: 54, processing: 41, cancelled: 13 },\r\n { date: \"2024-05-18\", completed: 75, pending: 35, shipped: 42, processing: 31, cancelled: 9 },\r\n { date: \"2024-05-19\", completed: 55, pending: 18, shipped: 33, processing: 25, cancelled: 7 },\r\n { date: \"2024-05-20\", completed: 57, pending: 23, shipped: 34, processing: 25, cancelled: 7 },\r\n { date: \"2024-05-21\", completed: 32, pending: 14, shipped: 20, processing: 15, cancelled: 4 },\r\n { date: \"2024-05-22\", completed: 31, pending: 12, shipped: 19, processing: 14, cancelled: 4 },\r\n { date: \"2024-05-23\", completed: 62, pending: 29, shipped: 35, processing: 26, cancelled: 8 },\r\n { date: \"2024-05-24\", completed: 64, pending: 22, shipped: 36, processing: 27, cancelled: 8 },\r\n { date: \"2024-05-25\", completed: 61, pending: 25, shipped: 35, processing: 26, cancelled: 8 },\r\n { date: \"2024-05-26\", completed: 53, pending: 17, shipped: 32, processing: 24, cancelled: 7 },\r\n { date: \"2024-05-27\", completed: 90, pending: 46, shipped: 49, processing: 37, cancelled: 11 },\r\n { date: \"2024-05-28\", completed: 53, pending: 19, shipped: 32, processing: 24, cancelled: 7 },\r\n { date: \"2024-05-29\", completed: 38, pending: 13, shipped: 23, processing: 17, cancelled: 5 },\r\n { date: \"2024-05-30\", completed: 70, pending: 28, shipped: 39, processing: 29, cancelled: 9 },\r\n { date: \"2024-05-31\", completed: 58, pending: 23, shipped: 34, processing: 26, cancelled: 7 },\r\n { date: \"2024-06-01\", completed: 58, pending: 20, shipped: 34, processing: 26, cancelled: 7 },\r\n { date: \"2024-06-02\", completed: 90, pending: 41, shipped: 49, processing: 37, cancelled: 11 },\r\n { date: \"2024-06-03\", completed: 43, pending: 16, shipped: 26, processing: 20, cancelled: 5 },\r\n { date: \"2024-06-04\", completed: 89, pending: 38, shipped: 49, processing: 37, cancelled: 11 },\r\n { date: \"2024-06-05\", completed: 38, pending: 14, shipped: 23, processing: 17, cancelled: 5 },\r\n { date: \"2024-06-06\", completed: 64, pending: 25, shipped: 36, processing: 27, cancelled: 8 },\r\n { date: \"2024-06-07\", completed: 73, pending: 37, shipped: 40, processing: 30, cancelled: 9 },\r\n { date: \"2024-06-08\", completed: 85, pending: 32, shipped: 47, processing: 35, cancelled: 11 },\r\n { date: \"2024-06-09\", completed: 98, pending: 48, shipped: 54, processing: 40, cancelled: 12 },\r\n { date: \"2024-06-10\", completed: 55, pending: 20, shipped: 33, processing: 25, cancelled: 7 },\r\n { date: \"2024-06-11\", completed: 42, pending: 15, shipped: 26, processing: 19, cancelled: 5 },\r\n { date: \"2024-06-12\", completed: 92, pending: 42, shipped: 50, processing: 38, cancelled: 12 },\r\n { date: \"2024-06-13\", completed: 41, pending: 13, shipped: 25, processing: 19, cancelled: 5 },\r\n { date: \"2024-06-14\", completed: 86, pending: 38, shipped: 47, processing: 35, cancelled: 11 },\r\n { date: \"2024-06-15\", completed: 67, pending: 35, shipped: 38, processing: 28, cancelled: 8 },\r\n { date: \"2024-06-16\", completed: 71, pending: 31, shipped: 40, processing: 30, cancelled: 9 },\r\n { date: \"2024-06-17\", completed: 95, pending: 52, shipped: 52, processing: 39, cancelled: 12 },\r\n { date: \"2024-06-18\", completed: 47, pending: 17, shipped: 29, processing: 21, cancelled: 6 },\r\n { date: \"2024-06-19\", completed: 71, pending: 29, shipped: 40, processing: 30, cancelled: 9 },\r\n { date: \"2024-06-20\", completed: 88, pending: 45, shipped: 48, processing: 36, cancelled: 11 },\r\n { date: \"2024-06-21\", completed: 59, pending: 21, shipped: 35, processing: 26, cancelled: 7 },\r\n { date: \"2024-06-22\", completed: 67, pending: 27, shipped: 38, processing: 28, cancelled: 8 },\r\n { date: \"2024-06-23\", completed: 100, pending: 53, shipped: 55, processing: 41, cancelled: 13 },\r\n { date: \"2024-06-24\", completed: 52, pending: 18, shipped: 31, processing: 23, cancelled: 6 },\r\n { date: \"2024-06-25\", completed: 51, pending: 19, shipped: 31, processing: 23, cancelled: 6 },\r\n { date: \"2024-06-26\", completed: 84, pending: 38, shipped: 46, processing: 35, cancelled: 10 },\r\n { date: \"2024-06-27\", completed: 88, pending: 49, shipped: 48, processing: 36, cancelled: 11 },\r\n { date: \"2024-06-28\", completed: 49, pending: 20, shipped: 30, processing: 22, cancelled: 6 },\r\n { date: \"2024-06-29\", completed: 43, pending: 16, shipped: 26, processing: 20, cancelled: 5 },\r\n { date: \"2024-06-30\", completed: 86, pending: 40, shipped: 47, processing: 35, cancelled: 11 },\r\n]\r\n\r\nconst chartConfig = {\r\n orders: {\r\n label: \"Orders\",\r\n },\r\n completed: {\r\n label: \"Completed\",\r\n color: \"hsl(var(--chart-1))\",\r\n },\r\n shipped: {\r\n label: \"Shipped\",\r\n color: \"hsl(var(--chart-3))\",\r\n },\r\n processing: {\r\n label: \"Processing\",\r\n color: \"hsl(var(--chart-4))\",\r\n },\r\n pending: {\r\n label: \"Pending\",\r\n color: \"hsl(var(--chart-2))\",\r\n },\r\n cancelled: {\r\n label: \"Cancelled\",\r\n color: \"hsl(var(--chart-5))\",\r\n },\r\n} satisfies ChartConfig\r\n\r\nexport function OrdersChart() {\r\n const isMobile = useIsMobile()\r\n const [timeRange, setTimeRange] = React.useState(\"30d\")\r\n\r\n React.useEffect(() => {\r\n if (isMobile) {\r\n setTimeRange(\"7d\")\r\n }\r\n }, [isMobile])\r\n\r\n const filteredData = chartData.filter((item) => {\r\n const date = new Date(item.date)\r\n const referenceDate = new Date(\"2024-06-30\")\r\n let daysToSubtract = 90\r\n if (timeRange === \"30d\") {\r\n daysToSubtract = 30\r\n } else if (timeRange === \"7d\") {\r\n daysToSubtract = 7\r\n }\r\n const startDate = new Date(referenceDate)\r\n startDate.setDate(startDate.getDate() - daysToSubtract)\r\n return date >= startDate\r\n })\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n Increased from last month
\r\n 245 more orders than previous period
\r\n \r\n \r\n \r\n
\r\n \r\n Slight increase
\r\n {formatPrice(4.5)} higher than last month
\r\n \r\n \r\n \r\n
\r\n \r\n Improved processing time
\r\n Faster fulfillment than previous month
\r\n \r\n \r\n \r\n
\r\n \r\n Steady improvement
\r\n Cart abandonment rate decreased
\r\n \r\n \r\n \r\n Last 3 months\r\n \r\n \r\n Last 30 days\r\n \r\n \r\n Last 7 days\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n Total Orders \r\n \r\n \r\n \r\n \r\n \r\n \r\n Pending Orders \r\n \r\n \r\n \r\n \r\n \r\n \r\n Shipped Orders \r\n \r\n \r\n \r\n \r\n \r\n \r\n Revenue \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
},
"@/registry/view/orders-page-3/components/orders-table": {
"content": "\"use client\"\r\n\r\nimport { Badge } from \"@/components/ui/badge\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Checkbox } from \"@/components/ui/checkbox\"\r\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/custom-tabs\"\r\nimport {\r\n Dialog,\r\n DialogContent,\r\n DialogDescription,\r\n DialogFooter,\r\n DialogHeader,\r\n DialogTitle,\r\n} from \"@/components/ui/dialog\"\r\nimport {\r\n DropdownMenu,\r\n DropdownMenuCheckboxItem,\r\n DropdownMenuContent,\r\n DropdownMenuItem,\r\n DropdownMenuSeparator,\r\n DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\"\r\nimport { Separator } from \"@/components/ui/separator\"\r\nimport {\r\n Sheet,\r\n SheetClose,\r\n SheetContent,\r\n SheetDescription,\r\n SheetFooter,\r\n SheetHeader,\r\n SheetTitle,\r\n} from \"@/components/ui/sheet\"\r\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"@/components/ui/table\"\r\nimport {\r\n closestCenter,\r\n DndContext,\r\n type DragEndEvent,\r\n KeyboardSensor,\r\n MouseSensor,\r\n TouchSensor,\r\n type UniqueIdentifier,\r\n useSensor,\r\n useSensors,\r\n} from \"@dnd-kit/core\"\r\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\r\nimport { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from \"@dnd-kit/sortable\"\r\nimport { CSS } from \"@dnd-kit/utilities\"\r\nimport {\r\n type ColumnDef,\r\n type ColumnFiltersState,\r\n flexRender,\r\n getCoreRowModel,\r\n getFacetedRowModel,\r\n getFacetedUniqueValues,\r\n getFilteredRowModel,\r\n getPaginationRowModel,\r\n getSortedRowModel,\r\n type Row,\r\n type SortingState,\r\n useReactTable,\r\n type VisibilityState,\r\n} from \"@tanstack/react-table\"\r\nimport {\r\n CheckCircle2Icon,\r\n ChevronDownIcon,\r\n ChevronLeftIcon,\r\n ChevronRightIcon,\r\n ChevronsLeftIcon,\r\n ChevronsRightIcon,\r\n ClockIcon,\r\n ColumnsIcon,\r\n CreditCardIcon,\r\n FilterIcon,\r\n GripVerticalIcon,\r\n HomeIcon,\r\n MailIcon,\r\n MapPinIcon,\r\n MoreVerticalIcon,\r\n PackageIcon,\r\n PhoneIcon,\r\n PlusIcon,\r\n SearchIcon,\r\n TruckIcon,\r\n UserIcon,\r\n XCircleIcon,\r\n} from \"lucide-react\"\r\nimport * as React from \"react\"\r\nimport { toast } from \"sonner\"\r\nimport { z } from \"zod\"\r\nimport { formatPrice } from \"../../orders-page-2/lib/utils\"\r\n\r\nexport const orderItemSchema = z.object({\r\n id: z.number(),\r\n name: z.string(),\r\n price: z.number(),\r\n quantity: z.number(),\r\n total: z.number(),\r\n})\r\n\r\nexport const orderAddressSchema = z.object({\r\n street: z.string(),\r\n city: z.string(),\r\n state: z.string(),\r\n zipCode: z.string(),\r\n country: z.string(),\r\n})\r\n\r\nexport const orderCustomerSchema = z.object({\r\n name: z.string(),\r\n email: z.string(),\r\n phone: z.string().optional(),\r\n})\r\n\r\nexport const orderSchema = z.object({\r\n id: z.number(),\r\n orderNumber: z.string(),\r\n customer: z.string(),\r\n customerDetails: orderCustomerSchema.optional(),\r\n date: z.string(),\r\n status: z.string(),\r\n total: z.number(),\r\n items: z.number(),\r\n orderItems: z.array(orderItemSchema).optional(),\r\n paymentMethod: z.string(),\r\n shippingAddress: orderAddressSchema.optional(),\r\n billingAddress: orderAddressSchema.optional(),\r\n notes: z.string().optional(),\r\n})\r\n\r\nfunction DragHandle({ id }: { id: number }) {\r\n const { attributes, listeners } = useSortable({\r\n id,\r\n })\r\n\r\n return (\r\n 1,284
\r\n \r\n
\r\n 145
\r\n \r\n
\r\n 842
\r\n \r\n
\r\n $48,294
\r\n \r\n
\r\n \r\n
\r\n\r\n {order.shippingAddress && (\r\n \r\n \r\n {getStatusIcon(order.status)}\r\n {order.status}\r\n \r\n
\r\n Status
\r\n \r\n
\r\n Order Date
\r\n {new Date(order.date).toLocaleDateString()}
\r\n \r\n
\r\n Payment Method
\r\n \r\n
\r\n \r\n
\r\n Total Amount
\r\n {formatPrice(order.total)}
\r\n \r\n \r\n
\r\n
\r\n )}\r\n\r\n {order.notes && (\r\n \r\n
\r\n \r\n
\r\n {order.shippingAddress.street}
\r\n\r\n {order.shippingAddress.city}, {order.shippingAddress.state} {order.shippingAddress.zipCode}\r\n
\r\n{order.shippingAddress.country}
\r\n\r\n
\r\n )}\r\n Order Notes
\r\n{order.notes}
\r\n\r\n \r\n
\r\n
\r\n ) : (\r\n \r\n
\r\n )}\r\n\r\n No items available
\r\n\r\n
\r\n \r\n Subtotal:\r\n {formatPrice(order.total * 0.9)}\r\n
\r\n \r\n Tax:\r\n {formatPrice(order.total * 0.1)}\r\n
\r\n \r\n Total:\r\n {formatPrice(order.total)}\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {order.customerDetails.name}
\r\nCustomer
\r\n\r\n
\r\n\r\n {order.billingAddress && (\r\n \r\n
\r\n {order.customerDetails.phone && (\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n {order.billingAddress.street}
\r\n\r\n {order.billingAddress.city}, {order.billingAddress.state} {order.billingAddress.zipCode}\r\n
\r\n{order.billingAddress.country}
\r\n\r\n
\r\n )}\r\n No customer details available
\r\n\r\n table.toggleAllPageRowsSelected(!!value)}\r\n aria-label=\"Select all\"\r\n />\r\n
\r\n ),\r\n cell: ({ row }) => (\r\n \r\n row.toggleSelected(!!value)}\r\n aria-label=\"Select row\"\r\n />\r\n
\r\n ),\r\n enableSorting: false,\r\n enableHiding: false,\r\n },\r\n {\r\n accessorKey: \"orderNumber\",\r\n header: \"Order #\",\r\n cell: ({ row }) => {\r\n return (\r\n {row.original.customer}
,\r\n },\r\n {\r\n accessorKey: \"date\",\r\n header: \"Date\",\r\n cell: ({ row }) => {\r\n const date = new Date(row.original.date)\r\n return (\r\n \r\n {date.toLocaleDateString(\"en-US\", {\r\n month: \"short\",\r\n day: \"numeric\",\r\n year: \"numeric\",\r\n })}\r\n
\r\n )\r\n },\r\n },\r\n {\r\n accessorKey: \"status\",\r\n header: \"Status\",\r\n cell: ({ row }) => (\r\n Total
,\r\n cell: ({ row }) => {formatPrice(row.original.total)}
,\r\n },\r\n {\r\n accessorKey: \"items\",\r\n header: () => Items
,\r\n cell: ({ row }) => {row.original.items}
,\r\n },\r\n {\r\n accessorKey: \"paymentMethod\",\r\n header: \"Payment\",\r\n cell: ({ row }) => {row.original.paymentMethod}
,\r\n },\r\n {\r\n id: \"actions\",\r\n cell: ({ row }) => (\r\n \r\n
\r\n \r\n
\r\n \r\n setSearchQuery(e.target.value)}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {table\r\n .getAllColumns()\r\n .filter((column) => typeof column.accessorFn !== \"undefined\" && column.getCanHide())\r\n .map((column) => {\r\n return (\r\n column.toggleVisibility(!!value)}\r\n >\r\n {column.id}\r\n \r\n )\r\n })}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Status
\r\n \r\n\r\n
\r\n Date
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} order(s)\r\n selected.\r\n
\r\n \r\n
\r\n \r\n {\r\n table.setPageSize(Number(value))\r\n }}\r\n >\r\n \r\n \r\n \r\n {[10, 20, 30, 40, 50].map((pageSize) => (\r\n \r\n {pageSize}\r\n \r\n ))}\r\n \r\n \r\n per page\r\n
\r\n \r\n Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}\r\n
\r\n \r\n table.setPageIndex(0)}\r\n disabled={!table.getCanPreviousPage()}\r\n >\r\n Go to first page\r\n table.previousPage()}\r\n disabled={!table.getCanPreviousPage()}\r\n >\r\n Go to previous page\r\n table.nextPage()}\r\n disabled={!table.getCanNextPage()}\r\n >\r\n Go to next page\r\n table.setPageIndex(table.getPageCount() - 1)}\r\n disabled={!table.getCanNextPage()}\r\n >\r\n Go to last page\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n {name}
\r\n {isVerified && (\r\n{bio}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n Rating
\r\n\r\n
\r\n {earned}
\r\nEarned
\r\n\r\n
\r\n {rate}
\r\nRate
\r\n\r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"personal-card-2": {
"components": {
"@/registry/view/personal-card-2/components/personal-card": {
"content": "\"use client\"\r\n\r\nimport { Card } from \"@/components/ui/card\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { BadgeCheck, Check, UserPlus, Users } from \"lucide-react\"\r\nimport Image from \"next/image\"\r\n\r\nexport default function PersonalCard() {\r\n return (\r\n \r\n
\r\n )\r\n}",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/personal-card-2/page": {
"content": "import PersonalCard from \"./components/personal-card\"\r\n\r\nexport default function Page() {\r\n return \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Sophie Bennett\r\n
\r\n\r\n
\r\n \r\n A Product Designer focused on intuitive user experiences.\r\n
\r\n\r\n \r\n Follow +\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \n \n \n \n \n The maximum number of tokens to generate. Requests can use up to 2,048\n or 4,000 tokens, shared between prompt and completion. The exact limit\n varies by model.\n \n \n
\n )\n}\n",
"language": "tsx"
},
"@/registry/view/playground-1/components/model-selector": {
"content": "\"use client\"\n\nimport { useMutationObserver } from \"@/hooks/use-mutation-observer\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/components/ui/command\"\nimport {\n HoverCard,\n HoverCardContent,\n HoverCardTrigger,\n} from \"@/components/ui/hover-card\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { PopoverProps } from \"@radix-ui/react-popover\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Model, ModelType } from \"../data/models\"\n\ninterface ModelSelectorProps extends PopoverProps {\n types: readonly ModelType[]\n models: Model[]\n}\n\nexport function ModelSelector({ models, types, ...props }: ModelSelectorProps) {\n const [open, setOpen] = React.useState(false)\n const [selectedModel, setSelectedModel] = React.useState\n
\n \n \n \n {value}\n \n
\n \n \n \n \n \n \n The model which will generate the completion. Some models are suitable\n for natural language tasks, others specialize in code. Learn more.\n \n \n \n \n \n {selectedModel ? selectedModel.name : \"Select a model...\"}\n \n \n \n \n \n \n No Models found. \n \n {models\n .filter((model) => model.type === type)\n .map((model) => (\n setPeekedModel(model)}\n onSelect={() => {\n setSelectedModel(model)\n setOpen(false)\n }}\n />\n ))}\n \n ))}\n \n \n \n \n \n
\n )\n}\n\ninterface ModelItemProps {\n model: Model\n isSelected: boolean\n onSelect: () => void\n onPeek: (model: Model) => void\n}\n\nfunction ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {\n const ref = React.useRef\n
\n \n {peekedModel.name}
\n\n {peekedModel.description}\n
\n {peekedModel.strengths ? (\n \n
\n ) : null}\n \n Strengths\n
\n- \n {peekedModel.strengths}\n
\n
\n Share preset
\n\n Anyone who has this link and an OpenAI account will be able to view\n this.\n
\n\n \n \n Copy\n
\n \n \n \n \n \n Controls randomness: lowering results in less random completions. As\n the temperature approaches zero, the model will become deterministic\n and repetitive.\n \n \n
\n )\n}\n",
"language": "tsx"
},
"@/registry/view/playground-1/components/top-p-selector": {
"content": "\"use client\"\n\nimport {\n HoverCard,\n HoverCardContent,\n HoverCardTrigger,\n} from \"@/components/ui/hover-card\"\nimport { Label } from \"@/components/ui/label\"\nimport { Slider } from \"@/components/ui/slider\"\nimport { SliderProps } from \"@radix-ui/react-slider\"\nimport * as React from \"react\"\n\ninterface TopPSelectorProps {\n defaultValue: SliderProps[\"defaultValue\"]\n}\n\nexport function TopPSelector({ defaultValue }: TopPSelectorProps) {\n const [value, setValue] = React.useState(defaultValue)\n\n return (\n \n
\n \n \n \n {value}\n \n
\n \n \n \n \n \n Control diversity via nucleus sampling: 0.5 means half of all\n likelihood-weighted options are considered.\n \n \n
\n )\n}\n",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/playground-1/page": {
"content": "import { Button } from \"@/components/ui/button\"\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from \"@/components/ui/hover-card\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { RotateCcw } from \"lucide-react\"\nimport Image from \"next/image\"\nimport { CodeViewer } from \"./components/code-viewer\"\nimport { MaxLengthSelector } from \"./components/maxlength-selector\"\nimport { ModelSelector } from \"./components/model-selector\"\nimport { PresetActions } from \"./components/preset-actions\"\nimport { PresetSave } from \"./components/preset-save\"\nimport { PresetSelector } from \"./components/preset-selector\"\nimport { PresetShare } from \"./components/preset-share\"\nimport { TemperatureSelector } from \"./components/temperature-selector\"\nimport { TopPSelector } from \"./components/top-p-selector\"\nimport { models, types } from \"./data/models\"\nimport { presets } from \"./data/presets\"\n\nexport default function PlaygroundPage() {\n return (\n <>\n \n
\n \n \n \n {value}\n \n
\n \n
\n \n \n \n
\n \n )\n}\n",
"language": "tsx"
}
},
"pricing-1": {
"components": {
"@/registry/view/pricing-1/components/pricing-section": {
"content": "import { Check, HelpCircle, ChevronRight } from \"lucide-react\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\"\r\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ui/accordion\"\r\n\r\n\r\nexport default function PricingSection() {\r\n return (\r\n \n
\n Playground
\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n \n Mode\n \n \n \n Choose the interface that best suits your task. You can provide: a simple prompt to complete,\n starting and ending text to insert a completion within, or some text with instructions to edit\n it.\n \n \n \n \n Complete\n \n \n \n Insert\n \n \n \n Edit\n \n \n \n
\n \n
\n \n \n \n \n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n Output will appear here
\n\n \n \n
\n \n
\n \n
\n \n \n
\n \n \n
\n \n
\n Output will appear here
\n\n \n \n
\n \r\n
\r\n )\r\n}\r\n\r\nfunction FeatureItem({ feature, tooltip }: { feature: string; tooltip?: string }) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n Choose the right plan for you\r\n
\r\n\r\n Select a plan that fits your needs. All plans include a 14-day free trial.\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n Free
\r\n\r\n For personal use only with limited features and support\r\n
\r\n\r\n $0\r\n
\r\n Includes 1 user.
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n Popular\r\n
\r\n \r\n
\r\n Pro
\r\n\r\n For small businesses with all the features and support\r\n
\r\n\r\n $29\r\n per user, per month\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Premium
\r\n\r\n For teams and organizations with advanced features and support\r\n
\r\n\r\n $59\r\n per user, per month\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Enterprise
\r\n\r\n For large companies with custom features and support and a dedicated account manager\r\n
\r\n\r\n Custom pricing\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Features
\r\n- \r\n
\r\n
\r\n Everything in Free, and:
\r\n- \r\n
\r\n
\r\n Everything in Pro, and:
\r\n- \r\n
\r\n
\r\n Everything in Premium, and:
\r\n- \r\n
\r\n
\r\n Frequently asked questions
\r\n\r\n \r\n \r\n How does the 14-day trial work? \r\n \r\n You can try any plan for 14 days with full access to all features. No credit card required. At the\r\n end of your trial, you can choose to subscribe or downgrade to the free plan.\r\n \r\n \r\n \r\n Can I change plans later? \r\n \r\n Yes, you can upgrade, downgrade, or cancel your plan at any time. Changes to your subscription will\r\n take effect immediately.\r\n \r\n \r\n \r\n What payment methods do you accept? \r\n \r\n We accept all major credit cards, PayPal, and Apple Pay. For Enterprise plans, we also offer\r\n invoicing.\r\n \r\n \r\n \r\n Is there a discount for annual billing? \r\n \r\n Yes, you can save 20% by choosing annual billing on any paid plan. The discount will be applied\r\n automatically at checkout.\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Still have questions?
\r\n\r\n Our team is here to help you find the perfect plan for your needs.\r\n
\r\n\r\n \r\n
\r\n {tooltip}
\r\n\r\n
\r\n )\r\n}",
"language": "tsx"
}
},
"pricing-2": {
"components": {
"@/registry/view/pricing-2/components/billing-toggle": {
"content": "\"use client\"\r\n\r\nimport { Label } from \"@/components/ui/label\"\r\nimport { Switch } from \"@/components/ui/switch\"\r\n\r\ninterface BillingToggleProps {\r\n billingCycle: \"monthly\" | \"yearly\"\r\n setBillingCycle: (value: \"monthly\" | \"yearly\") => void\r\n}\r\n\r\nexport function BillingToggle({ billingCycle, setBillingCycle }: BillingToggleProps) {\r\n return (\r\n \r\n \r\n Monthly\r\n \r\n setBillingCycle(checked ? \"yearly\" : \"monthly\")}\r\n className=\"data-[state=checked]:bg-primary\"\r\n />\r\n \r\n Yearly\r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
},
"@/registry/view/pricing-2/components/pricing-section": {
"content": "\"use client\"\r\n\r\nimport { useState } from \"react\"\r\nimport { Check, HelpCircle } from \"lucide-react\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from \"@/components/ui/card\"\r\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\"\r\nimport { BillingToggle } from \"./billing-toggle\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst plans = [\r\n {\r\n name: \"Free\",\r\n description: \"For individuals just getting started\",\r\n monthlyPrice: 0,\r\n yearlyPrice: 0,\r\n features: [\r\n \"1 user\",\r\n \"5 projects\",\r\n \"Up to 1GB storage\",\r\n \"Basic support\",\r\n { name: \"Limited API access\", tooltip: \"Up to 100 requests per day\" },\r\n { name: \"Community access\", tooltip: \"Access to our community forums\" },\r\n ],\r\n cta: \"Get Started\",\r\n popular: false,\r\n },\r\n {\r\n name: \"Pro\",\r\n description: \"For professionals and small teams\",\r\n monthlyPrice: 15,\r\n yearlyPrice: 144,\r\n features: [\r\n \"Up to 5 users\",\r\n \"20 projects\",\r\n \"Up to 10GB storage\",\r\n \"Priority support\",\r\n { name: \"Advanced API access\", tooltip: \"Up to 10,000 requests per day\" },\r\n { name: \"Team collaboration\", tooltip: \"Real-time collaboration features\" },\r\n \"Custom domains\",\r\n ],\r\n cta: \"Subscribe\",\r\n popular: true,\r\n },\r\n {\r\n name: \"Premium\",\r\n description: \"For growing teams with advanced needs\",\r\n monthlyPrice: 30,\r\n yearlyPrice: 288,\r\n features: [\r\n \"Up to 10 users\",\r\n \"Unlimited projects\",\r\n \"Up to 100GB storage\",\r\n \"24/7 phone support\",\r\n { name: \"Enterprise API access\", tooltip: \"Unlimited API requests\" },\r\n { name: \"Advanced analytics\", tooltip: \"Detailed usage and performance metrics\" },\r\n \"Custom domains\",\r\n \"SSO authentication\",\r\n ],\r\n cta: \"Subscribe\",\r\n popular: false,\r\n },\r\n {\r\n name: \"Enterprise\",\r\n description: \"For large organizations with custom requirements\",\r\n monthlyPrice: null,\r\n yearlyPrice: null,\r\n features: [\r\n \"Unlimited users\",\r\n \"Unlimited projects\",\r\n \"Unlimited storage\",\r\n \"Dedicated support team\",\r\n { name: \"Custom API solutions\", tooltip: \"Tailored API solutions for your needs\" },\r\n { name: \"Advanced security\", tooltip: \"Enhanced security features and compliance\" },\r\n \"Custom domains\",\r\n \"SSO authentication\",\r\n \"Dedicated infrastructure\",\r\n \"Custom integrations\",\r\n ],\r\n cta: \"Contact Sales\",\r\n popular: false,\r\n },\r\n]\r\n\r\nexport default function PricingSection() {\r\n const [billingCycle, setBillingCycle] = useState<\"monthly\" | \"yearly\">(\"monthly\")\r\n\r\n const yearlyDiscount = 20 \r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Simple, transparent pricing
\r\n\r\n Choose the perfect plan for your needs. Always know what you'll pay.\r\n
\r\n\r\n
\r\n {billingCycle === \"yearly\" && (\r\n \r\n Save {yearlyDiscount}% with yearly billing\r\n
\r\n )}\r\n \r\n {plans.map((plan) => {\r\n const price = billingCycle === \"monthly\" ? plan.monthlyPrice : plan.yearlyPrice\r\n const priceDisplay = price === null ? \"Custom pricing\" : `$${price}`\r\n const interval = billingCycle === \"monthly\" ? \"/month\" : \"/year\"\r\n return (\r\n \r\n {plan.popular && (\r\n \r\n {plan.name} \r\n {plan.description} \r\n \r\n \r\n \r\n \r\n \r\n {plan.cta}\r\n \r\n \r\n \r\n )\r\n })}\r\n
\r\n \r\n Popular\r\n
\r\n )}\r\n \r\n {priceDisplay}\r\n {price !== null && {interval}}\r\n
\r\n - \r\n {plan.features.map((feature, index) => (\r\n
- \r\n
\r\n \r\n {typeof feature === \"string\" ? (\r\n feature\r\n ) : (\r\n \r\n \r\n )}\r\n \r\n\r\n \r\n\r\n {feature.name}\r\n \r\n\r\n \r\n \r\n{feature.tooltip}
\r\n \r\n ))}\r\n
\r\n
\r\n All plans include a 14-day free trial. No credit card required.
\r\n\r\n
\r\n )\r\n}",
"language": "tsx"
}
},
"pricing-3": {
"components": {
"@/registry/view/pricing-3/components/billing-toggle": {
"content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\ninterface BillingToggleProps {\r\n billingCycle: \"monthly\" | \"annual\"\r\n setBillingCycle: (value: \"monthly\" | \"annual\") => void\r\n discount: number\r\n}\r\n\r\nexport function BillingToggle({ billingCycle, setBillingCycle, discount }: BillingToggleProps) {\r\n return (\r\n \r\n setBillingCycle(\"monthly\")}\r\n className={cn(\r\n \"rounded-full px-4 py-2 text-sm font-medium transition-colors\",\r\n billingCycle === \"monthly\"\r\n ? \"bg-white dark:bg-gray-950 text-gray-950 dark:text-white shadow-sm\"\r\n : \"bg-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white\",\r\n )}\r\n >\r\n Monthly\r\n \r\n setBillingCycle(\"annual\")}\r\n className={cn(\r\n \"rounded-full px-4 py-2 text-sm font-medium transition-colors\",\r\n billingCycle === \"annual\"\r\n ? \"bg-purple-600 dark:bg-purple-500 text-white shadow-sm\"\r\n : \"bg-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white\",\r\n )}\r\n >\r\n Annual (Save {discount}%)\r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
},
"@/registry/view/pricing-3/components/pricing-section": {
"content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from \"@/components/ui/card\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Check } from 'lucide-react'\r\nimport { useState } from \"react\"\r\nimport { BillingToggle } from \"./billing-toggle\"\r\n\r\nconst plans = [\r\n {\r\n name: \"Creator\",\r\n description: \"Unlock powerful AI tools to create your content, wherever you work online.\",\r\n monthlyPrice: 19,\r\n annualPrice: 9.5,\r\n features: [\r\n \"01 User Access\",\r\n \"Access to Fixoria AI Chatbot\",\r\n \"Access to SEO Mode\",\r\n \"AI Image Generation and editing Tool\",\r\n \"03 Brand Voice Access\",\r\n \"Use AI with Browser Extension\",\r\n ],\r\n cta: \"Current Plan\",\r\n ctaVariant: \"outline\" as const,\r\n popular: false,\r\n trial: \"Start Free 7-Days Trial\",\r\n },\r\n {\r\n name: \"Pro Plan\",\r\n description: \"Leverage advanced AI to create content for multiple brands on campaigns.\",\r\n monthlyPrice: 99,\r\n annualPrice: 49.5,\r\n features: [\r\n \"05 User Access\",\r\n \"10 Knowledge Assets\",\r\n \"Access to Pro SEO Mode\",\r\n \"Collaboration with our Management\",\r\n \"10 Brand Voice Access\",\r\n \"01 Page Custom change Access\",\r\n ],\r\n cta: \"Switch to this Plan\",\r\n ctaVariant: \"default\" as const,\r\n popular: true,\r\n trial: \"Start Free 7-Days Trial\",\r\n billingNote: \"Per user, per month & billed annually\",\r\n },\r\n {\r\n name: \"Business Plan\",\r\n description: \"Personalized AI with enhanced control, security, team training, and tech support.\",\r\n monthlyPrice: 199,\r\n annualPrice: 99.5,\r\n features: [\r\n \"Unlimited Feature Usage\",\r\n \"Performance Analytics & Insights\",\r\n \"Custom Style Guides with New View\",\r\n \"Advanced Admin Panel Access\",\r\n \"Group Document Collaboration\",\r\n \"Hight Security Platform\",\r\n ],\r\n cta: \"Contact Sales\",\r\n ctaVariant: \"default\" as const,\r\n popular: false,\r\n trial: \"Start Free 15-Days Trial\",\r\n customPricing: true,\r\n },\r\n]\r\n\r\nexport default function PricingSection() {\r\n const [billingCycle, setBillingCycle] = useState<\"monthly\" | \"annual\">(\"monthly\")\r\n const discount = 50\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Upgrade Plan
\r\nFixoria pricing plan are designed to meet your needs as you grow
\r\n\r\n
\r\n \r\n {plans.map((plan) => {\r\n const price = billingCycle === \"monthly\" ? plan.monthlyPrice : plan.annualPrice\r\n return (\r\n \r\n {plan.popular && (\r\n \r\n {plan.name} \r\n {plan.description} \r\n \r\n \r\n \r\n {plan.cta}\r\n \r\n \r\n \r\n \r\n \r\n )\r\n })}\r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n {plan.customPricing ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n Start from\r\n ${price}\r\n
\r\n Custom Pricing, Custom Billing
\r\n \r\n
\r\n )}\r\n \r\n ${price}\r\n
\r\n {plan.billingNote || `Per user & per month`}
\r\n {plan.trial}
\r\n Features
\r\n\r\n {plan.name === \"Creator\"\r\n ? \"Everything in our free plan includes\"\r\n : plan.name === \"Pro Plan\"\r\n ? \"Everything in Creator & Plus\"\r\n : \"Everything in Creator, Plus & Business\"}\r\n
\r\n- \r\n {plan.features.map((feature, index) => (\r\n
- \r\n \r\n\r\n {feature}\r\n
\r\n \r\n ))}\r\n
\r\n
\r\n )\r\n}",
"language": "tsx"
}
},
"pricing-4": {
"components": {
"@/registry/view/pricing-4/components/billing-toggle": {
"content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\ninterface BillingToggleProps {\r\n billingCycle: \"monthly\" | \"annual\"\r\n setBillingCycle: (value: \"monthly\" | \"annual\") => void\r\n discount: number\r\n}\r\n\r\nexport function BillingToggle({ billingCycle, setBillingCycle, discount }: BillingToggleProps) {\r\n return (\r\n \r\n setBillingCycle(\"monthly\")}\r\n className={cn(\r\n \"rounded-full px-4 py-2 text-sm font-medium transition-colors\",\r\n billingCycle === \"monthly\"\r\n ? \"bg-white dark:bg-zinc-900 text-gray-900 dark:text-white shadow-sm\"\r\n : \"bg-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white\",\r\n )}\r\n >\r\n Monthly\r\n \r\n setBillingCycle(\"annual\")}\r\n className={cn(\r\n \"rounded-full px-4 py-2 text-sm font-medium transition-colors\",\r\n billingCycle === \"annual\"\r\n ? \"bg-slate-900 dark:bg-gray-950 text-white shadow-sm\"\r\n : \"bg-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white\",\r\n )}\r\n >\r\n Annual (Save {discount}%)\r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
},
"@/registry/view/pricing-4/components/pricing-section": {
"content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Check } from \"lucide-react\"\r\nimport type React from \"react\"\r\nimport { useState } from \"react\"\r\nimport { BillingToggle } from \"./billing-toggle\"\r\n\r\nexport default function PricingSection() {\r\n const [billingCycle, setBillingCycle] = useState<\"monthly\" | \"annual\">(\"monthly\")\r\n const discount = 20\r\n\r\n const plans = {\r\n essential: {\r\n monthly: {\r\n price: \"$14.99\",\r\n suffix: \"/month\",\r\n },\r\n annual: {\r\n price: \"$149.90\",\r\n suffix: \"/year\",\r\n },\r\n },\r\n creator: {\r\n monthly: {\r\n price: \"$29.99\",\r\n suffix: \"/month\",\r\n },\r\n annual: {\r\n price: \"$299.90\",\r\n suffix: \"/year\",\r\n },\r\n },\r\n business: {\r\n monthly: {\r\n price: \"$59.99\",\r\n suffix: \"/month\",\r\n },\r\n annual: {\r\n price: \"$599.90\",\r\n suffix: \"/year\",\r\n },\r\n },\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n Get Started\r\n \r\n
\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nfunction Feature({ children }: { children: React.ReactNode }) {\r\n return (\r\n \r\n \r\n Pricing that scales with\r\n
\r\n your business\r\n \r\n\r\n \r\n Get Started\r\n \r\n
\r\n \r\n your business\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n Get Started\r\n \r\n
\r\n \r\n
\r\n Essentials Plan
\r\n\r\n \r\n {plans.essential[billingCycle].price}\r\n \r\n {plans.essential[billingCycle].suffix}\r\n
\r\n Perfect for solopreneurs and content creators
\r\n\r\n
\r\n \r\n FEATURES\r\n
\r\n- \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Creator Plan
\r\n\r\n \r\n {plans.creator[billingCycle].price}\r\n \r\n {plans.creator[billingCycle].suffix}\r\n
\r\n Ideal for growing creators
\r\n\r\n
\r\n \r\n FEATURES\r\n
\r\n- \r\n
\r\n
\r\n Business Plan
\r\n\r\n \r\n {plans.business[billingCycle].price}\r\n \r\n {plans.business[billingCycle].suffix}\r\n
\r\n Built for growing businesses, and agencies
\r\n\r\n
\r\n \r\n FEATURES\r\n
\r\n- \r\n
\r\n
\r\n {children}\r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"product-overview-1": {
"components": {
"@/registry/view/product-overview-1/components/discounted-price": {
"content": "import React from \"react\"\r\n\r\nimport { formatPrice } from \"../lib/utils\"\r\n\r\ninterface DiscountPriceProps {\r\n price: number\r\n discount: number\r\n quantity?: number\r\n}\r\nconst DiscountPrice: React.FC\r\n
\r\n )\r\n}\r\n\r\nexport default DiscountPrice\r\n",
"language": "tsx"
},
"@/registry/view/product-overview-1/components/normal-price": {
"content": "import React from \"react\"\r\n\r\nimport { formatPrice } from \"../lib/utils\"\r\n\r\ntype ProductPrices = {\r\n price: number\r\n quantity?: number\r\n}\r\n\r\nconst NormalPrice: React.FC{formattedPrice}
\r\n\r\n
\r\n )\r\n}\r\n\r\nexport default NormalPrice\r\n",
"language": "tsx"
},
"@/registry/view/product-overview-1/components/product-color-temp-button": {
"content": "\"use client\"\r\n\r\nimport React, { useEffect, useState } from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\n\r\nexport type ProductColorTemp = \"warm\" | \"cool\" | \"white\"\r\n\r\nexport interface ColorTemperatureOption {\r\n value: ProductColorTemp\r\n label: string\r\n icon?: React.ReactNode\r\n}\r\n\r\nconst DEFAULT_OPTIONS: ColorTemperatureOption[] = [\r\n { value: \"warm\", label: \"Warm\" },\r\n { value: \"cool\", label: \"Cool\" },\r\n { value: \"white\", label: \"White\" },\r\n]\r\n\r\ninterface ColorTemperatureSelectorProps {\r\n value: ProductColorTemp\r\n onValueChange: (newValue: ProductColorTemp) => void\r\n options?: ColorTemperatureOption[]\r\n title?: string\r\n disabled?: boolean\r\n className?: string\r\n buttonClassName?: string\r\n}\r\n\r\nexport function ColorTemperatureSelector({\r\n value,\r\n onValueChange,\r\n options = DEFAULT_OPTIONS,\r\n title = \"Color Temperature\",\r\n disabled = false,\r\n className,\r\n buttonClassName,\r\n}: ColorTemperatureSelectorProps) {\r\n const [selectedValue, setSelectedValue] = useState{formattedTotalPrice}
\r\n\r\n {title &&
\r\n )\r\n}\r\n",
"language": "tsx"
},
"@/registry/view/product-overview-1/components/product-image-carousel": {
"content": "\"use client\"\r\n\r\nimport React from \"react\"\r\nimport Image from \"next/image\"\r\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\r\nimport { Carousel } from \"react-responsive-carousel\"\r\n\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"\r\n\r\ntype ProductImagesProps = {\r\n productImages: string[]\r\n}\r\n\r\nconst ProductImages: React.FC{title}
}\r\n\r\n {options.map((option) => (\r\n handleSelectionChange(option.value)}\r\n variant={selectedValue === option.value ? \"default\" : \"outline\"}\r\n disabled={disabled}\r\n className={cn(\r\n \"flex items-center justify-center p-0 m-0 rounded-full transition-all duration-200\",\r\n selectedValue === option.value\r\n ? \"bg-primary text-primary-foreground shadow-lg\"\r\n : \"bg-background hover:bg-secondary\",\r\n disabled && \"opacity-50 cursor-not-allowed\",\r\n buttonClassName\r\n )}\r\n >\r\n {option.label}\r\n \r\n ))}\r\n
\r\n \r\n \r\n productImages.map((img, index) => (\r\n \r\n \r\n \r\n
\r\n ))}\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default ProductImages\r\n",
"language": "tsx"
},
"@/registry/view/product-overview-1/components/product-info": {
"content": "\"use client\"\r\n\r\nimport { useEffect, useState } from \"react\"\r\nimport { ArrowRight, Minus, Plus, ShoppingCart } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\n\r\nimport DiscountPrice from \"./discounted-price\"\r\nimport NormalPrice from \"./normal-price\"\r\nimport {\r\n ColorTemperatureSelector,\r\n ProductColorTemp,\r\n} from \"./product-color-temp-button\"\r\nimport { ProductIP, ProductIPSelector } from \"./product-ip-buttons\"\r\n\r\ninterface ProductConfigurationPanelProps {\r\n productName: string\r\n productCode?: string\r\n description: string\r\n displayPrice: number\r\n discountPercentage?: number\r\n quantity: number\r\n onIncreaseQuantity: () => void\r\n onDecreaseQuantity: () => void\r\n canDecreaseQuantity: boolean\r\n showIpSelector: boolean\r\n selectedIp: ProductIP\r\n onIpChange: (newIp: ProductIP) => void\r\n isIpSelectorDisabled?: boolean\r\n showColorTempSelector?: boolean\r\n selectedColorTemp: ProductColorTemp\r\n onColorTempChange: (newColorTemp: ProductColorTemp) => void\r\n isColorTempSelectorDisabled?: boolean\r\n showLampSelector: boolean\r\n isLampSelectorDisabled?: boolean\r\n basePriceForLamp?: number\r\n hNumberForLamp?: number\r\n onAddToCart: () => void\r\n isAddToCartLoading: boolean\r\n addToCartLabel?: string\r\n onOrderNow: () => void\r\n isOrderNowLoading: boolean\r\n orderNowLabel?: string\r\n stockStatus: \"inStock\" | \"outOfStock\" | \"checkAvailability\"\r\n stockStatusText?: string\r\n availabilityCheckCta?: string\r\n}\r\n\r\nexport function ProductConfigurationPanel({\r\n productName,\r\n productCode = \"PRODUCT-CODE\",\r\n description,\r\n displayPrice,\r\n discountPercentage,\r\n quantity,\r\n onIncreaseQuantity,\r\n onDecreaseQuantity,\r\n canDecreaseQuantity,\r\n showIpSelector,\r\n selectedIp,\r\n onIpChange,\r\n isIpSelectorDisabled,\r\n showColorTempSelector = true,\r\n selectedColorTemp,\r\n onColorTempChange,\r\n isColorTempSelectorDisabled,\r\n onAddToCart,\r\n isAddToCartLoading,\r\n addToCartLabel = \"Add to Cart\",\r\n onOrderNow,\r\n isOrderNowLoading,\r\n orderNowLabel = \"Order Now\",\r\n stockStatus,\r\n stockStatusText = \"In Stock\",\r\n availabilityCheckCta = \"Check Stores Availability\",\r\n}: ProductConfigurationPanelProps) {\r\n // State to track IP-related price changes\r\n const [currentPrice, setCurrentPrice] = useState(displayPrice)\r\n const [additionalIpCost, setAdditionalIpCost] = useState(0)\r\n\r\n // Update price when displayPrice or additionalIpCost changes\r\n useEffect(() => {\r\n setCurrentPrice(displayPrice + additionalIpCost)\r\n }, [displayPrice, additionalIpCost])\r\n\r\n // Handle IP change with price updates\r\n const handleIpChange = (newIp: ProductIP, newAdditionalPrice?: number) => {\r\n onIpChange(newIp)\r\n if (newAdditionalPrice !== undefined) {\r\n setAdditionalIpCost(newAdditionalPrice)\r\n }\r\n }\r\n\r\n return (\r\n \r\n
\r\n ))\r\n }\r\n renderArrowPrev={(onClickHandler, hasPrev, label) =>\r\n hasPrev && (\r\n \r\n
\r\n \r\n {productCode}\r\n
\r\n\r\n {description}\r\n
\r\n\r\n \r\n {showColorTempSelector && (\r\n
\r\n \r\n {discountPercentage && discountPercentage > 0 ? (\r\n <>\r\n \r\n \r\n \r\n \r\n {discountPercentage * 100}% OFF\r\n \r\n \r\n ) : (\r\n \r\n
\r\n \r\n \r\n {availabilityCheckCta}\r\n \r\n {stockStatusText}\r\n \r\n
\r\n \r\n
\r\n \r\n )\r\n}\r\n",
"language": "tsx"
},
"@/registry/view/product-overview-1/components/product-ip-buttons": {
"content": "\"use client\"\r\n\r\nimport { useEffect, useState } from \"react\"\r\nimport { Droplets } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n Tooltip,\r\n TooltipContent,\r\n TooltipProvider,\r\n TooltipTrigger,\r\n} from \"@/components/ui/tooltip\"\r\n\r\nexport type ProductIP = \"IP20\" | \"IP44\" | \"IP54\" | \"IP65\" | \"IP68\"\r\n\r\nconst PRODUCT_IP_OPTIONS_MAP: Record<\r\n ProductIP,\r\n { label: string; description: string; increaseOnPricePercent: number }\r\n> = {\r\n IP20: {\r\n label: \"IP 20\",\r\n description: \"Protected against solid objects over 12mm\",\r\n increaseOnPricePercent: 0,\r\n },\r\n IP44: {\r\n label: \"IP 44\",\r\n description: \"Protected against water splashes from all directions\",\r\n increaseOnPricePercent: 0.04,\r\n },\r\n IP54: {\r\n label: \"IP 54\",\r\n description: \"Protected against dust and water splashes\",\r\n increaseOnPricePercent: 0.06,\r\n },\r\n IP65: {\r\n label: \"IP 65\",\r\n description: \"Dust tight and protected against water jets\",\r\n increaseOnPricePercent: 0.08,\r\n },\r\n IP68: {\r\n label: \"IP 68\",\r\n description: \"Dust tight and protected against long periods of immersion\",\r\n increaseOnPricePercent: 0.1,\r\n },\r\n}\r\n\r\ninterface ProductIPSelectorProps {\r\n value: ProductIP\r\n onValueChange: (newValue: ProductIP, newPrice?: number) => void\r\n title?: string\r\n basePrice: number\r\n disabled?: boolean\r\n}\r\n\r\nexport function ProductIPSelector({\r\n value,\r\n onValueChange,\r\n title = \"Water Resistance (IP Rating)\",\r\n disabled = false,\r\n basePrice,\r\n}: ProductIPSelectorProps) {\r\n const [selectedIp, setSelectedIp] = useState\r\n \r\n {isAddToCartLoading ? \"Adding...\" : addToCartLabel}\r\n {!isAddToCartLoading && (\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {isOrderNowLoading ? \"Processing...\" : orderNowLabel}\r\n \r\n
\r\n \r\n {title &&
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {
"@/registry/view/product-overview-1/lib/utils.ts": {
"content": "// this for formatting the price in the product overview page for your country currency\r\nexport const formatPrice = (price: number) => {\r\n const formatter = new Intl.NumberFormat(\"en-US\", {\r\n style: \"currency\",\r\n currency: \"EGP\",\r\n useGrouping: false,\r\n })\r\n return formatter.format(price)\r\n}\r\n",
"language": "typescript"
}
},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/product-overview-1/page": {
"content": "\"use client\"\r\n\r\nimport { useState } from \"react\"\r\nimport { ProductColorTemp } from \"@/components/product-color-temp-button\"\r\nimport ProductImages from \"@/components/product-image-carousel\"\r\nimport { ProductConfigurationPanel } from \"@/components/product-info\"\r\nimport { ProductIP } from \"@/components/product-ip-buttons\"\r\n\r\nimport Container from \"@/components/Container\"\r\n\r\ninterface ProductOverviewProps {\r\n productName: string\r\n productCode?: string\r\n description: string\r\n price: number\r\n originalPrice?: number\r\n discountPercentage?: number\r\n images: string[]\r\n initialIp?: ProductIP\r\n initialColorTemp?: ProductColorTemp\r\n stockStatus?: \"inStock\" | \"outOfStock\" | \"checkAvailability\"\r\n stockStatusText?: string\r\n specifications?: { [key: string]: string }\r\n}\r\n\r\nexport default function ProductOverviewPage({\r\n productName = \"Product Name\",\r\n productCode = \"PRODUCT-CODE\",\r\n description = \"Product description goes here. This is a sample product overview page.\",\r\n price = 99.99,\r\n discountPercentage = 0.1,\r\n images = [\r\n \"/components/product-card-1.png\",\r\n \"/components/product-card-1.png\",\r\n \"/components/product-card-1.png\",\r\n ],\r\n initialIp = \"IP44\",\r\n initialColorTemp = \"warm\",\r\n stockStatus = \"inStock\",\r\n stockStatusText = \"In Stock\",\r\n specifications,\r\n}: ProductOverviewProps) {\r\n const [quantity, setQuantity] = useState{title}
}\r\n\r\n {Object.entries(PRODUCT_IP_OPTIONS_MAP).map(\r\n ([ip, { label, description }]) => (\r\n \r\n \r\n \r\n handleIpChange(ip as ProductIP)}\r\n variant={selectedIp === ip ? \"default\" : \"outline\"}\r\n disabled={disabled}\r\n className={cn(\r\n \"flex items-center justify-center w-full rounded-full\",\r\n \"transition-colors duration-150 ease-in-out\",\r\n selectedIp === ip\r\n ? \"bg-primary text-primary-foreground\"\r\n : \"bg-background hover:bg-secondary text-secondary-foreground\",\r\n disabled && \"opacity-50 cursor-not-allowed\"\r\n )}\r\n >\r\n \r\n \r\n {description}\r\n \r\n \r\n \r\n )\r\n )}\r\n
\r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"products-carousel-1": {
"components": {
"@/registry/view/products-carousel-1/components/product-card": {
"content": "\"use client\"\r\n\r\nimport React, { useState } from \"react\"\r\nimport Image from \"next/image\"\r\nimport Link from \"next/link\"\r\nimport { Truck } from \"lucide-react\"\r\nimport { Carousel } from \"react-responsive-carousel\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Badge } from \"@/components/ui/badge\"\r\n\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"\r\n\r\nimport DiscountPrice from \"../../product-overview-1/components/discounted-price\"\r\nimport NormalPrice from \"../../product-overview-1/components/normal-price\"\r\n\r\ninterface Product {\r\n productId: string\r\n productName: string\r\n brand?: string\r\n price: number\r\n productImages: string[]\r\n productDiscount: number\r\n detailsUrl?: string\r\n productDescription?: string\r\n}\r\n\r\ninterface ProductCardProps {\r\n product: Product\r\n showBadge?: boolean\r\n showShipping?: boolean\r\n onAddToCart?: (productId: string) => void\r\n className?: string\r\n cardWidth?: string\r\n isSignedIn?: boolean\r\n onAuthRequired?: () => void\r\n}\r\n\r\nconst ProductCard: React.FC\r\n
\r\n \r\n
\r\n \r\n 1}\r\n showIpSelector={true}\r\n selectedIp={selectedIp}\r\n onIpChange={handleIpChange}\r\n isIpSelectorDisabled={false}\r\n showColorTempSelector={true}\r\n selectedColorTemp={selectedColorTemp}\r\n onColorTempChange={(newTemp) => setSelectedColorTemp(newTemp)}\r\n isColorTempSelectorDisabled={false}\r\n showLampSelector={false}\r\n onAddToCart={handleAddToCart}\r\n isAddToCartLoading={isAddingToCart}\r\n onOrderNow={handleOrderNow}\r\n isOrderNowLoading={isOrdering}\r\n stockStatus={stockStatus}\r\n stockStatusText={stockStatusText}\r\n />\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default ProductCard\r\n",
"language": "tsx"
},
"@/registry/view/products-carousel-1/components/product-carousel": {
"content": "import {\r\n Carousel,\r\n CarouselContent,\r\n CarouselItem,\r\n CarouselNext,\r\n CarouselPrevious,\r\n} from \"@/components/ui/carousel\"\r\n\r\nimport { products } from \"../constant\"\r\nimport ProductCard from \"./product-card\"\r\n\r\nconst ProductCarousel = () => {\r\n return (\r\n \r\n
\r\n \r\n \r\n {Math.round(product.productDiscount * 100)}% OFF\r\n \r\n
\r\n \r\n
\r\n \r\n {product.productImages.length > 0 && (\r\n \r\n hasPrev && (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n ))}\r\n \r\n )}\r\n \r\n
\r\n \r\n {product.productName}\r\n
\r\n\r\n {product.productDescription}\r\n
\r\n\r\n {product.productDiscount > 0 ? (\r\n
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n ) : (\r\n \r\n \r\n \r\n More Details\r\n \r\n\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default page\r\n",
"language": "tsx"
}
},
"products-list-1": {
"components": {
"@/registry/view/products-list-1/components/product-list": {
"content": "import Image from \"next/image\"\r\nimport Link from \"next/link\"\r\nimport { products } from \"@/registry/view/products-list-1/constant\"\r\nimport { MoveLeft, MoveRight } from \"lucide-react\"\r\n\r\nimport Container from \"@/components/Container\"\r\n\r\nimport { Sidebar } from \"./sidebar\"\r\n\r\nexport default function ProductsList() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n Our Product
\r\n\r\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam ut\r\n sequi vitae beatae? Commodi, omnis. Incidunt dolore.\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n {products.map((product) => (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ))}\r\n \r\n {product.name}\r\n
\r\n\r\n ${product.price}\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport function Sidebar() {\r\n const [isOpenSidebar, setIsOpenSidebar] = useState(true)\r\n const toggleSidebar = useCallback(() => {\r\n setIsOpenSidebar((prevState) => !prevState)\r\n }, [])\r\n\r\n const sidebarVariants = {\r\n open: {\r\n width: 280,\r\n opacity: 1,\r\n transition: { duration: 0.3 },\r\n },\r\n closed: {\r\n width: 0,\r\n opacity: 0,\r\n transition: { duration: 0.3 },\r\n },\r\n }\r\n\r\n return (\r\n <>\r\n {!isOpenSidebar && (\r\n \r\n {title}\r\n
\r\n{children}
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {
"@/registry/view/products-list-1/constant/index": {
"content": "interface Product {\r\n id: string\r\n name: string\r\n price: number\r\n image: string\r\n}\r\n\r\nexport const products: Product[] = [\r\n {\r\n id: \"1\",\r\n name: \"Radiant Glow Lamp\",\r\n price: 30,\r\n image: \"/blocks/products-list-1/image-1.jpg\",\r\n },\r\n {\r\n id: \"2\",\r\n name: \"Breeze Recliner\",\r\n price: 59,\r\n image: \"/blocks/products-list-1/image-2.jpg\",\r\n },\r\n {\r\n id: \"3\",\r\n name: \"Vista Armchair\",\r\n price: 40,\r\n image: \"/blocks/products-list-1/image-3.jpg\",\r\n },\r\n {\r\n id: \"4\",\r\n name: \"Eden Comfort Seat\",\r\n price: 60,\r\n image: \"/blocks/products-list-1/image-4.jpg\",\r\n },\r\n {\r\n id: \"5\",\r\n name: \"Crestwood Chair\",\r\n price: 59,\r\n image: \"/blocks/products-list-1/image-5.jpg\",\r\n },\r\n {\r\n id: \"6\",\r\n name: \"Dining Chair With Arms\",\r\n price: 45,\r\n image: \"/blocks/products-list-1/image-6.jpg\",\r\n },\r\n {\r\n id: \"7\",\r\n name: \"Floor Lamp\",\r\n price: 50,\r\n image: \"/blocks/products-list-1/image-7.jpg\",\r\n },\r\n {\r\n id: \"8\",\r\n name: \"Luxe Lounger\",\r\n price: 48,\r\n image: \"/blocks/products-list-1/image-8.jpg\",\r\n },\r\n {\r\n id: \"9\",\r\n name: \"Outdoor Armchair\",\r\n price: 47,\r\n image: \"/blocks/products-list-1/image-9.jpg\",\r\n },\r\n]\r\n",
"language": "tsx"
}
},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/products-list-1/page": {
"content": "import Container from \"@/components/Container\"\r\n\r\nimport ProductsList from \"./components/product-list\"\r\n\r\nconst page = () => {\r\n return (\r\n UniqueBrand
\r\n {isOpenSidebar && (\r\n\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default page\r\n",
"language": "tsx"
}
},
"service-1": {
"components": {
"@/registry/view/service-1/components/service": {
"content": "\"use client\"\r\n\r\nimport { useEffect, useRef, useState } from \"react\"\r\nimport Link from \"next/link\"\r\nimport gsap from \"gsap\"\r\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\"\r\nimport { MoveRight } from \"lucide-react\"\r\n\r\nimport Container from \"@/components/Container\"\r\n\r\nimport { services } from \"../constant\"\r\n\r\ngsap.registerPlugin(ScrollTrigger)\r\nexport default function Services() {\r\n const [activeService, setActiveService] = useState\r\n
\r\n \r\n \r\n What Services\r\n
\r\n
\r\n \r\n What Services\r\n
\r\n We're Offering\r\n
\r\n \r\n
\r\n \r\n We empower businesses to thrive online. Our services enhance\r\n online visibility, expand market reach, and boost revenue through\r\n effective digital strategies.\r\n
\r\n\r\n {services.map((service, index) => (\r\n setActiveService(index)}\r\n >\r\n
\r\n ))}\r\n \r\n \r\n \r\n \r\n {service.title}\r\n \r\n \r\n {service.description}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Sign Up \r\n Create an account to get started \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/signup-1/page": {
"content": "import { SignUpForm } from \"./components/signup-form\"\r\n\r\nexport default function SignUpPage() {\r\n return (\r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"signup-2": {
"components": {
"@/registry/view/signup-2/components/signup-1": {
"content": "\"use client\"\r\n\r\nimport type React from \"react\"\r\nimport { useState } from \"react\"\r\nimport Link from \"next/link\"\r\nimport { ArrowLeft, Eye, EyeOff } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Card, CardContent } from \"@/components/ui/card\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Label } from \"@/components/ui/label\"\r\n\r\nexport function SignUpForm({\r\n className,\r\n ...props\r\n}: React.ComponentProps<\"div\">) {\r\n const [showPassword, setShowPassword] = useState(false)\r\n const [showConfirmPassword, setShowConfirmPassword] = useState(false)\r\n\r\n const togglePasswordVisibility = () => setShowPassword((prev) => !prev)\r\n const toggleConfirmPasswordVisibility = () =>\r\n setShowConfirmPassword((prev) => !prev)\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/signup-2/page": {
"content": "import Container from \"@/components/Container\"\r\n\r\nimport { SignUpForm } from \"./components/signup-1\"\r\n\r\nconst page = () => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n Create Your Alpha Account\r\n
\r\n\r\n Sign up today and start exploring our curated collection of\r\n web developments and software solutions\r\n
\r\n\r\n By clicking sign up, you agree to our{\" \"}\r\n Terms of Service and{\" \"}\r\n Privacy Policy.\r\n
\r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default page\r\n",
"language": "tsx"
}
},
"signup-3": {
"components": {
"@/registry/view/signup-3/components/signup-form": {
"content": "\"use client\"\r\n\r\nimport type React from \"react\"\r\nimport { useState } from \"react\"\r\nimport Link from \"next/link\"\r\nimport { Eye, EyeOff } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Label } from \"@/components/ui/label\"\r\n\r\nexport function SignupForm({\r\n className,\r\n ...props\r\n}: React.ComponentPropsWithoutRef<\"form\">) {\r\n const [showPassword, setShowPassword] = useState(false)\r\n const [showConfirmPassword, setShowConfirmPassword] = useState(false)\r\n\r\n const togglePasswordVisibility = () => setShowPassword((prev) => !prev)\r\n const toggleConfirmPasswordVisibility = () =>\r\n setShowConfirmPassword((prev) => !prev)\r\n\r\n return (\r\n \r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/signup-3/page": {
"content": "import Link from \"next/link\"\r\nimport { GalleryVerticalEnd } from \"lucide-react\"\r\n\r\nimport { SignupForm } from \"./components/signup-form\"\r\n\r\nexport default function SignupPage() {\r\n return (\r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"signup-4": {
"components": {
"@/registry/view/signup-4/components/signup-form": {
"content": "\"use client\"\r\n\r\nimport type React from \"react\"\r\nimport { useState } from \"react\"\r\nimport { Eye, EyeOff, GalleryVerticalEnd } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Label } from \"@/components/ui/label\"\r\n\r\nexport function SignupForm({\r\n className,\r\n ...props\r\n}: React.ComponentPropsWithoutRef<\"div\">) {\r\n const [showPassword, setShowPassword] = useState(false)\r\n const [showConfirmPassword, setShowConfirmPassword] = useState(false)\r\n\r\n const togglePasswordVisibility = () => setShowPassword((prev) => !prev)\r\n const toggleConfirmPasswordVisibility = () =>\r\n setShowConfirmPassword((prev) => !prev)\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n UniqueBrand.\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/signup-4/page": {
"content": "import { SignupForm } from \"./components/signup-form\"\r\n\r\nexport default function SignUpPage() {\r\n return (\r\n \r\n By clicking continue, you agree to our Terms of Service{\" \"}\r\n and Privacy Policy.\r\n
\r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"status-bar-1": {
"components": {
"@/registry/view/status-bar-1/components/status-bar": {
"content": "\"use client\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { motion } from \"framer-motion\";\r\nimport { CheckCircle, Circle } from \"lucide-react\";\r\nimport { usePathname } from \"next/navigation\";\r\nimport React from \"react\";\r\n\r\nexport default function StatusBar() {\r\n const pathname = usePathname();\r\n\r\n const STEPS = [\r\n {\r\n name: \"Preview\",\r\n description: \"Review your product before confirming your order.\",\r\n url: `/preview`, // Here you put the link (URL) to be active when the user is on the page\r\n },\r\n {\r\n name: \"Confirm\",\r\n description: \"Enter your shipping address and information.\",\r\n url: \"/view/status-bar-1\",\r\n },\r\n {\r\n name: \"Complete\",\r\n description: \"Review your order, shipping price, and all information.\",\r\n url: \"/complete\",\r\n },\r\n ];\r\n\r\n const getCurrentStepIndex = () => {\r\n return STEPS.findIndex((step) => pathname.includes(step.url));\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n}",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/status-bar-1/page": {
"content": "import StatusBar from \"./components/status-bar\";\r\n\r\nexport default function page() {\r\n return (\r\n \r\n {STEPS.map((step, i) => {\r\n const currentStepIndex = getCurrentStepIndex();\r\n const isCurrent = i === currentStepIndex;\r\n const isCompleted = i < currentStepIndex;\r\n return (\r\n \r\n \r\n \r\n {isCompleted ? (\r\n
\r\n \r\n \r\n {step.name}\r\n \r\n \r\n {step.description}\r\n \r\n
\r\n \r\n {i === 0 && (\r\n \r\n )}\r\n \r\n );\r\n })}\r\n \r\n
\r\n )\r\n}",
"language": "tsx"
}
},
"status-section-1": {
"components": {
"@/registry/view/status-section-1/components/status-section": {
"content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { AlertTriangle, CheckCircle, ChevronDown, ChevronUp, Info, XCircle } from \"lucide-react\"\r\nimport { useState } from \"react\"\r\n\r\ninterface Service {\r\n id: string\r\n name: string\r\n status: \"operational\" | \"incident\" | \"outage\" | \"unknown\"\r\n description: string\r\n details: string\r\n hasDetails?: boolean\r\n}\r\n\r\ninterface StatusSectionProps {\r\n title?: string\r\n services?: Service[]\r\n showIncidentHistory?: boolean\r\n onIncidentClick?: () => void\r\n className?: string\r\n}\r\n\r\nconst StatusSection = ({\r\n title = \"Status\",\r\n services = [],\r\n showIncidentHistory = true,\r\n onIncidentClick = () => { },\r\n className = \"\",\r\n}: StatusSectionProps) => {\r\n const [expandedServices, setExpandedServices] = useState\r\n
\r\n )\r\n}\r\n\r\nexport default StatusSection\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/status-section-1/page": {
"content": "import { useState } from \"react\";\r\nimport StatusSection from \"./components/status-section\";\r\n\r\nconst page = () => {\r\n const [customServices] = useState([\r\n {\r\n id: 'api-gateway',\r\n name: 'API Gateway',\r\n status: 'operational',\r\n description: 'Core API routing and management',\r\n details: 'All API endpoints are responding within normal parameters'\r\n },\r\n {\r\n id: 'database',\r\n name: 'Database Cluster',\r\n status: 'incident',\r\n description: 'Primary database infrastructure',\r\n details: 'Experiencing elevated response times. Engineering team investigating.',\r\n hasDetails: true\r\n },\r\n {\r\n id: 'cdn',\r\n name: 'Content Delivery Network',\r\n status: 'operational',\r\n description: 'Global content distribution network',\r\n details: 'CDN nodes are performing optimally across all regions'\r\n }\r\n ]);\r\n\r\n const handleIncidentClick = () => {\r\n console.log('Navigating to incident history...');\r\n };\r\n\r\n return (\r\n \r\n
\r\n\r\n {/* Incident Banner */}\r\n \r\n \r\n Incident history →\r\n \r\n )}\r\n
\r\n \r\n
\r\n {showIncidentHistory && (\r\n \r\n \r\n
\r\n {title}
\r\n\r\n
\r\n\r\n {/* Status Legend */}\r\n \r\n
\r\n \r\n
\r\n \r\n Users may be experiencing issues connecting to Alpha\r\n
\r\n\r\n Today · 9:21 AM EDT ·\r\n \r\n
\r\n\r\n
\r\n\r\n {/* Services List */}\r\n \r\n Current Status by service\r\n
\r\n \r\n
\r\n \r\n \r\n No issues\r\n
\r\n \r\n \r\n Incident\r\n
\r\n \r\n \r\n Outage\r\n
\r\n \r\n {activeServices.map((service) => (\r\n
\r\n\r\n {/* Footer */}\r\n \r\n
\r\n ))}\r\n \r\n
\r\n {expandedServices.has(service.id) && service.hasDetails && (\r\n \r\n \r\n
\r\n {getStatusIcon(service.status)}\r\n \r\n
\r\n \r\n toggleService(service.id)}\r\n className=\"text-muted-foreground hover:text-foreground transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background rounded-sm p-0.5\"\r\n aria-expanded={expandedServices.has(service.id)}\r\n aria-controls={`service-details-${service.id}`}\r\n aria-label={`${expandedServices.has(service.id) ? \"Collapse\" : \"Expand\"} ${service.name} details`}\r\n >\r\n {expandedServices.has(service.id) ? (\r\n
\r\n {service.name}
\r\n {service.hasDetails && (\r\n{getStatusText(service.status)}
\r\n\r\n
\r\n )}\r\n \r\n
\r\n {service.details}
\r\n {service.status === \"incident\" && (\r\n\r\n
\r\n )}\r\n \r\n Last updated: 2 minutes ago\r\n •\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Last updated: {new Date().toLocaleString()}
\r\n\r\n \r\n •\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default page;",
"language": "tsx"
}
},
"subscription-email-1": {
"components": {
"@/registry/view/subscription-email-1/components/subscription-email": {
"content": "\"use client\"\r\n\r\nimport type React from \"react\"\r\n\r\nimport { useState } from \"react\"\r\nimport { Mail, ArrowRight, Check } from \"lucide-react\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Button } from \"@/components/ui/button\"\r\n\r\ninterface SubscriptionEmailProps {\r\n className?: string\r\n headline?: string\r\n subheadline?: string\r\n buttonText?: string\r\n successMessage?: string\r\n}\r\n\r\nexport default function SubscriptionEmail({\r\n className,\r\n headline = \"Exclusive Early Access\",\r\n subheadline = \"Be the first to shop our limited collections and receive personalized style recommendations\",\r\n buttonText = \"Subscribe\",\r\n successMessage = \"You're on the list\",\r\n}: SubscriptionEmailProps) {\r\n const [email, setEmail] = useState(\"\")\r\n const [isSubmitting, setIsSubmitting] = useState(false)\r\n const [isSubmitted, setIsSubmitted] = useState(false)\r\n const [isValid, setIsValid] = useState(true)\r\n\r\n const handleSubmit = async (e: React.FormEvent) => {\r\n e.preventDefault()\r\n\r\n // Basic email validation\r\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\r\n if (!emailRegex.test(email)) {\r\n setIsValid(false)\r\n return\r\n }\r\n\r\n setIsSubmitting(true)\r\n\r\n // Simulate API call\r\n await new Promise((resolve) => setTimeout(resolve, 1000))\r\n\r\n setIsSubmitting(false)\r\n setIsSubmitted(true)\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n {/* Abstract background element */}\r\n \r\n\r\n
\r\n \r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/subscription-email-1/page": {
"content": "import SubscriptionEmail from \"./components/subscription-email\"\r\n\r\nexport default function page() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {headline}\r\n
\r\n{subheadline}
\r\n {!isSubmitted ? (\r\n \r\n ) : (\r\n\r\n
\r\n )}\r\n \r\n By subscribing, you agree to our Privacy Policy and consent to receive updates from our company.\r\n
\r\n \r\n
\r\n )\r\n}\r\n",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/subscription-email-2/page": {
"content": "import SubscriptionEmail from \"./components/subscription-email\"\r\n\r\nexport default function page() {\r\n return (\r\n \r\n \r\n Exclusive offers.\r\n
\r\n
\r\n {isSubmitted ? (\r\n \r\n Exclusive offers.\r\n
\r\n Limited time.\r\n
\r\n Get early access to our Black Friday deals.
\r\n\r\n
\r\n ) : (\r\n \r\n )}\r\n Thanks for subscribing!
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n )\r\n}",
"language": "tsx"
}
},
"constant": {},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/subscription-email-3/page": {
"content": "import SubscriptionEmail from \"./components/subscription-email\"\r\n\r\nexport default function Page() {\r\n return (\r\n \r\n {!isSubmitted ? (\r\n <>\r\n
\r\n \r\n \r\n
\r\n \r\n Stay Updated\r\n
\r\n\r\n Get notified when we launch new features and updates.\r\n
\r\n\r\n We respect your privacy. Unsubscribe at any time.\r\n
\r\n \r\n ) : (\r\n\r\n
\r\n \r\n
\r\n \r\n You're all set!\r\n
\r\n\r\n Thanks for subscribing. We'll keep you updated with our latest news.\r\n
\r\n \r\n )}\r\n\r\n
\r\n {row.getValue(\"id\")}
,\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"title\",\n header: ({ column }) => (\n \n {label && {label.label} }\n \n {row.getValue(\"title\")}\n \n
\n )\n },\n },\n {\n accessorKey: \"status\",\n header: ({ column }) => (\n \n {status.icon && (\n
\n )\n },\n filterFn: (row, id, value) => {\n return value.includes(row.getValue(id))\n },\n },\n {\n accessorKey: \"priority\",\n header: ({ column }) => (\n \n {priority.icon && (\n
\n )\n },\n filterFn: (row, id, value) => {\n return value.includes(row.getValue(id))\n },\n },\n {\n id: \"actions\",\n cell: ({ row }) => {title}
\n }\n\n return (\n \n \n \n \n {title}\n {column.getIsSorted() === \"desc\" ? (\n \n \n column.toggleSorting(false)}>\n \n column.toggleSorting(true)}>\n \n column.toggleVisibility(false)}>\n \n \n \n
\n )\n}\n",
"language": "tsx"
},
"@/registry/view/tasks-1/components/data-table-faceted-filter": {
"content": "import * as React from \"react\"\nimport { Column } from \"@tanstack/react-table\"\nimport { Check, PlusCircle } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n} from \"@/components/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { Separator } from \"@/components/ui/separator\"\n\ninterface DataTableFacetedFilterProps\n
\n )\n}\n",
"language": "tsx"
},
"@/registry/view/tasks-1/components/data-table-row-actions": {
"content": "\"use client\"\n\nimport { Row } from \"@tanstack/react-table\"\nimport { MoreHorizontal } from \"lucide-react\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nimport { labels } from \"../data/data\"\nimport { taskSchema } from \"../data/schema\"\n\ninterface DataTableRowActionsProps\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n \n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n {[10, 20, 25, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n
\n Rows per page
\n\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n \n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n
\n \n
\n )\n}\n",
"language": "tsx"
},
"@/registry/view/tasks-1/components/data-table-view-options": {
"content": "\"use client\"\n\nimport { DropdownMenuTrigger } from \"@radix-ui/react-dropdown-menu\"\nimport { Table } from \"@tanstack/react-table\"\nimport { Settings2 } from \"lucide-react\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n} from \"@/components/ui/dropdown-menu\"\n\nexport function DataTableViewOptions\n \n table.getColumn(\"title\")?.setFilterValue(event.target.value)\n }\n className=\"h-8 w-[150px] lg:w-[250px]\"\n />\n {table.getColumn(\"status\") && (\n table.resetColumnFilters()}\n >\n Reset\n
\n \n
\n \n
\n )\n}\n",
"language": "tsx"
},
"@/registry/view/tasks-1/components/user-nav": {
"content": "import {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nexport function UserNav() {\n return (\n \n \n
\n
\n \n
\n shadcn
\n\n m@example.com\n
\n\n
\n \n
\n \n )\n}\n",
"language": "tsx"
}
},
"timeline-1": {
"components": {
"@/registry/view/timeline-1/components/timeline-container": {
"content": "import { TimeLineData } from \"@/registry/view/timeline-1/constant\"\r\n\r\nimport Timeline from \"./timeline\"\r\n\r\nconst TimelineContainer = () => {\r\n return \n
\n \n
\n \n Welcome back!\n
\n\n Here's a list of your tasks for this month.\n
\n\n
\n \r\n \r\n \r\n
\r\n )\r\n}\r\nexport default Timeline\r\n",
"language": "tsx"
}
},
"constant": {
"@/registry/view/timeline-1/constant/index": {
"content": "// Timeline block's data\r\nexport const TimeLineData: TimeLineProps[] = [\r\n {\r\n title: \"STEP 1: Discovery & Consultation\",\r\n content: (\r\n \r\n
\r\n \r\n How it works?\r\n
\r\n\r\n We work in a structured way. Here is how you will be onboard:\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n {data.map((item, index) => {\r\n const isEven = index % 2 !== 0\r\n return (\r\n \r\n {item.title}\r\n
\r\n{item.content}
\r\n \r\n \r\n )\r\n })}\r\n \r\n
\r\n ),\r\n },\r\n {\r\n title: \"STEP 2: Planning & Strategy\",\r\n content: (\r\n \r\n
\r\n \r\n Deep Dive & Alignment\r\n
\r\n\r\n
\r\n \r\n We initiate with a thorough consultation to understand your unique\r\n business needs, project goals, and desired outcomes for your\r\n web/mobile app, MVP, or ERP system.\r\n
\r\n\r\n
\r\n ),\r\n },\r\n {\r\n title: \"STEP 3: Design & Development\",\r\n content: (\r\n \r\n
\r\n \r\n Blueprint for Success\r\n
\r\n\r\n
\r\n \r\n Our expert team meticulously plans the project roadmap, defining\r\n scope, timelines, budget, and key deliverables for your web/mobile\r\n app, MVP, or ERP system development.\r\n
\r\n\r\n
\r\n ),\r\n },\r\n {\r\n title: \"STEP 4: Testing & Quality Assurance\",\r\n content: (\r\n \r\n
\r\n \r\n Crafting Your Solution\r\n
\r\n\r\n
\r\n \r\n Our skilled developers and designers bring your vision to life. We\r\n focus on user-centered design, robust development, and seamless\r\n integration for your web/mobile app, MVP, or ERP system.\r\n
\r\n\r\n
\r\n ),\r\n },\r\n {\r\n title: \"STEP 5: Launch & Beyond\",\r\n content: (\r\n \r\n
\r\n \r\n Ensuring Excellence\r\n
\r\n\r\n
\r\n \r\n Rigorous testing is conducted at every stage to identify and address\r\n any issues, ensuring the highest quality and performance for your\r\n web/mobile app, MVP, or ERP system.\r\n
\r\n\r\n
\r\n ),\r\n },\r\n]\r\n",
"language": "tsx"
}
},
"lib": {},
"context": {},
"hooks": {},
"types": {},
"styles": {},
"layout": {},
"@/registry/view/timeline-1/page": {
"content": "import TimelineContainer from \"./components/timeline-container\"\r\n\r\nconst page = () => {\r\n return \r\n
\r\n \r\n Go-Live & Continuous Support\r\n
\r\n\r\n
\r\n \r\n We seamlessly launch your web/mobile app, MVP, or ERP system and\r\n provide ongoing support, maintenance, and updates to ensure its\r\n continued success and meet your evolving business needs.\r\n
\r\n