migration wip
This commit is contained in:
431
components/ui/ComponentsExample.tsx
Normal file
431
components/ui/ComponentsExample.tsx
Normal file
@@ -0,0 +1,431 @@
|
||||
/**
|
||||
* UI Components Example
|
||||
*
|
||||
* This file demonstrates how to use all the UI components in the design system.
|
||||
* Each component is shown with various props and configurations.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
CardImage,
|
||||
Container,
|
||||
Grid,
|
||||
GridItem,
|
||||
Badge,
|
||||
BadgeGroup,
|
||||
Loading,
|
||||
LoadingButton,
|
||||
LoadingSkeleton,
|
||||
} from './index';
|
||||
|
||||
// Example Icons (using simple SVG)
|
||||
const ArrowRightIcon = () => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const CheckIcon = () => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const StarIcon = () => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
// Button Examples
|
||||
export const ButtonExamples = () => (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold mb-2">Buttons</h3>
|
||||
|
||||
{/* Primary Buttons */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Button variant="primary" size="sm">Small Primary</Button>
|
||||
<Button variant="primary" size="md">Medium Primary</Button>
|
||||
<Button variant="primary" size="lg">Large Primary</Button>
|
||||
<Button variant="primary" icon={<ArrowRightIcon />} iconPosition="right">With Icon</Button>
|
||||
<Button variant="primary" loading>Loading</Button>
|
||||
<Button variant="primary" disabled>Disabled</Button>
|
||||
</div>
|
||||
|
||||
{/* Secondary Buttons */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Button variant="secondary" size="md">Secondary</Button>
|
||||
<Button variant="secondary" icon={<CheckIcon />}>Success</Button>
|
||||
</div>
|
||||
|
||||
{/* Outline Buttons */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Button variant="outline" size="md">Outline</Button>
|
||||
<Button variant="outline" icon={<StarIcon />}>With Icon</Button>
|
||||
</div>
|
||||
|
||||
{/* Ghost Buttons */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Button variant="ghost" size="md">Ghost</Button>
|
||||
<Button variant="ghost" fullWidth>Full Width Ghost</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Card Examples
|
||||
export const CardExamples = () => (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold mb-2">Cards</h3>
|
||||
|
||||
<Grid cols={1} colsMd={2} gap="md">
|
||||
{/* Basic Card */}
|
||||
<Card variant="elevated" padding="lg">
|
||||
<CardHeader
|
||||
title="Basic Card"
|
||||
subtitle="With header and content"
|
||||
/>
|
||||
<CardBody>
|
||||
<p>This is a basic card with elevated variant. It includes a header, body content, and footer.</p>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Button variant="primary" size="sm">Action</Button>
|
||||
<Button variant="ghost" size="sm">Cancel</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
{/* Card with Image */}
|
||||
<Card variant="flat" padding="none">
|
||||
<CardImage
|
||||
src="https://via.placeholder.com/400x200/0056b3/ffffff?text=Card+Image"
|
||||
alt="Card image"
|
||||
height="md"
|
||||
/>
|
||||
<div className="p-4">
|
||||
<CardHeader
|
||||
title="Card with Image"
|
||||
subtitle="Image at the top"
|
||||
/>
|
||||
<CardBody>
|
||||
<p>Cards can include images for visual appeal.</p>
|
||||
</CardBody>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Bordered Card */}
|
||||
<Card variant="bordered" padding="md">
|
||||
<CardHeader
|
||||
title="Bordered Card"
|
||||
icon={<StarIcon />}
|
||||
action={<Badge variant="success">New</Badge>}
|
||||
/>
|
||||
<CardBody>
|
||||
<p>This card has a strong border and includes an icon in the header.</p>
|
||||
</CardBody>
|
||||
<CardFooter align="right">
|
||||
<Button variant="outline" size="sm">Learn More</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
{/* Hoverable Card */}
|
||||
<Card variant="elevated" padding="lg" hoverable>
|
||||
<CardHeader title="Hoverable Card" />
|
||||
<CardBody>
|
||||
<p>Hover over this card to see the effect!</p>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<BadgeGroup gap="sm">
|
||||
<Badge variant="primary">React</Badge>
|
||||
<Badge variant="secondary">TypeScript</Badge>
|
||||
<Badge variant="info">Tailwind</Badge>
|
||||
</BadgeGroup>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Container Examples
|
||||
export const ContainerExamples = () => (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold mb-2">Containers</h3>
|
||||
|
||||
<Container maxWidth="lg" padding="lg" className="bg-gray-50 rounded-lg">
|
||||
<p className="text-center">Default Container (max-width: lg, padding: lg)</p>
|
||||
</Container>
|
||||
|
||||
<Container maxWidth="md" padding="md" className="bg-accent rounded-lg">
|
||||
<p className="text-center">Medium Container (max-width: md, padding: md)</p>
|
||||
</Container>
|
||||
|
||||
<Container fluid className="bg-primary text-white rounded-lg py-4">
|
||||
<p className="text-center">Fluid Container (full width)</p>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Grid Examples
|
||||
export const GridExamples = () => (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold mb-2">Grid System</h3>
|
||||
|
||||
{/* Basic Grid */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-gray-600">12-column responsive grid:</p>
|
||||
<Grid cols={2} colsMd={4} gap="sm">
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8].map((item) => (
|
||||
<div key={item} className="bg-primary text-white p-4 rounded text-center">
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
{/* Grid with Span */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-gray-600">Grid with column spans:</p>
|
||||
<Grid cols={3} gap="md">
|
||||
<GridItem colSpan={2} className="bg-secondary text-white p-4 rounded">
|
||||
Span 2 columns
|
||||
</GridItem>
|
||||
<GridItem className="bg-accent p-4 rounded">1 column</GridItem>
|
||||
<GridItem className="bg-warning p-4 rounded">1 column</GridItem>
|
||||
<GridItem colSpan={2} className="bg-success text-white p-4 rounded">
|
||||
Span 2 columns
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
{/* Responsive Grid */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-gray-600">Responsive (1 col mobile, 2 tablet, 3 desktop):</p>
|
||||
<Grid cols={1} colsSm={2} colsLg={3} gap="lg">
|
||||
{[1, 2, 3, 4, 5, 6].map((item) => (
|
||||
<div key={item} className="bg-gray-200 p-6 rounded text-center font-medium">
|
||||
Item {item}
|
||||
</div>
|
||||
))}
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Badge Examples
|
||||
export const BadgeExamples = () => (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold mb-2">Badges</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
{/* Badge Variants */}
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-2">Color Variants:</p>
|
||||
<BadgeGroup gap="sm">
|
||||
<Badge variant="primary">Primary</Badge>
|
||||
<Badge variant="secondary">Secondary</Badge>
|
||||
<Badge variant="success">Success</Badge>
|
||||
<Badge variant="warning">Warning</Badge>
|
||||
<Badge variant="error">Error</Badge>
|
||||
<Badge variant="info">Info</Badge>
|
||||
<Badge variant="neutral">Neutral</Badge>
|
||||
</BadgeGroup>
|
||||
</div>
|
||||
|
||||
{/* Badge Sizes */}
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-2">Sizes:</p>
|
||||
<BadgeGroup gap="md">
|
||||
<Badge variant="primary" size="sm">Small</Badge>
|
||||
<Badge variant="primary" size="md">Medium</Badge>
|
||||
<Badge variant="primary" size="lg">Large</Badge>
|
||||
</BadgeGroup>
|
||||
</div>
|
||||
|
||||
{/* Badges with Icons */}
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-2">With Icons:</p>
|
||||
<BadgeGroup gap="sm">
|
||||
<Badge variant="success" icon={<CheckIcon />}>Success</Badge>
|
||||
<Badge variant="primary" icon={<StarIcon />} iconPosition="right">Star</Badge>
|
||||
<Badge variant="warning" icon={<ArrowRightIcon />}>Next</Badge>
|
||||
</BadgeGroup>
|
||||
</div>
|
||||
|
||||
{/* Rounded Badges */}
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-2">Rounded:</p>
|
||||
<BadgeGroup gap="sm">
|
||||
<Badge variant="primary" rounded={true}>Rounded</Badge>
|
||||
<Badge variant="secondary" rounded={false}>Squared</Badge>
|
||||
</BadgeGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Loading Examples
|
||||
export const LoadingExamples = () => (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold mb-2">Loading Components</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Spinner Sizes */}
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-2">Spinner Sizes:</p>
|
||||
<div className="flex gap-4 items-center flex-wrap">
|
||||
<Loading size="sm" />
|
||||
<Loading size="md" />
|
||||
<Loading size="lg" />
|
||||
<Loading size="xl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Spinner Variants */}
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-2">Spinner Variants:</p>
|
||||
<div className="flex gap-4 items-center flex-wrap">
|
||||
<Loading size="md" variant="primary" />
|
||||
<Loading size="md" variant="secondary" />
|
||||
<Loading size="md" variant="neutral" />
|
||||
<Loading size="md" variant="contrast" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading with Text */}
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-2">With Text:</p>
|
||||
<Loading size="md" text="Loading data..." />
|
||||
</div>
|
||||
|
||||
{/* Loading Button */}
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-2">Loading Button:</p>
|
||||
<LoadingButton size="md" text="Processing..." />
|
||||
</div>
|
||||
|
||||
{/* Loading Skeleton */}
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-2">Skeleton Loaders:</p>
|
||||
<div className="space-y-2">
|
||||
<LoadingSkeleton width="100%" height="1rem" />
|
||||
<LoadingSkeleton width="80%" height="1rem" />
|
||||
<LoadingSkeleton width="60%" height="1rem" rounded />
|
||||
<LoadingSkeleton width="100%" height="4rem" rounded />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Combined Example - Full Page Layout
|
||||
export const FullPageExample = () => (
|
||||
<Container maxWidth="6xl" padding="lg">
|
||||
<div className="space-y-8">
|
||||
{/* Header Section */}
|
||||
<div className="text-center space-y-2">
|
||||
<h1 className="text-4xl font-bold text-gray-900">UI Components Showcase</h1>
|
||||
<p className="text-lg text-gray-600">
|
||||
A comprehensive design system for your Next.js application
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Hero Card */}
|
||||
<Card variant="elevated" padding="xl">
|
||||
<CardImage
|
||||
src="https://via.placeholder.com/1200x400/0056b3/ffffff?text=Hero+Image"
|
||||
alt="Hero"
|
||||
height="lg"
|
||||
/>
|
||||
<CardHeader
|
||||
title="Welcome to the Design System"
|
||||
subtitle="Built with accessibility and responsiveness in mind"
|
||||
icon={<StarIcon />}
|
||||
/>
|
||||
<CardBody>
|
||||
<p>
|
||||
This design system provides a complete set of reusable components
|
||||
that follow modern design principles and accessibility standards.
|
||||
</p>
|
||||
</CardBody>
|
||||
<CardFooter align="center">
|
||||
<Button variant="primary" size="lg" icon={<ArrowRightIcon />} iconPosition="right">
|
||||
Get Started
|
||||
</Button>
|
||||
<Button variant="outline" size="lg">Learn More</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
{/* Feature Grid */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4 text-center">Features</h2>
|
||||
<Grid cols={1} colsMd={2} colsLg={3} gap="lg">
|
||||
<Card variant="bordered" padding="md">
|
||||
<CardHeader title="Responsive" icon={<StarIcon />} />
|
||||
<CardBody>
|
||||
<p>Works perfectly on all devices from mobile to desktop.</p>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Badge variant="success">Ready</Badge>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card variant="bordered" padding="md">
|
||||
<CardHeader title="Accessible" icon={<CheckIcon />} />
|
||||
<CardBody>
|
||||
<p>Follows WCAG guidelines with proper ARIA attributes.</p>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Badge variant="info">WCAG 2.1</Badge>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card variant="bordered" padding="md">
|
||||
<CardHeader title="TypeScript" icon={<ArrowRightIcon />} />
|
||||
<CardBody>
|
||||
<p>Fully typed with TypeScript for better developer experience.</p>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Badge variant="primary">TypeScript</Badge>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
{/* Action Section */}
|
||||
<div className="text-center space-y-3">
|
||||
<p className="text-gray-700">Ready to start building?</p>
|
||||
<div className="flex gap-2 justify-center flex-wrap">
|
||||
<Button variant="primary" size="lg">Start Building</Button>
|
||||
<Button variant="secondary" size="lg">View Documentation</Button>
|
||||
<Button variant="ghost" size="lg" icon={<StarIcon />}>Star on GitHub</Button>
|
||||
</div>
|
||||
<BadgeGroup gap="sm" className="justify-center">
|
||||
<Badge variant="primary">React</Badge>
|
||||
<Badge variant="secondary">Next.js</Badge>
|
||||
<Badge variant="info">TypeScript</Badge>
|
||||
<Badge variant="success">Tailwind CSS</Badge>
|
||||
</BadgeGroup>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
|
||||
// Main Export - All Components
|
||||
export const AllComponentsExample = () => {
|
||||
return (
|
||||
<div className="space-y-12 py-8">
|
||||
<ButtonExamples />
|
||||
<CardExamples />
|
||||
<ContainerExamples />
|
||||
<GridExamples />
|
||||
<BadgeExamples />
|
||||
<LoadingExamples />
|
||||
<FullPageExample />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AllComponentsExample;
|
||||
Reference in New Issue
Block a user