diff --git a/src/components/features/namespace-manager/CreateNamespaceDialog.tsx b/src/components/features/namespace-manager/CreateNamespaceDialog.tsx new file mode 100644 index 0000000..63750a7 --- /dev/null +++ b/src/components/features/namespace-manager/CreateNamespaceDialog.tsx @@ -0,0 +1,64 @@ +import { Button } from '@/components/ui/button' +import { Input } from '@/components/ui/input' +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from '@/components/ui/dialog' +import { Plus } from '@phosphor-icons/react' + +interface CreateNamespaceDialogProps { + open: boolean + onOpenChange: (open: boolean) => void + namespaceName: string + onNamespaceNameChange: (name: string) => void + onCreateNamespace: () => void + loading: boolean +} + +export function CreateNamespaceDialog({ + open, + onOpenChange, + namespaceName, + onNamespaceNameChange, + onCreateNamespace, + loading, +}: CreateNamespaceDialogProps) { + return ( + + + + + + + Create Namespace + + Create a new namespace to organize your snippets + + +
+ onNamespaceNameChange(e.target.value)} + onKeyPress={(e) => e.key === 'Enter' && onCreateNamespace()} + /> +
+ + + + + + + ) +} diff --git a/src/components/features/namespace-manager/DeleteNamespaceDialog.tsx b/src/components/features/namespace-manager/DeleteNamespaceDialog.tsx new file mode 100644 index 0000000..adcd495 --- /dev/null +++ b/src/components/features/namespace-manager/DeleteNamespaceDialog.tsx @@ -0,0 +1,64 @@ +import { Button } from '@/components/ui/button' +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, +} from '@/components/ui/alert-dialog' +import { Trash } from '@phosphor-icons/react' +import { Namespace } from '@/lib/types' + +interface DeleteNamespaceDialogProps { + open: boolean + onOpenChange: (open: boolean) => void + namespace: Namespace | null + onDeleteNamespace: () => void + loading: boolean + showTrigger?: boolean + onOpenDialog?: () => void +} + +export function DeleteNamespaceDialog({ + open, + onOpenChange, + namespace, + onDeleteNamespace, + loading, + showTrigger = false, + onOpenDialog, +}: DeleteNamespaceDialogProps) { + return ( + <> + {showTrigger && ( + + )} + + + + + Delete Namespace + + Are you sure you want to delete "{namespace?.name}"? All snippets in this namespace will be moved to the default namespace. + + + + Cancel + + Delete + + + + + + ) +} diff --git a/src/components/features/namespace-manager/NamespaceSelector.tsx b/src/components/features/namespace-manager/NamespaceSelector.tsx index 6f27172..0d034c1 100644 --- a/src/components/features/namespace-manager/NamespaceSelector.tsx +++ b/src/components/features/namespace-manager/NamespaceSelector.tsx @@ -1,6 +1,4 @@ import { useState, useEffect } from 'react' -import { Button } from '@/components/ui/button' -import { Input } from '@/components/ui/input' import { Select, SelectContent, @@ -8,26 +6,7 @@ import { SelectTrigger, SelectValue, } from '@/components/ui/select' -import { - Dialog, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from '@/components/ui/dialog' -import { - AlertDialog, - AlertDialogAction, - AlertDialogCancel, - AlertDialogContent, - AlertDialogDescription, - AlertDialogFooter, - AlertDialogHeader, - AlertDialogTitle, -} from '@/components/ui/alert-dialog' -import { Plus, Trash, Folder } from '@phosphor-icons/react' +import { Folder } from '@phosphor-icons/react' import { toast } from 'sonner' import { Namespace } from '@/lib/types' import { @@ -35,6 +14,8 @@ import { createNamespace, deleteNamespace, } from '@/lib/db' +import { CreateNamespaceDialog } from './CreateNamespaceDialog' +import { DeleteNamespaceDialog } from './DeleteNamespaceDialog' interface NamespaceSelectorProps { selectedNamespaceId: string | null @@ -149,67 +130,29 @@ export function NamespaceSelector({ selectedNamespaceId, onNamespaceChange }: Na - - - - - - - Create Namespace - - Create a new namespace to organize your snippets - - -
- setNewNamespaceName(e.target.value)} - onKeyPress={(e) => e.key === 'Enter' && handleCreateNamespace()} - /> -
- - - - - - + {selectedNamespace && !selectedNamespace.isDefault && ( - + /> )} - - - - - Delete Namespace - - Are you sure you want to delete "{namespaceToDelete?.name}"? All snippets in this namespace will be moved to the default namespace. - - - - Cancel - - Delete - - - - ) } diff --git a/src/components/organisms/OrganismsSection.tsx b/src/components/organisms/OrganismsSection.tsx index 5156cae..29aa1d6 100644 --- a/src/components/organisms/OrganismsSection.tsx +++ b/src/components/organisms/OrganismsSection.tsx @@ -1,481 +1,26 @@ -import { Card } from '@/components/ui/card' -import { Button } from '@/components/ui/button' -import { Input } from '@/components/ui/input' -import { Label } from '@/components/ui/label' -import { Badge } from '@/components/ui/badge' -import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' -import { Separator } from '@/components/ui/separator' -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from '@/components/ui/table' -import { - List, - GridFour, - Bell, - Gear, - SignOut, - User, - House, - ChartBar, - Folder, - CheckCircle, - Clock, - XCircle, - ArrowRight, - Envelope, - Lock, - Plus, -} from '@phosphor-icons/react' -import { useState } from 'react' import { ComponentShowcase } from '@/components/demo/ComponentShowcase' import { organismsCodeSnippets } from '@/lib/component-code-snippets' import { Snippet } from '@/lib/types' +import { NavigationBarsShowcase } from './showcases/NavigationBarsShowcase' +import { DataTablesShowcase } from './showcases/DataTablesShowcase' +import { FormsShowcase } from './showcases/FormsShowcase' +import { TaskListsShowcase } from './showcases/TaskListsShowcase' +import { ContentGridsShowcase } from './showcases/ContentGridsShowcase' +import { SidebarNavigationShowcase } from './showcases/SidebarNavigationShowcase' interface OrganismsSectionProps { onSaveSnippet: (snippet: Omit) => void } export function OrganismsSection({ onSaveSnippet }: OrganismsSectionProps) { - const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid') - return (
-
-
-

Navigation Bars

-

- Complete navigation components with branding and actions -

-
- - - -
-
-
-

BrandName

- -
-
- - - - - U - -
-
-
- -
-

- Primary navigation with user menu and notifications -

-
- - - - -
-
-
-
-
-

Product

-
-
-
- - -
-
- -
- -
-

- Marketing site navigation with CTAs -

-
- -
- -
-
-

Data Tables

-

- Structured data display with actions -

-
- - -
-
-

Recent Transactions

- -
-
- - - - Status - Transaction - Date - Amount - - - - - - Completed - - Payment received - Mar 15, 2024 - $250.00 - - - - Pending - - Processing payment - Mar 14, 2024 - $150.00 - - - - Completed - - Refund issued - Mar 13, 2024 - -$75.00 - - - - Failed - - Payment declined - Mar 12, 2024 - $0.00 - - -
- -
- -
-
-

Forms

-

- Complete form layouts with validation and actions -

-
- - -
-
-

Create Account

-

- Fill in your details to get started -

-
- - - -
-
- - -
-
- - -
-
- -
- -
- - -
-
- -
- -
- - -
-

- Must be at least 8 characters -

-
- - - -
- - -
- -
-
- -
-
-

Task Lists

-

- Interactive lists with status and actions -

-
- - -
-
-

Project Tasks

- -
-
- -
-
-
- -
-

Design system documentation

-

- Complete the component library documentation -

-
- Design - Completed -
-
-
-
- -
-
- -
-

API integration

-

- Connect frontend to backend services -

-
- Development - In Progress -
-
-
-
- -
-
- -
-

Performance optimization

-

- Improve page load times and reduce bundle size -

-
- Blocked - Needs review -
-
-
-
-
- -
- -
-
-

Content Grids

-

- Switchable grid and list views with filtering -

-
- - -
-
-

Projects

-
- - -
-
-
- - {viewMode === 'grid' ? ( -
- {[1, 2, 3, 4, 5, 6].map((i) => ( - -
-
-

Project {i}

-

- A brief description of this project and its goals. -

-
- Active - -
-
- - ))} -
- ) : ( -
- {[1, 2, 3, 4, 5, 6].map((i) => ( -
-
-
-
-

Project {i}

-

- A brief description of this project -

-
- Active - -
-
- ))} -
- )} - -
- -
-
-

Sidebar Navigation

-

- Complete sidebar with nested navigation -

-
- - -
- - -
-

- Sidebar with navigation items and user actions -

-
-
- -
+ + + + + +
) } diff --git a/src/components/organisms/showcases/ContentGridsShowcase.tsx b/src/components/organisms/showcases/ContentGridsShowcase.tsx new file mode 100644 index 0000000..1089042 --- /dev/null +++ b/src/components/organisms/showcases/ContentGridsShowcase.tsx @@ -0,0 +1,89 @@ +import { Card } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Badge } from '@/components/ui/badge' +import { + List, + GridFour, +} from '@phosphor-icons/react' +import { useState } from 'react' + +export function ContentGridsShowcase() { + const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid') + + return ( +
+
+

Content Grids

+

+ Switchable grid and list views with filtering +

+
+ + +
+
+

Projects

+
+ + +
+
+
+ + {viewMode === 'grid' ? ( +
+ {[1, 2, 3, 4, 5, 6].map((i) => ( + +
+
+

Project {i}

+

+ A brief description of this project and its goals. +

+
+ Active + +
+
+ + ))} +
+ ) : ( +
+ {[1, 2, 3, 4, 5, 6].map((i) => ( +
+
+
+
+

Project {i}

+

+ A brief description of this project +

+
+ Active + +
+
+ ))} +
+ )} + +
+ ) +} diff --git a/src/components/organisms/showcases/DataTablesShowcase.tsx b/src/components/organisms/showcases/DataTablesShowcase.tsx new file mode 100644 index 0000000..5ae8644 --- /dev/null +++ b/src/components/organisms/showcases/DataTablesShowcase.tsx @@ -0,0 +1,79 @@ +import { Card } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Badge } from '@/components/ui/badge' +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/ui/table' + +export function DataTablesShowcase() { + return ( +
+
+

