mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-24 13:44:54 +00:00
Merge pull request #36 from johndoe6345789/codex/extract-tabs-into-separate-components
Refactor Sass styles showcase into data-driven tab components
This commit is contained in:
GitHub
@@ -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 (
|
||||
<div className="h-full p-6 space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-2">Custom Material UI Sass Styles</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Non-standard Material UI CSS components built with Sass
|
||||
</p>
|
||||
<h1 className="text-3xl font-bold mb-2">{data.page.title}</h1>
|
||||
<p className="text-muted-foreground">{data.page.description}</p>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="buttons" className="flex-1">
|
||||
<Tabs defaultValue={data.tabOrder[0]} className="flex-1">
|
||||
<TabsList className="h-auto flex-wrap">
|
||||
<TabsTrigger value="buttons">Buttons</TabsTrigger>
|
||||
<TabsTrigger value="inputs">Inputs</TabsTrigger>
|
||||
<TabsTrigger value="cards">Cards</TabsTrigger>
|
||||
<TabsTrigger value="chips">Chips</TabsTrigger>
|
||||
<TabsTrigger value="layout">Layout</TabsTrigger>
|
||||
<TabsTrigger value="animations">Animations</TabsTrigger>
|
||||
{data.tabOrder.map((tabKey) => (
|
||||
<TabsTrigger key={tabKey} value={tabKey}>
|
||||
{data.tabs[tabKey].label}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="buttons" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Custom Button Styles</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
<button className="mui-custom-button mui-custom-button--primary">
|
||||
Primary Button
|
||||
</button>
|
||||
<button className="mui-custom-button mui-custom-button--secondary">
|
||||
Secondary Button
|
||||
</button>
|
||||
<button className="mui-custom-button mui-custom-button--accent">
|
||||
Accent Button
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
<button className="mui-custom-button mui-custom-button--outline">
|
||||
Outline Button
|
||||
</button>
|
||||
<button className="mui-custom-button mui-custom-button--ghost">
|
||||
Ghost Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{data.tabOrder.map((tabKey) => {
|
||||
const TabComponent = tabContent[tabKey]
|
||||
|
||||
<div className="mt-4">
|
||||
<pre className="custom-mui-code-block">
|
||||
{`<button className="mui-custom-button mui-custom-button--primary">
|
||||
Primary Button
|
||||
</button>
|
||||
|
||||
<button className="mui-custom-button mui-custom-button--accent">
|
||||
Accent Button
|
||||
</button>`}
|
||||
</pre>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="inputs" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Custom Input Styles</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Default input"
|
||||
className="mui-custom-input w-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Error state"
|
||||
className="mui-custom-input mui-custom-input--error w-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Success state"
|
||||
className="mui-custom-input mui-custom-input--success w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<pre className="custom-mui-code-block">
|
||||
{`<input
|
||||
className="mui-custom-input"
|
||||
placeholder="Your input"
|
||||
/>
|
||||
|
||||
<input
|
||||
className="mui-custom-input mui-custom-input--error"
|
||||
placeholder="Error state"
|
||||
/>`}
|
||||
</pre>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="cards" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Custom Card Styles</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="mui-custom-card p-6">
|
||||
<h3 className="font-bold mb-2">Standard Card</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Basic card with elevation and hover effect
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mui-custom-card mui-custom-card--gradient p-6">
|
||||
<h3 className="font-bold mb-2">Gradient Card</h3>
|
||||
<p className="text-sm opacity-90">
|
||||
Card with gradient background
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mui-custom-card mui-custom-card--glass p-6">
|
||||
<h3 className="font-bold mb-2">Glass Card</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Glassmorphism effect card
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<pre className="custom-mui-code-block">
|
||||
{`<div className="mui-custom-card">
|
||||
Standard Card
|
||||
</div>
|
||||
|
||||
<div className="mui-custom-card mui-custom-card--gradient">
|
||||
Gradient Card
|
||||
</div>
|
||||
|
||||
<div className="mui-custom-card mui-custom-card--glass">
|
||||
Glass Card
|
||||
</div>`}
|
||||
</pre>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="chips" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Custom Chip/Badge Styles</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<span className="mui-custom-chip mui-custom-chip--primary">
|
||||
Primary
|
||||
</span>
|
||||
<span className="mui-custom-chip mui-custom-chip--secondary">
|
||||
Secondary
|
||||
</span>
|
||||
<span className="mui-custom-chip mui-custom-chip--accent">
|
||||
Accent
|
||||
</span>
|
||||
<span className="mui-custom-chip mui-custom-chip--success">
|
||||
<CheckCircle size={14} weight="fill" />
|
||||
Success
|
||||
</span>
|
||||
<span className="mui-custom-chip mui-custom-chip--error">
|
||||
Error
|
||||
</span>
|
||||
<span className="mui-custom-chip mui-custom-chip--warning">
|
||||
Warning
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<pre className="custom-mui-code-block">
|
||||
{`<span className="mui-custom-chip mui-custom-chip--primary">
|
||||
Primary
|
||||
</span>
|
||||
|
||||
<span className="mui-custom-chip mui-custom-chip--success">
|
||||
<CheckCircle size={14} />
|
||||
Success
|
||||
</span>`}
|
||||
</pre>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Custom Tags</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<span className="custom-mui-tag">Default</span>
|
||||
<span className="custom-mui-tag custom-mui-tag--sm">Small</span>
|
||||
<span className="custom-mui-tag custom-mui-tag--lg">Large</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="layout" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Custom Layout Components</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3">Custom Stack</h3>
|
||||
<div className="custom-mui-stack custom-mui-stack--gap-3">
|
||||
<div className="p-4 bg-card border rounded">Item 1</div>
|
||||
<div className="p-4 bg-card border rounded">Item 2</div>
|
||||
<div className="p-4 bg-card border rounded">Item 3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3">Custom Grid (Responsive)</h3>
|
||||
<div className="custom-mui-grid custom-mui-grid--responsive">
|
||||
<div className="p-4 bg-card border rounded">Grid 1</div>
|
||||
<div className="p-4 bg-card border rounded">Grid 2</div>
|
||||
<div className="p-4 bg-card border rounded">Grid 3</div>
|
||||
<div className="p-4 bg-card border rounded">Grid 4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3">Custom Surface</h3>
|
||||
<div className="custom-mui-surface custom-mui-surface--interactive">
|
||||
<p>Interactive surface with hover effects</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<pre className="custom-mui-code-block">
|
||||
{`<div className="custom-mui-stack custom-mui-stack--gap-3">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
|
||||
<div className="custom-mui-grid custom-mui-grid--responsive">
|
||||
<div>Grid Item</div>
|
||||
</div>`}
|
||||
</pre>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="animations" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Animation Classes</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<div className="p-4 bg-card border rounded animate-fade-in">
|
||||
Fade In
|
||||
</div>
|
||||
<div className="p-4 bg-card border rounded animate-slide-in-up">
|
||||
Slide Up
|
||||
</div>
|
||||
<div className="p-4 bg-card border rounded animate-scale-in">
|
||||
Scale In
|
||||
</div>
|
||||
<div className="p-4 bg-card border rounded animate-pulse">
|
||||
Pulse
|
||||
</div>
|
||||
<div className="p-4 bg-card border rounded animate-bounce">
|
||||
Bounce
|
||||
</div>
|
||||
<div className="p-4 bg-card border rounded animate-float">
|
||||
Float
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<pre className="custom-mui-code-block">
|
||||
{`<div className="animate-fade-in">Fade In</div>
|
||||
<div className="animate-slide-in-up">Slide Up</div>
|
||||
<div className="animate-pulse">Pulse</div>
|
||||
<div className="animate-bounce">Bounce</div>`}
|
||||
</pre>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Skeleton Loading</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div className="mui-custom-skeleton mui-custom-skeleton--text" />
|
||||
<div className="mui-custom-skeleton mui-custom-skeleton--text" />
|
||||
<div className="mui-custom-skeleton mui-custom-skeleton--rect" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
return <TabComponent key={tabKey} data={data.tabs[tabKey]} value={tabKey} />
|
||||
})}
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
|
||||
46
src/components/sass-styles-showcase/AnimationsTab.tsx
Normal file
46
src/components/sass-styles-showcase/AnimationsTab.tsx
Normal file
@@ -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 (
|
||||
<TabsContent value={value} className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{data.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{data.items.map((item) => (
|
||||
<div key={item.label} className={item.className}>
|
||||
{item.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<pre className="custom-mui-code-block">{data.codeSample}</pre>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{data.skeletonTitle}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
{data.skeletonClasses.map((className, index) => (
|
||||
<div key={`skeleton-${index}`} className={className} />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
)
|
||||
}
|
||||
37
src/components/sass-styles-showcase/ButtonsTab.tsx
Normal file
37
src/components/sass-styles-showcase/ButtonsTab.tsx
Normal file
@@ -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 (
|
||||
<TabsContent value={value} className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{data.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
{data.rows.map((row, rowIndex) => (
|
||||
<div key={`button-row-${rowIndex}`} className="flex gap-3 flex-wrap">
|
||||
{row.map((button) => (
|
||||
<button key={button.label} className={button.className}>
|
||||
{button.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<pre className="custom-mui-code-block">{data.codeSample}</pre>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
)
|
||||
}
|
||||
34
src/components/sass-styles-showcase/CardsTab.tsx
Normal file
34
src/components/sass-styles-showcase/CardsTab.tsx
Normal file
@@ -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 (
|
||||
<TabsContent value={value} className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{data.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{data.items.map((item) => (
|
||||
<div key={item.title} className={item.className}>
|
||||
<h3 className="font-bold mb-2">{item.title}</h3>
|
||||
<p className={item.descriptionClassName}>{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<pre className="custom-mui-code-block">{data.codeSample}</pre>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
)
|
||||
}
|
||||
51
src/components/sass-styles-showcase/ChipsTab.tsx
Normal file
51
src/components/sass-styles-showcase/ChipsTab.tsx
Normal file
@@ -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 (
|
||||
<TabsContent value={value} className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{data.chipCardTitle}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{data.chips.map((chip) => (
|
||||
<span key={chip.label} className={chip.className}>
|
||||
{chip.showIcon ? <CheckCircle size={14} weight="fill" /> : null}
|
||||
{chip.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<pre className="custom-mui-code-block">{data.codeSample}</pre>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{data.tagCardTitle}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{data.tags.map((tag) => (
|
||||
<span key={tag.label} className={tag.className}>
|
||||
{tag.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
)
|
||||
}
|
||||
36
src/components/sass-styles-showcase/InputsTab.tsx
Normal file
36
src/components/sass-styles-showcase/InputsTab.tsx
Normal file
@@ -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 (
|
||||
<TabsContent value={value} className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{data.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
{data.fields.map((field) => (
|
||||
<input
|
||||
key={field.placeholder}
|
||||
type="text"
|
||||
placeholder={field.placeholder}
|
||||
className={field.className}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<pre className="custom-mui-code-block">{data.codeSample}</pre>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
)
|
||||
}
|
||||
44
src/components/sass-styles-showcase/LayoutTab.tsx
Normal file
44
src/components/sass-styles-showcase/LayoutTab.tsx
Normal file
@@ -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) => (
|
||||
<ItemTag key={item.label} className={item.className}>
|
||||
{item.label}
|
||||
</ItemTag>
|
||||
))
|
||||
}
|
||||
|
||||
export function LayoutTab({ data, value }: LayoutTabProps) {
|
||||
return (
|
||||
<TabsContent value={value} className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{data.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{data.sections.map((section) => (
|
||||
<div key={section.title}>
|
||||
<h3 className="font-semibold mb-3">{section.title}</h3>
|
||||
<div className={section.containerClassName}>
|
||||
{renderSectionItems(section)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="mt-4">
|
||||
<pre className="custom-mui-code-block">{data.codeSample}</pre>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
)
|
||||
}
|
||||
83
src/components/sass-styles-showcase/types.ts
Normal file
83
src/components/sass-styles-showcase/types.ts
Normal file
@@ -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
|
||||
}
|
||||
}
|
||||
227
src/data/sass-styles-showcase.json
Normal file
227
src/data/sass-styles-showcase.json
Normal file
@@ -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": "<button className=\"mui-custom-button mui-custom-button--primary\">\n Primary Button\n</button>\n\n<button className=\"mui-custom-button mui-custom-button--accent\">\n Accent Button\n</button>"
|
||||
},
|
||||
"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": "<input\n className=\"mui-custom-input\"\n placeholder=\"Your input\"\n/>\n\n<input\n className=\"mui-custom-input mui-custom-input--error\"\n placeholder=\"Error state\"\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": "<div className=\"mui-custom-card\">\n Standard Card\n</div>\n\n<div className=\"mui-custom-card mui-custom-card--gradient\">\n Gradient Card\n</div>\n\n<div className=\"mui-custom-card mui-custom-card--glass\">\n Glass Card\n</div>"
|
||||
},
|
||||
"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": "<span className=\"mui-custom-chip mui-custom-chip--primary\">\n Primary\n</span>\n\n<span className=\"mui-custom-chip mui-custom-chip--success\">\n <CheckCircle size={14} />\n Success\n</span>",
|
||||
"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": "<div className=\"custom-mui-stack custom-mui-stack--gap-3\">\n <div>Item 1</div>\n <div>Item 2</div>\n</div>\n\n<div className=\"custom-mui-grid custom-mui-grid--responsive\">\n <div>Grid Item</div>\n</div>"
|
||||
},
|
||||
"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": "<div className=\"animate-fade-in\">Fade In</div>\n<div className=\"animate-slide-in-up\">Slide Up</div>\n<div className=\"animate-pulse\">Pulse</div>\n<div className=\"animate-bounce\">Bounce</div>",
|
||||
"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"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user