react-vite-themes/dist/App.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, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { ThemeProvider } from './context/ThemeContext';
import { Navbar } from './components/organisms/Navbar';
import { Footer } from './components/organisms/Footer';
import { ScrollToTop } from './components/atoms/ScrollToTop';
import { Button } from './components/atoms/Button';
import { useTheme } from './hooks/useTheme';
import { Home } from './pages/Home/Home';
import HomePage from './pages/Showcase/HomePage';
import ModulesPage from './pages/Showcase/Modules/ModulesPage';
import { DocumentationLanding, AccordionDocumentation, BadgeDocumentation, BreadcrumbDocumentation, ButtonDocumentation, CardDocumentation, InputDocumentation, AlertDocumentation, ProgressBarDocumentation, ProgressCircleDocumentation, ModalDocumentation, SelectDocumentation, IconDocumentation, StatCardDocumentation, FormDocumentation, FormFieldDocumentation, GroupedInputDocumentation, NavbarDocumentation, SidebarDocumentation, ImageDocumentation, TabsDocumentation, CalendarDocumentation, FooterDocumentation, ToggleDocumentation, CheckboxDocumentation, RadioDocumentation, TypographyDocumentation, RichTextEditorDocumentation, MultiStepFormDocumentation, FormWizardDocumentation, TableDocumentation, PaginationDocumentation, } from './pages/Documentation';
import './styles/main.scss';
// import '../dist/index.css';
// import './styles/layout/index.scss';
const AppContent = () => {
    const { toggleTheme } = useTheme();
    const footerSections = [
        {
            title: 'Product',
            links: [
                { label: 'Features', href: '/features' },
                { label: 'Pricing', href: '/pricing' },
                { label: 'Documentation', href: '/documentation' }
            ]
        },
        {
            title: 'Company',
            links: [
                { label: 'About', href: '/about' },
                { label: 'Blog', href: '/blog' },
                { label: 'Careers', href: '/careers' }
            ]
        },
        {
            title: 'Support',
            links: [
                { label: 'Help Center', href: '/help' },
                { label: 'Community', href: '/community' },
                { label: 'Contact', href: '/contact' }
            ]
        }
    ];
    const socialLinks = [
        { label: 'Twitter', href: 'https://twitter.com/reactvitethemes', external: true },
        { label: 'GitHub', href: 'https://github.com/reactvitethemes', external: true },
        { label: 'LinkedIn', href: 'https://linkedin.com/company/reactvitethemes', external: true }
    ];
    return (_jsxs(_Fragment, { children: [_jsx(ScrollToTop, {}), _jsxs("div", { className: "app min-h-screen flex flex-col", children: [_jsx(Navbar, { brand: "React Theme System", variant: "primary", mobileUserButton: "sidebar", userButtonNavigateTo: "/documentation/buttons", userButtonText: "Components", childrenPosition: "end", navigationLinks: [
                            { path: '/', label: 'Home' },
                            { path: '/showcase', label: 'Landing' },
                            { path: '/documentation', label: 'Documentation' }
                        ] }), _jsx("div", { id: "theme-toggle", children: _jsx(Button, { variant: "primary", colorScheme: "gradient", size: "sm", onClick: toggleTheme, children: "Toggle Theme" }) }), _jsx("main", { className: "flex-1", children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Home, {}) }), _jsx(Route, { path: "/showcase", element: _jsx(HomePage, {}) }), _jsx(Route, { path: "/showcase/modules", element: _jsx(ModulesPage, {}) }), _jsx(Route, { path: "/documentation", element: _jsx(DocumentationLanding, {}) }), _jsx(Route, { path: "/documentation/accordion", element: _jsx(AccordionDocumentation, {}) }), _jsx(Route, { path: "/documentation/badge", element: _jsx(BadgeDocumentation, {}) }), _jsx(Route, { path: "/documentation/breadcrumb", element: _jsx(BreadcrumbDocumentation, {}) }), _jsx(Route, { path: "/documentation/button", element: _jsx(ButtonDocumentation, {}) }), _jsx(Route, { path: "/documentation/card", element: _jsx(CardDocumentation, {}) }), _jsx(Route, { path: "/documentation/input", element: _jsx(InputDocumentation, {}) }), _jsx(Route, { path: "/documentation/grouped-input", element: _jsx(GroupedInputDocumentation, {}) }), _jsx(Route, { path: "/documentation/alert", element: _jsx(AlertDocumentation, {}) }), _jsx(Route, { path: "/documentation/badge", element: _jsx(BadgeDocumentation, {}) }), _jsx(Route, { path: "/documentation/progress-bar", element: _jsx(ProgressBarDocumentation, {}) }), _jsx(Route, { path: "/documentation/progress-circle", element: _jsx(ProgressCircleDocumentation, {}) }), _jsx(Route, { path: "/documentation/modal", element: _jsx(ModalDocumentation, {}) }), _jsx(Route, { path: "/documentation/select", element: _jsx(SelectDocumentation, {}) }), _jsx(Route, { path: "/documentation/icon", element: _jsx(IconDocumentation, {}) }), _jsx(Route, { path: "/documentation/stat-card", element: _jsx(StatCardDocumentation, {}) }), _jsx(Route, { path: "/documentation/form", element: _jsx(FormDocumentation, {}) }), _jsx(Route, { path: "/documentation/form-field", element: _jsx(FormFieldDocumentation, {}) }), _jsx(Route, { path: "/documentation/navbar", element: _jsx(NavbarDocumentation, {}) }), _jsx(Route, { path: "/documentation/sidebar", element: _jsx(SidebarDocumentation, {}) }), _jsx(Route, { path: "/documentation/image", element: _jsx(ImageDocumentation, {}) }), _jsx(Route, { path: "/documentation/tabs", element: _jsx(TabsDocumentation, {}) }), _jsx(Route, { path: "/documentation/calendar", element: _jsx(CalendarDocumentation, {}) }), _jsx(Route, { path: "/documentation/footer", element: _jsx(FooterDocumentation, {}) }), _jsx(Route, { path: "/documentation/toggle", element: _jsx(ToggleDocumentation, {}) }), _jsx(Route, { path: "/documentation/checkbox", element: _jsx(CheckboxDocumentation, {}) }), _jsx(Route, { path: "/documentation/radio", element: _jsx(RadioDocumentation, {}) }), _jsx(Route, { path: "/documentation/table", element: _jsx(TableDocumentation, {}) }), _jsx(Route, { path: "/documentation/typography", element: _jsx(TypographyDocumentation, {}) }), _jsx(Route, { path: "/documentation/rich-text-editor", element: _jsx(RichTextEditorDocumentation, {}) }), _jsx(Route, { path: "/documentation/multi-step-form", element: _jsx(MultiStepFormDocumentation, {}) }), _jsx(Route, { path: "/documentation/form-wizard", element: _jsx(FormWizardDocumentation, {}) }), _jsx(Route, { path: "/documentation/pagination", element: _jsx(PaginationDocumentation, {}) })] }) }), _jsx(Footer, { sections: footerSections, companyName: "React Vite Themes", companyDescription: "A comprehensive theme system for React applications built with Vite.", socialLinks: socialLinks, showBackToTop: true })] })] }));
};
const App = () => {
    return (_jsx(ThemeProvider, { children: _jsx(Router, { children: _jsx(AppContent, {}) }) }));
};
export default App;