Data Tables

+

+ Structured data display with actions +

+
+ + +
+
+

Recent Transactions

+ +
+
+ + + + Status + Transaction + Date + Amount + + + + + + Completed + + Payment received + Mar 15, 2024 + $250.00 + + + + Pending + + Processing payment + Mar 14, 2024 + $150.00 + + + + Completed + + Refund issued + Mar 13, 2024 + -$75.00 + + + + Failed + + Payment declined + Mar 12, 2024 + $0.00 + + +
+ +
+ ) +} diff --git a/src/components/organisms/showcases/FormsShowcase.tsx b/src/components/organisms/showcases/FormsShowcase.tsx new file mode 100644 index 0000000..aebec7d --- /dev/null +++ b/src/components/organisms/showcases/FormsShowcase.tsx @@ -0,0 +1,78 @@ +import { Card } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Input } from '@/components/ui/input' +import { Label } from '@/components/ui/label' +import { Separator } from '@/components/ui/separator' +import { + Envelope, + Lock, + ArrowRight, +} from '@phosphor-icons/react' + +export function FormsShowcase() { + return ( +
+
+

Forms

+

+ Complete form layouts with validation and actions +

+
+ + +
+
+

Create Account

+

+ Fill in your details to get started +

+
+ + + +
+
+ + +
+
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+

+ Must be at least 8 characters +

+
+ + + +
+ + +
+ +
+
+ ) +} diff --git a/src/components/organisms/showcases/NavigationBarsShowcase.tsx b/src/components/organisms/showcases/NavigationBarsShowcase.tsx new file mode 100644 index 0000000..2d9409e --- /dev/null +++ b/src/components/organisms/showcases/NavigationBarsShowcase.tsx @@ -0,0 +1,119 @@ +import { Card } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' +import { + Bell, + Gear, + House, + ChartBar, + Folder, +} from '@phosphor-icons/react' +import { ComponentShowcase } from '@/components/demo/ComponentShowcase' +import { organismsCodeSnippets } from '@/lib/component-code-snippets' +import { Snippet } from '@/lib/types' + +interface NavigationBarsShowcaseProps { + onSaveSnippet: (snippet: Omit) => void +} + +export function NavigationBarsShowcase({ onSaveSnippet }: NavigationBarsShowcaseProps) { + return ( +
+
+

