From ba1fe944c5d44907bba44147922a76d49b3c7b1b Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sun, 18 Jan 2026 00:29:14 +0000 Subject: [PATCH] Refactor Sass styles showcase tabs --- src/components/SassStylesShowcase.tsx | 338 ++---------------- .../sass-styles-showcase/AnimationsTab.tsx | 46 +++ .../sass-styles-showcase/ButtonsTab.tsx | 37 ++ .../sass-styles-showcase/CardsTab.tsx | 34 ++ .../sass-styles-showcase/ChipsTab.tsx | 51 +++ .../sass-styles-showcase/InputsTab.tsx | 36 ++ .../sass-styles-showcase/LayoutTab.tsx | 44 +++ src/components/sass-styles-showcase/types.ts | 83 +++++ src/data/sass-styles-showcase.json | 227 ++++++++++++ 9 files changed, 591 insertions(+), 305 deletions(-) create mode 100644 src/components/sass-styles-showcase/AnimationsTab.tsx create mode 100644 src/components/sass-styles-showcase/ButtonsTab.tsx create mode 100644 src/components/sass-styles-showcase/CardsTab.tsx create mode 100644 src/components/sass-styles-showcase/ChipsTab.tsx create mode 100644 src/components/sass-styles-showcase/InputsTab.tsx create mode 100644 src/components/sass-styles-showcase/LayoutTab.tsx create mode 100644 src/components/sass-styles-showcase/types.ts create mode 100644 src/data/sass-styles-showcase.json diff --git a/src/components/SassStylesShowcase.tsx b/src/components/SassStylesShowcase.tsx index 87208c2..1b1bd0f 100644 --- a/src/components/SassStylesShowcase.tsx +++ b/src/components/SassStylesShowcase.tsx @@ -1,319 +1,47 @@ -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' -import { ScrollArea } from '@/components/ui/scroll-area' -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' -import { Badge } from '@/components/ui/badge' -import { Button } from '@/components/ui/button' -import { Code, Palette, Sparkle, CheckCircle } from '@phosphor-icons/react' +import showcaseData from '@/data/sass-styles-showcase.json' + +import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs' +import { AnimationsTab } from '@/components/sass-styles-showcase/AnimationsTab' +import { ButtonsTab } from '@/components/sass-styles-showcase/ButtonsTab' +import { CardsTab } from '@/components/sass-styles-showcase/CardsTab' +import { ChipsTab } from '@/components/sass-styles-showcase/ChipsTab' +import { InputsTab } from '@/components/sass-styles-showcase/InputsTab' +import { LayoutTab } from '@/components/sass-styles-showcase/LayoutTab' +import { type SassStylesShowcaseData } from '@/components/sass-styles-showcase/types' + +const data = showcaseData as SassStylesShowcaseData + +const tabContent = { + buttons: ButtonsTab, + inputs: InputsTab, + cards: CardsTab, + chips: ChipsTab, + layout: LayoutTab, + animations: AnimationsTab, +} export function SassStylesShowcase() { return (
-

Custom Material UI Sass Styles

-

- Non-standard Material UI CSS components built with Sass -

+

{data.page.title}

+

{data.page.description}

