diff --git a/lib/components/layout/content.tsx b/lib/components/layout/content.tsx index cbc9c7c..42189ed 100644 --- a/lib/components/layout/content.tsx +++ b/lib/components/layout/content.tsx @@ -12,7 +12,10 @@ const ContentContainer = forwardRef< return (
{children} diff --git a/lib_public/elter_setup.css b/lib_public/elter_setup.css index ac0885f..12129ea 100644 --- a/lib_public/elter_setup.css +++ b/lib_public/elter_setup.css @@ -30,8 +30,8 @@ /* Surfaces */ --background: #f0f0f5; /* --base-50 */ - --surface: #e3e3e8 ; /* --base-100 */ - --surface-raised: #c9c9cf; /* --base-200 */ + --surface: #e8e8ed ; /* --base-100 */ + --surface-raised: #dbdbe1; /* --base-200 */ /* Text */ --text: #0a2033; /* --base-950 */ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 6387184..62c6948 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -33,9 +33,16 @@ import { ThemeProvider } from "../components/ThemeProvider"; import { ThemeSelector } from "../components/ThemeSelector"; import { ThemeInitializer } from "../components/ThemeInitializer"; import { SearchTrigger } from "../components/search/SearchTrigger"; +import { MobileNav } from "../components/MobileNav"; import { Button } from "../../lib/components/primitives/button"; import { Package } from "lucide-react"; +const NAV_ITEMS = [ + { href: "/", label: "Home" }, + { href: "/docs/foundations", label: "Foundations" }, + { href: "/docs/components", label: "Components" }, +]; + const inter = Inter({ subsets: ["latin"] }); // Roboto powers the EOSC theme; Montserrat is used for ELTER headings. @@ -118,7 +125,7 @@ export default function RootLayout({ className="hidden h-20 w-auto dark:block" /> - + Home @@ -137,35 +144,38 @@ export default function RootLayout({ - - - - - - - - +
+ + + + + + + + +
+ diff --git a/src/components/ComponentShowcase.tsx b/src/components/ComponentShowcase.tsx deleted file mode 100644 index a721712..0000000 --- a/src/components/ComponentShowcase.tsx +++ /dev/null @@ -1,1458 +0,0 @@ -import { useState } from "react"; -import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, - Alert, - AlertDescription, - AlertTitle, - AlertDialog, - AlertDialogAction, - AlertDialogCancel, - AlertDialogContent, - AlertDialogDescription, - AlertDialogFooter, - AlertDialogHeader, - AlertDialogTitle, - AlertDialogTrigger, - AspectRatio, - Avatar, - AvatarFallback, - AvatarImage, - Badge, - Breadcrumb, - BreadcrumbItem, - BreadcrumbLink, - BreadcrumbList, - BreadcrumbPage, - BreadcrumbSeparator, - Button, - Calendar, - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, - Carousel, - CarouselContent, - CarouselItem, - CarouselNext, - CarouselPrevious, - Checkbox, - Collapsible, - CollapsibleContent, - CollapsibleTrigger, - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, - Input, - Label, - Progress, - RadioGroup, - RadioGroupItem, - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, - Separator, - Skeleton, - Slider, - Stepper, - StepperContent, - StepperFooter, - StepperHeader, - Switch, - Table, - TableBody, - TableCaption, - TableCell, - TableHead, - TableHeader, - TableRow, - Tabs, - TabsContent, - TabsList, - TabsTrigger, - Textarea, - Toggle, - ToggleGroup, - ToggleGroupItem, - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, - H1, - H2, - H3, - H4, - P, - Strong, - Small, - Muted, - Code, - Link as DesignLink, - Content, - ContentBody, - ContentHeading, - PanelHeader, - Panel, - PanelTitle, - PanelDescription, - PanelContent, - PanelFooter, -} from "../../lib/components/index"; -import { toast } from "sonner"; -import { - Info, - ChevronDown, - Bold, - Italic, - Underline, - CircleCheck, - CircleAlert, - CircleX, -} from "lucide-react"; -import Image from "next/image"; - -// Component copy helper -const ComponentCopySelect = ({ - components, -}: { - components: { name: string; description?: string; import: string }[]; -}) => { - const handleCopy = (importStatement: string, componentName: string) => { - void navigator.clipboard.writeText(importStatement).then(() => { - toast.success("Copied to clipboard!", { - description: `Component ${componentName} import copied.`, - }); - }); - }; - - return ( - - - - - - {components.map((comp) => ( - { - handleCopy(comp.import, comp.name); - }} - className="flex-col items-start p-4 cursor-pointer hover:bg-tertiary" - > -
{comp.name}
- {comp.description && ( -
{comp.description}
- )} - - {comp.import} - - - ))} - - - ); -}; - -function ComponentShowcase() { - const [date, setDate] = useState(new Date()); - const [progress, setProgress] = useState(33); - - return ( - <> -
-
-
- - Components Overview - -

- Component showcase for the e-INFRA CZ Design System built with - shadcn/ui -

- - - - {/* Installation Instructions */} - - - - Installation Instructions - - - -

Install the e-INFRA Design System package:

- npm install @e-infra/design-system - - Then import components as shown in the "Copy - Component" dropdowns below each section. - - - - - - - {/* Typography Section */} -
-
-

- Typography -

- -
- - - Text Hierarchy - - Standardized typography styles for consistent design - - - -
- - Main Heading - -

The quick brown fox jumps

-
- -
- - Section Heading (H2) - -

The quick brown fox jumps

-
- -
- - Sub-heading (H3) - -

The quick brown fox jumps

-
- -
- - Sub-section (H4) - -

The quick brown fox jumps

-
- -
- - Body Text - -

- The quick brown fox jumps over the lazy dog. This is - standard body text that should be used for most content. - It provides good readability and comfortable reading - experience. -

-
- -
- - Bold Paragraph - - - The quick brown fox jumps over the lazy dog. This is - emphasized body text for important information that needs - to stand out. - -
- -
- - Small Text - - - The quick brown fox jumps over the lazy dog. This is - smaller text used for captions, helper text, or secondary - information. - -
- -
- - Extra Small / Caption - - - The quick brown fox jumps over the lazy dog. Used for - timestamps, labels, and micro-copy. - -
- -
- - Code / Monospace - - const greeting = "Hello World"; -
- -
- Link - This is a standard link -
- - -
- - - - {/* Alerts Section */} -
-
-

- Alerts -

- -
-
- - - Heads up! - - You can add components to your app using the cli. - - - - - Success - - Your settings have been saved successfully. - - - - - Warning - - Your account will expire in 3 days. Please renew to continue - enjoying our services. - - - - - Error - - Your session has expired. Please log in again. - - -
-
- - - - {/* Buttons Section */} -
-
-

- Buttons -

- -
-
- - - - - - - - - - - - - -
-
- - - - {/* Cards Section */} -
-
-

Cards

- -
-
- - - Card Title - Card Description - - -

Card Content goes here.

- - - - - - - - Notifications - - You have 3 unread messages. - - - -
-
- - JD - -
-

John Doe

-

2 minutes ago

-
-
-
- - - - - Progress - - - -
- - -
- - -
-
- - - - {/* Form Elements Section */} -
-
-

- Form Elements -

- -
- - - Example Form - - All form components in one place - - - -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
-
- -
- -