Navigation Bars

+

+ Complete navigation components with branding and actions +

+
+ + + +
+
+
+

BrandName

+ +
+
+ + + + + U + +
+
+
+ +
+

+ Primary navigation with user menu and notifications +

+
+ + + + +
+
+
+
+
+

Product

+
+
+
+ + +
+
+ +
+ +
+

+ Marketing site navigation with CTAs +

+
+ +
+ ) +} diff --git a/src/components/organisms/showcases/SidebarNavigationShowcase.tsx b/src/components/organisms/showcases/SidebarNavigationShowcase.tsx new file mode 100644 index 0000000..3edbafc --- /dev/null +++ b/src/components/organisms/showcases/SidebarNavigationShowcase.tsx @@ -0,0 +1,75 @@ +import { Card } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Separator } from '@/components/ui/separator' +import { + Gear, + SignOut, + User, + House, + ChartBar, + Folder, +} from '@phosphor-icons/react' + +export function SidebarNavigationShowcase() { + return ( +
+
+

Sidebar Navigation

+

+ Complete sidebar with nested navigation +

+
+ + +
+ + +
+

+ Sidebar with navigation items and user actions +

+
+
+ +
+ ) +} diff --git a/src/components/organisms/showcases/TaskListsShowcase.tsx b/src/components/organisms/showcases/TaskListsShowcase.tsx new file mode 100644 index 0000000..a7d1895 --- /dev/null +++ b/src/components/organisms/showcases/TaskListsShowcase.tsx @@ -0,0 +1,84 @@ +import { Card } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Badge } from '@/components/ui/badge' +import { + CheckCircle, + Clock, + XCircle, + Plus, +} from '@phosphor-icons/react' + +export function TaskListsShowcase() { + return ( +
+
+

Task Lists

+

+ Interactive lists with status and actions +

+
+ + +
+
+

Project Tasks

+ +
+
+ +
+
+
+ +
+

Design system documentation

+

+ Complete the component library documentation +

+
+ Design + Completed +
+
+
+
+ +
+
+ +
+

API integration

+

+ Connect frontend to backend services +

+
+ Development + In Progress +
+
+
+
+ +
+
+ +
+

Performance optimization

+

+ Improve page load times and reduce bundle size +

+
+ Blocked + Needs review +
+
+
+
+
+ +
+ ) +} diff --git a/src/components/templates/BlogTemplate.tsx b/src/components/templates/BlogTemplate.tsx new file mode 100644 index 0000000..a6b504d --- /dev/null +++ b/src/components/templates/BlogTemplate.tsx @@ -0,0 +1,102 @@ +import { Card } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Badge } from '@/components/ui/badge' +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' +import { Separator } from '@/components/ui/separator' +import { ArrowRight } from '@phosphor-icons/react' + +export function BlogTemplate() { + return ( + +
+
+