- + - Buttons - Inputs - Cards - Chips - Layout - Animations + {data.tabOrder.map((tabKey) => ( + + {data.tabs[tabKey].label} + + ))} - - - - Custom Button Styles - - -
-
- - - -
- -
- - -
-
+ {data.tabOrder.map((tabKey) => { + const TabComponent = tabContent[tabKey] -
- 
-{`
-
-`}
-
-
- - - - - - - - Custom Input Styles - - -
- - - -
- -
- 
-{`
-
-`}
-
-
- - - - - - - - Custom Card Styles - - -
-
-

Standard Card

-

- Basic card with elevation and hover effect -

-
- -
-

Gradient Card

-

- Card with gradient background -

-
- -
-

Glass Card

-

- Glassmorphism effect card -

-
-
- -
- 
-{`

-  Standard Card
-

-
-

-  Gradient Card
-

-
-

-  Glass Card
-
`}
-
-
- - - - - - - - Custom Chip/Badge Styles - - -
- - Primary - - - Secondary - - - Accent - - - - Success - - - Error - - - Warning - -
- -
- 
-{`
-  Primary
-
-
-
-  
-  Success
-`}
-
-
- - - - - - Custom Tags - - -
- Default - Small - Large -
- - - - - - - - Custom Layout Components - - -
-

Custom Stack

-
-
Item 1
-
Item 2
-
Item 3
-
-
- -
-

Custom Grid (Responsive)

-
-
Grid 1
-
Grid 2
-
Grid 3
-
Grid 4
-
-
- -
-

Custom Surface

-
-

Interactive surface with hover effects

-
-
- -
- 
-{`

-  
Item 1

-  
Item 2

-

-
-

-  
Grid Item

-
`}
-
-
- - - - - - - - Animation Classes - - -
-
- Fade In -
-
- Slide Up -
-
- Scale In -
-
- Pulse -
-
- Bounce -
-
- Float -
-
- -
- 
-{`
Fade In

-
Slide Up

-
Pulse

-
Bounce
`}
-
-
- - - - - - Skeleton Loading - - -
-
-
-
-
- - - + return + })}
) diff --git a/src/components/sass-styles-showcase/AnimationsTab.tsx b/src/components/sass-styles-showcase/AnimationsTab.tsx new file mode 100644 index 0000000..d6c743c --- /dev/null +++ b/src/components/sass-styles-showcase/AnimationsTab.tsx @@ -0,0 +1,46 @@ +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { TabsContent } from '@/components/ui/tabs' +import { type AnimationsTabData } from './types' + +type AnimationsTabProps = { + data: AnimationsTabData + value: string +} + +export function AnimationsTab({ data, value }: AnimationsTabProps) { + return ( + + + + {data.title} + + +
+ {data.items.map((item) => ( +
+ {item.label} +
+ ))} +
+ +
+ 
{data.codeSample}
+
+ + + + + + {data.skeletonTitle} + + +
+ {data.skeletonClasses.map((className, index) => ( +
+ ))} +
+ + + + ) +} diff --git a/src/components/sass-styles-showcase/ButtonsTab.tsx b/src/components/sass-styles-showcase/ButtonsTab.tsx new file mode 100644 index 0000000..4fc9bb7 --- /dev/null +++ b/src/components/sass-styles-showcase/ButtonsTab.tsx @@ -0,0 +1,37 @@ +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { TabsContent } from '@/components/ui/tabs' +import { type ButtonsTabData } from './types' + +type ButtonsTabProps = { + data: ButtonsTabData + value: string +} + +export function ButtonsTab({ data, value }: ButtonsTabProps) { + return ( + + + + {data.title} + + +
+ {data.rows.map((row, rowIndex) => ( +
+ {row.map((button) => ( + + ))} +
+ ))} +
+ +
+ 
{data.codeSample}
+
+ + + + ) +} diff --git a/src/components/sass-styles-showcase/CardsTab.tsx b/src/components/sass-styles-showcase/CardsTab.tsx new file mode 100644 index 0000000..3b89981 --- /dev/null +++ b/src/components/sass-styles-showcase/CardsTab.tsx @@ -0,0 +1,34 @@ +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { TabsContent } from '@/components/ui/tabs' +import { type CardsTabData } from './types' + +type CardsTabProps = { + data: CardsTabData + value: string +} + +export function CardsTab({ data, value }: CardsTabProps) { + return ( + + + + {data.title} + + +
+ {data.items.map((item) => ( +
+

{item.title}

+

{item.description}

+
+ ))} +
+ +
+ 
{data.codeSample}
+
+ + + + ) +} diff --git a/src/components/sass-styles-showcase/ChipsTab.tsx b/src/components/sass-styles-showcase/ChipsTab.tsx new file mode 100644 index 0000000..5e12468 --- /dev/null +++ b/src/components/sass-styles-showcase/ChipsTab.tsx @@ -0,0 +1,51 @@ +import { CheckCircle } from '@phosphor-icons/react' + +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { TabsContent } from '@/components/ui/tabs' +import { type ChipsTabData } from './types' + +type ChipsTabProps = { + data: ChipsTabData + value: string +} + +export function ChipsTab({ data, value }: ChipsTabProps) { + return ( + + + + {data.chipCardTitle} + + +
+ {data.chips.map((chip) => ( + + {chip.showIcon ? : null} + {chip.label} + + ))} +
+ +
+ 
{data.codeSample}
+
+ + + + + + {data.tagCardTitle} + + +
+ {data.tags.map((tag) => ( + + {tag.label} + + ))} +
+ + + + ) +} diff --git a/src/components/sass-styles-showcase/InputsTab.tsx b/src/components/sass-styles-showcase/InputsTab.tsx new file mode 100644 index 0000000..50dd163 --- /dev/null +++ b/src/components/sass-styles-showcase/InputsTab.tsx @@ -0,0 +1,36 @@ +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { TabsContent } from '@/components/ui/tabs' +import { type InputsTabData } from './types' + +type InputsTabProps = { + data: InputsTabData + value: string +} + +export function InputsTab({ data, value }: InputsTabProps) { + return ( + + + + {data.title} + + +
+ {data.fields.map((field) => ( + + ))} +
+ +
+ 
{data.codeSample}
+
+ + + + ) +} diff --git a/src/components/sass-styles-showcase/LayoutTab.tsx b/src/components/sass-styles-showcase/LayoutTab.tsx new file mode 100644 index 0000000..b2e900e --- /dev/null +++ b/src/components/sass-styles-showcase/LayoutTab.tsx @@ -0,0 +1,44 @@ +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { TabsContent } from '@/components/ui/tabs' +import { type LayoutSection, type LayoutTabData } from './types' + +type LayoutTabProps = { + data: LayoutTabData + value: string +} + +const renderSectionItems = (section: LayoutSection) => { + const ItemTag = section.itemTag ?? 'div' + + return section.items.map((item) => ( + + {item.label} + + )) +} + +export function LayoutTab({ data, value }: LayoutTabProps) { + return ( + + + + {data.title} + + + {data.sections.map((section) => ( +
+

{section.title}

+
+ {renderSectionItems(section)} +
+
+ ))} + +
+ 
{data.codeSample}
+
+ + + + ) +} diff --git a/src/components/sass-styles-showcase/types.ts b/src/components/sass-styles-showcase/types.ts new file mode 100644 index 0000000..99f54a7 --- /dev/null +++ b/src/components/sass-styles-showcase/types.ts @@ -0,0 +1,83 @@ +export type ButtonRowItem = { + label: string + className: string +} + +export type ButtonsTabData = { + label: string + title: string + rows: ButtonRowItem[][] + codeSample: string +} + +export type InputsTabData = { + label: string + title: string + fields: Array<{ placeholder: string; className: string }> + codeSample: string +} + +export type CardsTabData = { + label: string + title: string + items: Array<{ + title: string + description: string + className: string + descriptionClassName: string + }> + codeSample: string +} + +export type ChipsTabData = { + label: string + chipCardTitle: string + chips: Array<{ label: string; className: string; showIcon?: boolean }> + codeSample: string + tagCardTitle: string + tags: Array<{ label: string; className: string }> +} + +export type LayoutSectionItem = { + label: string + className?: string +} + +export type LayoutSection = { + title: string + containerClassName: string + itemTag?: 'div' | 'p' + items: LayoutSectionItem[] +} + +export type LayoutTabData = { + label: string + title: string + sections: LayoutSection[] + codeSample: string +} + +export type AnimationsTabData = { + label: string + title: string + items: Array<{ label: string; className: string }> + codeSample: string + skeletonTitle: string + skeletonClasses: string[] +} + +export type SassStylesShowcaseData = { + page: { + title: string + description: string + } + tabOrder: Array<'buttons' | 'inputs' | 'cards' | 'chips' | 'layout' | 'animations'> + tabs: { + buttons: ButtonsTabData + inputs: InputsTabData + cards: CardsTabData + chips: ChipsTabData + layout: LayoutTabData + animations: AnimationsTabData + } +} diff --git a/src/data/sass-styles-showcase.json b/src/data/sass-styles-showcase.json new file mode 100644 index 0000000..36d42e7 --- /dev/null +++ b/src/data/sass-styles-showcase.json @@ -0,0 +1,227 @@ +{ + "page": { + "title": "Custom Material UI Sass Styles", + "description": "Non-standard Material UI CSS components built with Sass" + }, + "tabOrder": ["buttons", "inputs", "cards", "chips", "layout", "animations"], + "tabs": { + "buttons": { + "label": "Buttons", + "title": "Custom Button Styles", + "rows": [ + [ + { + "label": "Primary Button", + "className": "mui-custom-button mui-custom-button--primary" + }, + { + "label": "Secondary Button", + "className": "mui-custom-button mui-custom-button--secondary" + }, + { + "label": "Accent Button", + "className": "mui-custom-button mui-custom-button--accent" + } + ], + [ + { + "label": "Outline Button", + "className": "mui-custom-button mui-custom-button--outline" + }, + { + "label": "Ghost Button", + "className": "mui-custom-button mui-custom-button--ghost" + } + ] + ], + "codeSample": "\n\n" + }, + "inputs": { + "label": "Inputs", + "title": "Custom Input Styles", + "fields": [ + { + "placeholder": "Default input", + "className": "mui-custom-input w-full" + }, + { + "placeholder": "Error state", + "className": "mui-custom-input mui-custom-input--error w-full" + }, + { + "placeholder": "Success state", + "className": "mui-custom-input mui-custom-input--success w-full" + } + ], + "codeSample": "\n\n" + }, + "cards": { + "label": "Cards", + "title": "Custom Card Styles", + "items": [ + { + "title": "Standard Card", + "description": "Basic card with elevation and hover effect", + "className": "mui-custom-card p-6", + "descriptionClassName": "text-sm text-muted-foreground" + }, + { + "title": "Gradient Card", + "description": "Card with gradient background", + "className": "mui-custom-card mui-custom-card--gradient p-6", + "descriptionClassName": "text-sm opacity-90" + }, + { + "title": "Glass Card", + "description": "Glassmorphism effect card", + "className": "mui-custom-card mui-custom-card--glass p-6", + "descriptionClassName": "text-sm text-muted-foreground" + } + ], + "codeSample": "
\n Standard Card\n
\n\n
\n Gradient Card\n
\n\n
\n Glass Card\n
" + }, + "chips": { + "label": "Chips", + "chipCardTitle": "Custom Chip/Badge Styles", + "chips": [ + { + "label": "Primary", + "className": "mui-custom-chip mui-custom-chip--primary" + }, + { + "label": "Secondary", + "className": "mui-custom-chip mui-custom-chip--secondary" + }, + { + "label": "Accent", + "className": "mui-custom-chip mui-custom-chip--accent" + }, + { + "label": "Success", + "className": "mui-custom-chip mui-custom-chip--success", + "showIcon": true + }, + { + "label": "Error", + "className": "mui-custom-chip mui-custom-chip--error" + }, + { + "label": "Warning", + "className": "mui-custom-chip mui-custom-chip--warning" + } + ], + "codeSample": "\n Primary\n\n\n\n \n Success\n", + "tagCardTitle": "Custom Tags", + "tags": [ + { + "label": "Default", + "className": "custom-mui-tag" + }, + { + "label": "Small", + "className": "custom-mui-tag custom-mui-tag--sm" + }, + { + "label": "Large", + "className": "custom-mui-tag custom-mui-tag--lg" + } + ] + }, + "layout": { + "label": "Layout", + "title": "Custom Layout Components", + "sections": [ + { + "title": "Custom Stack", + "containerClassName": "custom-mui-stack custom-mui-stack--gap-3", + "itemTag": "div", + "items": [ + { + "label": "Item 1", + "className": "p-4 bg-card border rounded" + }, + { + "label": "Item 2", + "className": "p-4 bg-card border rounded" + }, + { + "label": "Item 3", + "className": "p-4 bg-card border rounded" + } + ] + }, + { + "title": "Custom Grid (Responsive)", + "containerClassName": "custom-mui-grid custom-mui-grid--responsive", + "itemTag": "div", + "items": [ + { + "label": "Grid 1", + "className": "p-4 bg-card border rounded" + }, + { + "label": "Grid 2", + "className": "p-4 bg-card border rounded" + }, + { + "label": "Grid 3", + "className": "p-4 bg-card border rounded" + }, + { + "label": "Grid 4", + "className": "p-4 bg-card border rounded" + } + ] + }, + { + "title": "Custom Surface", + "containerClassName": "custom-mui-surface custom-mui-surface--interactive", + "itemTag": "p", + "items": [ + { + "label": "Interactive surface with hover effects" + } + ] + } + ], + "codeSample": "
\n
Item 1
\n
Item 2
\n
\n\n
\n
Grid Item
\n
" + }, + "animations": { + "label": "Animations", + "title": "Animation Classes", + "items": [ + { + "label": "Fade In", + "className": "p-4 bg-card border rounded animate-fade-in" + }, + { + "label": "Slide Up", + "className": "p-4 bg-card border rounded animate-slide-in-up" + }, + { + "label": "Scale In", + "className": "p-4 bg-card border rounded animate-scale-in" + }, + { + "label": "Pulse", + "className": "p-4 bg-card border rounded animate-pulse" + }, + { + "label": "Bounce", + "className": "p-4 bg-card border rounded animate-bounce" + }, + { + "label": "Float", + "className": "p-4 bg-card border rounded animate-float" + } + ], + "codeSample": "
Fade In
\n
Slide Up
\n
Pulse
\n
Bounce
", + "skeletonTitle": "Skeleton Loading", + "skeletonClasses": [ + "mui-custom-skeleton mui-custom-skeleton--text", + "mui-custom-skeleton mui-custom-skeleton--text", + "mui-custom-skeleton mui-custom-skeleton--rect" + ] + } + } +}