From 7051a7575528f883cfaa26cc4e797f020ed28261 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 17 Jan 2026 22:16:05 +0000 Subject: [PATCH] Split OrganismsSection.tsx into individual showcase components Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com> --- src/components/organisms/OrganismsSection.tsx | 479 +----------------- .../showcases/ContentGridsShowcase.tsx | 89 ++++ .../showcases/DataTablesShowcase.tsx | 79 +++ .../organisms/showcases/FormsShowcase.tsx | 78 +++ .../showcases/NavigationBarsShowcase.tsx | 119 +++++ .../showcases/SidebarNavigationShowcase.tsx | 75 +++ .../organisms/showcases/TaskListsShowcase.tsx | 84 +++ 7 files changed, 536 insertions(+), 467 deletions(-) create mode 100644 src/components/organisms/showcases/ContentGridsShowcase.tsx create mode 100644 src/components/organisms/showcases/DataTablesShowcase.tsx create mode 100644 src/components/organisms/showcases/FormsShowcase.tsx create mode 100644 src/components/organisms/showcases/NavigationBarsShowcase.tsx create mode 100644 src/components/organisms/showcases/SidebarNavigationShowcase.tsx create mode 100644 src/components/organisms/showcases/TaskListsShowcase.tsx 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 +
+
+
+
+
+ +
+ ) +}