Blog

+
+ + + +
+
+
+ +
+
+
+
+ Design + Tutorial +
+

+ Building a Comprehensive Component Library +

+
+ + + AW + +
+

Alex Writer

+

+ March 15, 2024 · 10 min read +

+
+
+
+ + + +
+
+ +

+ Design systems have become an essential part of modern product development. + They provide consistency, improve efficiency, and create a shared language + between designers and developers. +

+ +

+ Understanding Atomic Design +

+

+ The atomic design methodology consists of five distinct stages: atoms, + molecules, organisms, templates, and pages. Each stage builds upon the + previous, creating a comprehensive system that scales with your needs. +

+ + +

+ "A design system is never complete. It's a living, breathing ecosystem + that evolves with your product and team." +

+ + +

Getting Started

+

+ Begin by identifying the core components your product needs. Start small + with basic atoms like buttons and inputs, then gradually build up to more + complex organisms and templates. +

+
+ + + +
+ + +
+
+
+ + ) +} diff --git a/src/components/templates/DashboardTemplate.tsx b/src/components/templates/DashboardTemplate.tsx new file mode 100644 index 0000000..42a3b37 --- /dev/null +++ b/src/components/templates/DashboardTemplate.tsx @@ -0,0 +1,165 @@ +import { Card } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Badge } from '@/components/ui/badge' +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' +import { + Bell, + Gear, + House, + ChartBar, + Folder, + Plus, + TrendUp, + Users, +} from '@phosphor-icons/react' + +export function DashboardTemplate() { + return ( + +
+
+
+

