react-vite-themes
Version:
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.
162 lines (157 loc) • 18.6 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Link } from 'react-router-dom';
import { Footer } from '../../components/organisms/Footer';
import { Card } from '../../components/atoms/Card';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { Icon } from '../../components/atoms/Icon';
import './ComponentDocumentation.scss';
const FooterDocumentation = () => {
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: "Footer Component" }), _jsx("p", { className: "component-description", children: "A comprehensive footer component with multiple sections, social links, and a back-to-top button." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { Footer } from 'react-vite-themes';", language: "typescript" })] }), _jsxs("section", { className: "usage-section", children: [_jsx("h2", { children: "Basic Usage" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsx(Footer, { companyName: "Your Company", companyDescription: "Building amazing experiences with modern web technologies." }) }), _jsx(CodeBlock, { code: `import { Footer } from 'react-vite-themes';
function App() {
return (
<div className="min-h-screen flex flex-col">
{/* Your main content */}
<main className="flex-1">
{/* Page content */}
</main>
<Footer
companyName="Your Company"
companyDescription="Building amazing experiences with modern web technologies."
/>
</div>
);
}`, language: "tsx" })] })] }), _jsxs("section", { className: "props-section", children: [_jsx("h2", { children: "Props" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "props-card", children: [_jsx("h3", { children: "FooterProps" }), _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: _jsx("code", { children: "sections" }) }), _jsx("td", { children: _jsx("code", { children: "FooterSection[]" }) }), _jsx("td", { children: _jsx("code", { children: "[]" }) }), _jsx("td", { children: "Array of footer sections with links" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "companyName" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "'Your Company'" }) }), _jsx("td", { children: "Company name displayed in footer" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "companyDescription" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "'Building amazing experiences...'" }) }), _jsx("td", { children: "Company description" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "socialLinks" }) }), _jsx("td", { children: _jsx("code", { children: "FooterLink[]" }) }), _jsx("td", { children: _jsx("code", { children: "[]" }) }), _jsx("td", { children: "Array of social media links" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "copyrightText" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Custom copyright text (auto-generated if not provided)" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "className" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "''" }) }), _jsx("td", { children: "Additional CSS classes" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "showBackToTop" }) }), _jsx("td", { children: _jsx("code", { children: "boolean" }) }), _jsx("td", { children: _jsx("code", { children: "true" }) }), _jsx("td", { children: "Whether to show back-to-top button" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "container" }) }), _jsx("td", { children: _jsx("code", { children: "boolean" }) }), _jsx("td", { children: _jsx("code", { children: "true" }) }), _jsx("td", { children: "Whether to wrap content in container class" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "onBackToTop" }) }), _jsx("td", { children: _jsx("code", { children: '() => void' }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Custom back-to-top handler" })] })] })] }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "props-card", children: [_jsx("h3", { children: "FooterLink" }), _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Property" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "label" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: "Link text" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "href" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: "Link URL" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "external" }) }), _jsx("td", { children: _jsx("code", { children: "boolean" }) }), _jsx("td", { children: "Whether link opens in new tab" })] })] })] }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "props-card", children: [_jsx("h3", { children: "FooterSection" }), _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Property" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "title" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: "Section title" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "links" }) }), _jsx("td", { children: _jsx("code", { children: "FooterLink[]" }) }), _jsx("td", { children: "Array of links in the section" })] })] })] }) })] })] }), _jsxs("section", { className: "examples-section", children: [_jsx("h2", { children: "Examples" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Basic Footer" }), _jsx("div", { className: "example-content", style: { margin: '0 -24px', padding: '24px', background: 'var(--color-background-secondary)', borderRadius: '8px' }, children: _jsx(Footer, { companyName: "My Company", companyDescription: "We build amazing products." }) }), _jsx(CodeBlock, { language: "tsx", code: `<Footer
companyName="My Company"
companyDescription="We build amazing products."
/>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Footer with Sections" }), _jsx("div", { className: "example-content", style: { margin: '0 -24px', padding: '24px', background: 'var(--color-background-secondary)', borderRadius: '8px' }, children: _jsx(Footer, { companyName: "My Company", sections: [
{
title: 'Product',
links: [
{ label: 'Features', href: '/features' },
{ label: 'Pricing', href: '/pricing' }
]
},
{
title: 'Support',
links: [
{ label: 'Help Center', href: '/help' },
{ label: 'Contact', href: '/contact' }
]
}
] }) }), _jsx(CodeBlock, { language: "tsx", code: `<Footer
companyName="My Company"
sections={[
{
title: 'Product',
links: [
{ label: 'Features', href: '/features' },
{ label: 'Pricing', href: '/pricing' }
]
},
{
title: 'Support',
links: [
{ label: 'Help Center', href: '/help' },
{ label: 'Contact', href: '/contact' }
]
}
]}
/>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Footer with Social Links" }), _jsx("div", { className: "example-content", style: { margin: '0 -24px', padding: '24px', background: 'var(--color-background-secondary)', borderRadius: '8px' }, children: _jsx(Footer, { companyName: "My Company", socialLinks: [
{ label: 'Twitter', href: 'https://twitter.com/company', external: true },
{ label: 'GitHub', href: 'https://github.com/company', external: true }
] }) }), _jsx(CodeBlock, { language: "tsx", code: `<Footer
companyName="My Company"
socialLinks={[
{ label: 'Twitter', href: 'https://twitter.com/company', external: true },
{ label: 'GitHub', href: 'https://github.com/company', external: true }
]
/>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Complete Footer Example" }), _jsx("div", { className: "example-content", style: { margin: '0 -24px', padding: '24px', background: 'var(--color-background-secondary)', borderRadius: '8px' }, children: _jsx(Footer, { sections: [
{
title: 'Product',
links: [
{ label: 'Features', href: '/features' },
{ label: 'Pricing', href: '/pricing' },
{ label: 'Documentation', href: '/docs' },
{ label: 'API Reference', href: '/api' }
]
},
{
title: 'Company',
links: [
{ label: 'About', href: '/about' },
{ label: 'Blog', href: '/blog' },
{ label: 'Careers', href: '/careers' },
{ label: 'Contact', href: '/contact' }
]
},
{
title: 'Support',
links: [
{ label: 'Help Center', href: '/help' },
{ label: 'Community', href: '/community' },
{ label: 'Status', href: '/status' },
{ label: 'Security', href: '/security' }
]
}
], companyName: "React Vite Themes", companyDescription: "A comprehensive theme system for React applications built with Vite.", socialLinks: [
{ label: 'Twitter', href: 'https://twitter.com/company', external: true },
{ label: 'GitHub', href: 'https://github.com/company', external: true },
{ label: 'LinkedIn', href: 'https://linkedin.com/company', external: true },
{ label: 'Discord', href: 'https://discord.gg/company', external: true }
], showBackToTop: true }) }), _jsx(CodeBlock, { language: "tsx", code: `const footerSections = [
{
title: 'Product',
links: [
{ label: 'Features', href: '/features' },
{ label: 'Pricing', href: '/pricing' },
{ label: 'Documentation', href: '/docs' },
{ label: 'API Reference', href: '/api' }
]
},
{
title: 'Company',
links: [
{ label: 'About', href: '/about' },
{ label: 'Blog', href: '/blog' },
{ label: 'Careers', href: '/careers' },
{ label: 'Contact', href: '/contact' }
]
},
{
title: 'Support',
links: [
{ label: 'Help Center', href: '/help' },
{ label: 'Community', href: '/community' },
{ label: 'Status', href: '/status' },
{ label: 'Security', href: '/security' }
]
}
];
const socialLinks = [
{ label: 'Twitter', href: 'https://twitter.com/company', external: true },
{ label: 'GitHub', href: 'https://github.com/company', external: true },
{ label: 'LinkedIn', href: 'https://linkedin.com/company', external: true },
{ label: 'Discord', href: 'https://discord.gg/company', external: true }
];
<Footer
sections={footerSections}
companyName="React Vite Themes"
companyDescription="A comprehensive theme system for React applications built with Vite."
socialLinks={socialLinks}
showBackToTop={true}
/>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Custom Back to Top Handler" }), _jsx(CodeBlock, { language: "tsx", code: `<Footer
companyName="My Company"
onBackToTop={() => {
// Custom scroll behavior
document.getElementById('main-content')?.scrollIntoView({
behavior: 'smooth'
});
}}
/>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Footer Without Container" }), _jsx("div", { className: "example-content", style: { margin: '0 -24px', padding: '24px', background: 'var(--color-background-secondary)', borderRadius: '8px' }, children: _jsx(Footer, { companyName: "My Company", container: false, companyDescription: "Full-width footer without container constraints." }) }), _jsx(CodeBlock, { language: "tsx", code: `<Footer
companyName="My Company"
container={false}
companyDescription="Full-width footer without container constraints."
/>` })] })] }), _jsxs("section", { className: "styling-section", children: [_jsx("h2", { children: "Styling" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "styling-card", children: [_jsx("p", { children: "The footer uses CSS custom properties for theming and includes:" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "Responsive grid layout" }), " that adapts to screen size"] }), _jsxs("li", { children: [_jsx("strong", { children: "Hover effects" }), " on links and social buttons"] }), _jsxs("li", { children: [_jsx("strong", { children: "Smooth animations" }), " for interactions"] }), _jsxs("li", { children: [_jsx("strong", { children: "Focus states" }), " for accessibility"] }), _jsxs("li", { children: [_jsx("strong", { children: "Theme-aware colors" }), " that work with light/dark modes"] })] }), _jsx("h3", { children: "CSS Classes" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("code", { children: ".footer" }), " - Main footer container"] }), _jsxs("li", { children: [_jsx("code", { children: ".footer-content" }), " - Content wrapper"] }), _jsxs("li", { children: [_jsx("code", { children: ".footer-main" }), " - Main footer section"] }), _jsxs("li", { children: [_jsx("code", { children: ".footer-brand" }), " - Company info section"] }), _jsxs("li", { children: [_jsx("code", { children: ".footer-sections" }), " - Links sections container"] }), _jsxs("li", { children: [_jsx("code", { children: ".footer-section" }), " - Individual link section"] }), _jsxs("li", { children: [_jsx("code", { children: ".footer-bottom" }), " - Copyright and back-to-top section"] })] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "accessibility-card", children: _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "Semantic HTML" }), " with proper heading hierarchy"] }), _jsxs("li", { children: [_jsx("strong", { children: "Keyboard navigation" }), " support"] }), _jsxs("li", { children: [_jsx("strong", { children: "Screen reader" }), " friendly with proper ARIA labels"] }), _jsxs("li", { children: [_jsx("strong", { children: "Focus indicators" }), " for interactive elements"] }), _jsxs("li", { children: [_jsx("strong", { children: "External link indicators" }), " for social media links"] })] }) })] }), _jsxs("section", { className: "browser-support-section", children: [_jsx("h2", { children: "Browser Support" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "browser-support-card", children: _jsxs("ul", { children: [_jsx("li", { children: "Modern browsers with CSS Grid support" }), _jsx("li", { children: "Graceful degradation for older browsers" }), _jsx("li", { children: "Print styles that hide the footer" })] }) })] })] }) }));
};
export default FooterDocumentation;