react-vite-themes/dist/pages/Documentation/CardDocumentation.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Link } from 'react-router-dom';
import { Card } from '../../components/atoms/Card';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { Button } from '../../components/atoms/Button';
import { Icon } from '../../components/atoms/Icon';
import { Badge } from '../../components/atoms/Badge';
import { Alert } from '../../components/atoms/Alert';
import './ComponentDocumentation.scss';
const CardDocumentation = () => {
    const variants = [
        { name: 'primary', description: 'Primary themed card' },
        { name: 'secondary', description: 'Secondary themed card' },
        { name: 'success', description: 'Success themed card' },
        { name: 'danger', description: 'Danger themed card' },
        { name: 'warning', description: 'Warning themed card' },
        { name: 'info', description: 'Info themed card' },
        { name: 'light', description: 'Light themed card' },
        { name: 'dark', description: 'Dark themed card' },
        { name: 'neutral', description: 'Neutral themed card (default)' }
    ];
    const styles = [
        { name: 'elevated', description: 'Card with shadow and elevation' },
        { name: 'outline', description: 'Card with border outline' },
        { name: 'filled', description: 'Card with filled background' },
        { name: 'glass', description: 'Glass morphism effect' },
        { name: 'bordered', description: 'Card with prominent border' }
    ];
    const paddingSizes = [
        { name: 'xs', description: 'Extra small padding' },
        { name: 'sm', description: 'Small padding' },
        { name: 'md', description: 'Medium padding (default)' },
        { name: 'lg', description: 'Large padding' },
        { name: 'xl', description: 'Extra large padding' }
    ];
    return (_jsx("div", { className: "component-documentation", children: _jsxs("div", { className: "container", children: [_jsxs("div", { className: "doc-header", children: [_jsxs(Link, { to: "/documentation", className: "back-link", children: [_jsx(Icon, { name: "arrow-left", size: "sm" }), "Back to Documentation"] }), _jsx("h1", { children: "Card Component" }), _jsx("p", { className: "component-description", children: "A flexible card component for displaying content with various styles, variants, and layouts. Supports headers, footers, images, and hover effects." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { { Card } } from '../../components/atoms/Card';", language: "typescript" })] }), _jsxs("section", { className: "usage-section", children: [_jsx("h2", { children: "Basic Usage" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsxs(Card, { variant: "primary", style: "elevated", children: [_jsx("h3", { children: "Primary Card" }), _jsx("p", { children: "This is a basic card with primary variant and elevated style." })] }), _jsxs(Card, { variant: "secondary", style: "outline", children: [_jsx("h3", { children: "Secondary Card" }), _jsx("p", { children: "This is a card with secondary variant and outline style." })] }), _jsxs(Card, { variant: "success", style: "filled", children: [_jsx("h3", { children: "Success Card" }), _jsx("p", { children: "This is a card with success variant and filled style." })] })] }), _jsx(CodeBlock, { code: `<Card variant="primary" style="elevated">
  <h3>Primary Card</h3>
  <p>This is a basic card with primary variant and elevated style.</p>
</Card>

<Card variant="secondary" style="outline">
  <h3>Secondary Card</h3>
  <p>This is a card with secondary variant and outline style.</p>
</Card>

<Card variant="success" style="filled">
  <h3>Success Card</h3>
  <p>This is a card with success variant and filled style.</p>
</Card>`, language: "tsx" })] })] }), _jsxs("section", { className: "variants-section", children: [_jsx("h2", { children: "Variants" }), _jsx("p", { children: "Card variants define the semantic meaning and color scheme of the card." }), _jsx("div", { className: "variants-grid", children: variants.map((variant) => (_jsxs(Card, { variant: variant.name, style: "elevated", className: "variant-card", children: [_jsx("h3", { children: variant.name.charAt(0).toUpperCase() + variant.name.slice(1) }), _jsx("p", { children: variant.description }), _jsx(CodeBlock, { code: `<Card variant="${variant.name}">${variant.name.charAt(0).toUpperCase() + variant.name.slice(1)} Card</Card>`, language: "tsx" })] }, variant.name))) })] }), _jsxs("section", { className: "styles-section", children: [_jsx("h2", { children: "Styles" }), _jsx("p", { children: "Different styles provide various visual appearances for cards." }), _jsx("div", { className: "styles-grid", children: styles.map((style) => (_jsxs(Card, { variant: "neutral", style: style.name, className: "style-card", children: [_jsx("h3", { children: style.name.charAt(0).toUpperCase() + style.name.slice(1) }), _jsx("p", { children: style.description }), _jsx(CodeBlock, { code: `<Card variant="neutral" style="${style.name}">${style.name.charAt(0).toUpperCase() + style.name.slice(1)} Style</Card>`, language: "tsx" })] }, style.name))) })] }), _jsxs("section", { className: "padding-section", children: [_jsx("h2", { children: "Padding Sizes" }), _jsx("p", { children: "Control the internal spacing of cards using the padding prop." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: paddingSizes.map((size) => (_jsxs(Card, { variant: "primary", style: "elevated", padding: size.name, children: [_jsxs("h4", { children: ["Padding ", size.name.toUpperCase()] }), _jsx("p", { children: size.description })] }, size.name))) }), _jsx(CodeBlock, { code: `<Card variant="primary" padding="xs">Extra Small Padding</Card>
<Card variant="primary" padding="sm">Small Padding</Card>
<Card variant="primary" padding="md">Medium Padding</Card>
<Card variant="primary" padding="lg">Large Padding</Card>
<Card variant="primary" padding="xl">Extra Large Padding</Card>`, language: "tsx" })] })] }), _jsxs("section", { className: "header-footer-section", children: [_jsx("h2", { children: "Headers and Footers" }), _jsx("p", { children: "Add headers and footers to organize card content." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Card, { variant: "primary", style: "elevated", header: _jsx("h3", { children: "Card Header" }), children: _jsx("p", { children: "This card has a header section." }) }), _jsx(Card, { variant: "secondary", style: "elevated", footer: _jsx(Button, { variant: "primary", size: "sm", children: "Action" }), children: _jsx("p", { children: "This card has a footer section with a button." }) }), _jsx(Card, { variant: "success", style: "elevated", header: _jsx("h3", { children: "Card with Both" }), footer: _jsx("div", { children: _jsx(Badge, { variant: "success", children: "Status" }) }), children: _jsx("p", { children: "This card has both header and footer sections." }) })] }), _jsx(CodeBlock, { code: `<Card variant="primary" header={<h3>Card Header</h3>}>
  <p>This card has a header section.</p>
</Card>

<Card variant="secondary" footer={<Button variant="primary">Action</Button>}>
  <p>This card has a footer section with a button.</p>
</Card>

<Card 
  variant="success" 
  header={<h3>Card with Both</h3>}
  footer={<div><Badge variant="success">Status</Badge></div>}
>
  <p>This card has both header and footer sections.</p>
</Card>`, language: "tsx" })] })] }), _jsxs("section", { className: "images-section", children: [_jsx("h2", { children: "Images" }), _jsx("p", { children: "Add images to cards with various display options." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsxs(Card, { variant: "primary", style: "elevated", image: {
                                                src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
                                                alt: "Dashboard interface",
                                                height: "200px"
                                            }, children: [_jsx("h3", { children: "Card with Image" }), _jsx("p", { children: "This card includes an image at the top." })] }), _jsxs(Card, { variant: "secondary", style: "elevated", image: {
                                                src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
                                                alt: "Dashboard interface",
                                                height: "150px",
                                                objectFit: "cover"
                                            }, children: [_jsx("h3", { children: "Cover Image" }), _jsx("p", { children: "This card uses cover object-fit for the image." })] })] }), _jsx(CodeBlock, { code: `<Card 
  variant="primary" 
  image={{
    src: "https://example.com/image.jpg",
    alt: "Card image",
    height: "200px"
  }}
>
  <h3>Card with Image</h3>
  <p>This card includes an image at the top.</p>
</Card>`, language: "tsx" })] })] }), _jsxs("section", { className: "hover-section", children: [_jsx("h2", { children: "Hover Effects" }), _jsx("p", { children: "Enable hover effects to make cards interactive." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsxs(Card, { variant: "primary", style: "elevated", isHoverable: true, children: [_jsx("h3", { children: "Hoverable Card" }), _jsx("p", { children: "Hover over this card to see the effect." })] }), _jsxs(Card, { variant: "secondary", style: "outline", isHoverable: true, children: [_jsx("h3", { children: "Outline Hover" }), _jsx("p", { children: "This outline card also has hover effects." })] }), _jsxs(Card, { variant: "success", style: "glass", isHoverable: true, children: [_jsx("h3", { children: "Glass Hover" }), _jsx("p", { children: "Glass cards with hover effects look great." })] })] }), _jsx(CodeBlock, { code: `<Card variant="primary" style="elevated" isHoverable>
  <h3>Hoverable Card</h3>
  <p>Hover over this card to see the effect.</p>
</Card>

<Card variant="secondary" style="outline" isHoverable>
  <h3>Outline Hover</h3>
  <p>This outline card also has hover effects.</p>
</Card>`, language: "tsx" })] })] }), _jsxs("section", { className: "complex-examples-section", children: [_jsx("h2", { children: "Complex Examples" }), _jsx("p", { children: "Real-world examples of card usage patterns." }), _jsxs("div", { className: "complex-examples-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Product Card" }), _jsxs(Card, { variant: "primary", style: "elevated", isHoverable: true, image: {
                                                src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
                                                alt: "Product image",
                                                height: "200px"
                                            }, header: _jsx(Badge, { variant: "success", children: "New" }), footer: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { style: { fontWeight: 'bold', fontSize: '1.2rem' }, children: "$99.99" }), _jsx(Button, { variant: "primary", size: "sm", children: "Add to Cart" })] }), children: [_jsx("h4", { children: "Product Name" }), _jsx("p", { children: "This is a product description with details about the item." }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem', marginTop: '1rem' }, children: [_jsx(Badge, { variant: "primary", size: "sm", children: "Category" }), _jsx(Badge, { variant: "secondary", size: "sm", children: "In Stock" })] })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "User Profile Card" }), _jsxs(Card, { variant: "secondary", style: "glass", isHoverable: true, image: {
                                                src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
                                                alt: "Profile image",
                                                height: "150px",
                                                objectFit: "cover"
                                            }, header: _jsxs("div", { style: { textAlign: 'center', padding: '1rem' }, children: [_jsx("h4", { children: "John Doe" }), _jsx("p", { style: { color: 'var(--color-text-secondary)', margin: 0 }, children: "Software Developer" })] }), footer: _jsxs("div", { style: { display: 'flex', gap: '0.5rem', justifyContent: 'center' }, children: [_jsx(Button, { variant: "primary", size: "sm", children: "Follow" }), _jsx(Button, { variant: "secondary", size: "sm", children: "Message" })] }), children: [_jsx("p", { children: "Experienced developer with 5+ years in React and TypeScript." }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem', marginTop: '1rem' }, children: [_jsx(Badge, { variant: "success", size: "sm", children: "React" }), _jsx(Badge, { variant: "info", size: "sm", children: "TypeScript" }), _jsx(Badge, { variant: "warning", size: "sm", children: "Node.js" })] })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Stats Card" }), _jsx(Card, { variant: "success", style: "elevated", isHoverable: true, header: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [_jsx(Icon, { name: "chart", size: "sm" }), _jsx("span", { children: "Monthly Revenue" })] }), footer: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem', color: 'var(--color-success)' }, children: [_jsx(Icon, { name: "arrow-up", size: "sm" }), _jsx("span", { children: "+12.5% from last month" })] }), children: _jsxs("div", { style: { textAlign: 'center', padding: '1rem 0' }, children: [_jsx("div", { style: { fontSize: '2rem', fontWeight: 'bold', marginBottom: '0.5rem' }, children: "$45,678" }), _jsx("p", { style: { margin: 0, color: 'var(--color-text-secondary)' }, children: "Total revenue this month" })] }) })] })] })] }), _jsxs("section", { className: "props-section", children: [_jsx("h2", { children: "Props" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "props-card", children: _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "variant" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'neutral'" }), _jsx("td", { children: "Card variant (primary, secondary, success, danger, warning, info, light, dark, neutral)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "style" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'elevated'" }), _jsx("td", { children: "Card style (elevated, outline, filled, glass, bordered)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "padding" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Padding size (xs, sm, md, lg, xl)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "header" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Header content for the card" })] }), _jsxs("tr", { children: [_jsx("td", { children: "footer" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Footer content for the card" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isHoverable" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Enable hover effects" })] }), _jsxs("tr", { children: [_jsx("td", { children: "image" }), _jsx("td", { children: "object" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Image configuration object" })] }), _jsxs("tr", { children: [_jsx("td", { children: "children" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Card content" })] }), _jsxs("tr", { children: [_jsx("td", { children: "className" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Additional CSS classes" })] })] })] }) }) })] }), _jsxs("section", { className: "image-props-section", children: [_jsx("h2", { children: "Image Props" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "props-card", children: _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "src" }), _jsx("td", { children: "string" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Image source URL" })] }), _jsxs("tr", { children: [_jsx("td", { children: "alt" }), _jsx("td", { children: "string" }), _jsx("td", { children: "''" }), _jsx("td", { children: "Image alt text" })] }), _jsxs("tr", { children: [_jsx("td", { children: "height" }), _jsx("td", { children: "string | number" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Image height" })] }), _jsxs("tr", { children: [_jsx("td", { children: "objectFit" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'cover'" }), _jsx("td", { children: "CSS object-fit property (cover, contain, fill, none, scale-down)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "containFit" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Auto-fit contained images without margins" })] })] })] }) }) })] }), _jsxs("section", { className: "best-practices-section", children: [_jsx("h2", { children: "Best Practices" }), _jsxs("div", { className: "practices-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u2705 Do" }), _jsxs("ul", { children: [_jsx("li", { children: "Use elevated style for primary content cards" }), _jsx("li", { children: "Use outline style for secondary or grouped content" }), _jsx("li", { children: "Use glass style for modern, translucent designs" }), _jsx("li", { children: "Add hover effects for interactive cards" }), _jsx("li", { children: "Use appropriate padding for content density" }), _jsx("li", { children: "Include headers and footers for better organization" }), _jsx("li", { children: "Use images to enhance visual appeal" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u274C Don't" }), _jsxs("ul", { children: [_jsx("li", { children: "Don't nest too many cards deeply" }), _jsx("li", { children: "Don't use too many different variants on one page" }), _jsx("li", { children: "Don't use glass style for important content" }), _jsx("li", { children: "Don't use hover effects for static content" }), _jsx("li", { children: "Don't use very large padding for compact layouts" }), _jsx("li", { children: "Don't use images without proper alt text" }), _jsx("li", { children: "Don't use cards for simple text content" })] })] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs(Alert, { variant: "info", title: "Accessibility Features", children: ["The Card component includes several accessibility features:", _jsxs("ul", { children: [_jsx("li", { children: "Proper semantic structure with header, content, and footer sections" }), _jsx("li", { children: "Keyboard navigation support for interactive cards" }), _jsx("li", { children: "Focus management for hoverable cards" }), _jsx("li", { children: "Screen reader support for card content" }), _jsx("li", { children: "High contrast support for all variants and styles" }), _jsx("li", { children: "Proper image alt text handling" })] })] })] })] }) }));
};
export default CardDocumentation;