Dashboard

+
+
+ + + + + U + +
+
+
+ +
+ + +
+
+
+
+

Overview

+

+ Welcome back, here's what's happening +

+
+ +
+ +
+ +
+
+

Total Revenue

+

$45,231

+

+ + +20.1% from last month +

+
+
+ + + +
+
+

Active Users

+

2,350

+

+ + +12.5% from last month +

+
+
+ + + +
+
+

Total Orders

+

1,234

+

+ + +8.2% from last month +

+
+
+ +
+ +
+ +
+

Recent Activity

+
+
+ {[1, 2, 3].map((i) => ( +
+ + + U + +
+

+ User {i} completed a task +

+

2 hours ago

+
+
+ ))} +
+ + + +
+

Quick Actions

+
+
+ + + +
+ +
+
+
+
+ + ) +} diff --git a/src/components/templates/EcommerceTemplate.tsx b/src/components/templates/EcommerceTemplate.tsx new file mode 100644 index 0000000..1d9d2b9 --- /dev/null +++ b/src/components/templates/EcommerceTemplate.tsx @@ -0,0 +1,97 @@ +import { Card } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Input } from '@/components/ui/input' +import { Badge } from '@/components/ui/badge' +import { Avatar, AvatarFallback } from '@/components/ui/avatar' +import { Separator } from '@/components/ui/separator' +import { + MagnifyingGlass, + ShoppingCart, +} from '@phosphor-icons/react' + +export function EcommerceTemplate() { + return ( + +
+
+
+

Store

+
+ + +
+
+
+ + + U + +
+
+
+ +
+
+
+
+
+ {[1, 2, 3, 4].map((i) => ( +
+ ))} +
+
+ +
+
+ New Arrival +

Premium Product Name

+
+ $299.00 + + $399.00 + +
+
+ + + +
+

Description

+

+ Experience premium quality with this exceptional product. Crafted with + attention to detail and designed for those who demand excellence. +

+
+ +
+

Features

+
    +
  • • Premium materials and construction
    • +
  • • Industry-leading performance
    • +
  • • 2-year warranty included
    • +
  • • Free shipping on orders over $50
    • +
+
+ + + +
+ + +
+
+
+
+ + ) +} diff --git a/src/components/templates/LandingPageTemplate.tsx b/src/components/templates/LandingPageTemplate.tsx new file mode 100644 index 0000000..c84964a --- /dev/null +++ b/src/components/templates/LandingPageTemplate.tsx @@ -0,0 +1,108 @@ +import { Card } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Badge } from '@/components/ui/badge' +import { + ChartBar, + Users, + Gear, + ArrowRight, +} from '@phosphor-icons/react' + +export function LandingPageTemplate() { + return ( + +
+
+
+
+

ProductName

+
+
+ + + + +
+
+
+ +
+ New Release +

+ Build Amazing Products Faster +

+

+ The complete toolkit for modern product development. Ship faster with our + component library and design system. +

+
+ + +
+
+ +
+
+

Features

+

+ Everything you need to build production-ready applications +

+
+ +
+ +
+ +
+

Analytics

+

+ Track and analyze your product metrics in real-time +

+ + + +
+ +
+

Collaboration

+

+ Work together with your team seamlessly +

+ + + +
+ +
+

Customizable

+

+ Adapt the platform to your specific needs +

+ +
+
+ +
+

Ready to get started?

+

+ Join thousands of teams already building with our platform +

+ +
+ + ) +} diff --git a/src/components/templates/TemplatesSection.tsx b/src/components/templates/TemplatesSection.tsx index d1b186d..d4a4943 100644 --- a/src/components/templates/TemplatesSection.tsx +++ b/src/components/templates/TemplatesSection.tsx @@ -1,25 +1,10 @@ -import { Card } from '@/components/ui/card' -import { Button } from '@/components/ui/button' -import { Input } from '@/components/ui/input' -import { Badge } from '@/components/ui/badge' -import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' -import { Separator } from '@/components/ui/separator' -import { - Bell, - Gear, - House, - ChartBar, - Folder, - MagnifyingGlass, - Plus, - ArrowRight, - TrendUp, - Users, - ShoppingCart, -} from '@phosphor-icons/react' import { ComponentShowcase } from '@/components/demo/ComponentShowcase' import { templatesCodeSnippets } from '@/lib/component-code-snippets' import { Snippet } from '@/lib/types' +import { DashboardTemplate } from './DashboardTemplate' +import { LandingPageTemplate } from './LandingPageTemplate' +import { EcommerceTemplate } from './EcommerceTemplate' +import { BlogTemplate } from './BlogTemplate' interface TemplatesSectionProps { onSaveSnippet: (snippet: Omit) => void @@ -43,153 +28,8 @@ export function TemplatesSection({ onSaveSnippet }: TemplatesSectionProps) { category="templates" onSaveSnippet={onSaveSnippet} > - -
-
-
-

Dashboard

-
-
- - - - - U - -
-
-
- -
- - -
-
-
-
-

Overview

-

- Welcome back, here's what's happening -

-
- -
- -
- -
-
-

Total Revenue

-

$45,231

-

- - +20.1% from last month -

-
-
- - - -
-
-

Active Users

-

2,350

-

- - +12.5% from last month -

-
-
- - - -
-
-

Total Orders

-

1,234

-

- - +8.2% from last month -

-
-
- -
- -
- -
-

Recent Activity

-
-
- {[1, 2, 3].map((i) => ( -
- - - U - -
-

- User {i} completed a task -

-

2 hours ago

-
-
- ))} -
- - - -
-

Quick Actions

-
-
- - - -
- -
-
-
-
- - + +
@@ -207,100 +47,7 @@ export function TemplatesSection({ onSaveSnippet }: TemplatesSectionProps) { category="templates" onSaveSnippet={onSaveSnippet} > - -
-
-
-
-

ProductName

-
-
- - - - -
-
-
- -
- New Release -

- Build Amazing Products Faster -

-

- The complete toolkit for modern product development. Ship faster with our - component library and design system. -

-
- - -
-
- -
-
-

Features

-

- Everything you need to build production-ready applications -

-
- -
- -
- -
-

Analytics

-

- Track and analyze your product metrics in real-time -

- - - -
- -
-

Collaboration

-

- Work together with your team seamlessly -

- - - -
- -
-

Customizable

-

- Adapt the platform to your specific needs -

- -
-
- -
-

Ready to get started?

-

- Join thousands of teams already building with our platform -

- -
- +
@@ -312,88 +59,15 @@ export function TemplatesSection({ onSaveSnippet }: TemplatesSectionProps) {

- -
-
-
-

Store

-
- - -
-
-
- - - U - -
-
-
- -
-
-
-
-
- {[1, 2, 3, 4].map((i) => ( -
- ))} -
-
- -
-
- New Arrival -

Premium Product Name

-
- $299.00 - - $399.00 - -
-
- - - -
-

Description

-

- Experience premium quality with this exceptional product. Crafted with - attention to detail and designed for those who demand excellence. -

-
- -
-

Features

-
    -
  • • Premium materials and construction
    • -
  • • Industry-leading performance
    • -
  • • 2-year warranty included
    • -
  • • Free shipping on orders over $50
    • -
-
- - - -
- - -
-
-
-
- + + +
@@ -404,97 +78,15 @@ export function TemplatesSection({ onSaveSnippet }: TemplatesSectionProps) {

- -
-
-

Blog

-
- - - -
-
-
- -
-
-
-
- Design - Tutorial -
-

- Building a Comprehensive Component Library -

-
- - - AW - -
-

Alex Writer

-

- March 15, 2024 · 10 min read -

-
-
-
- - - -
-
- -

- Design systems have become an essential part of modern product development. - They provide consistency, improve efficiency, and create a shared language - between designers and developers. -

- -

- Understanding Atomic Design -

-

- The atomic design methodology consists of five distinct stages: atoms, - molecules, organisms, templates, and pages. Each stage builds upon the - previous, creating a comprehensive system that scales with your needs. -

- - -

- "A design system is never complete. It's a living, breathing ecosystem - that evolves with your product and team." -

- - -

Getting Started

-

- Begin by identifying the core components your product needs. Start small - with basic atoms like buttons and inputs, then gradually build up to more - complex organisms and templates. -

-
- - - -
- - -
-
-
- + + +
)