-
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
castrogarciajs
committed
Sep 4, 2024
1 parent
4bc3168
commit 2132bef
Showing
6 changed files
with
142 additions
and
175 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { Button } from '@openlite/ui' | ||
| import InstallCommand from '../install-command' | ||
|
|
||
| export function Presentation() { | ||
| return ( | ||
| <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48"> | ||
| <div className="container px-4 md:px-6"> | ||
| <div className="flex flex-col items-center space-y-4 text-center"> | ||
| <div className="space-y-4"> | ||
| <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none"> | ||
| A design system built | ||
| {' '} | ||
| <br /> | ||
| {' '} | ||
| with Tailwindcss and Radix UI. | ||
| </h1> | ||
| <p className="mx-auto max-w-[700px] text-neutral-500 text-sm"> | ||
| Our design system provides a complete set of guidelines, components, and tools to help you create cohesive and stunning user interfaces. Take a look at our documentation and use the established layouts. | ||
| </p> | ||
| </div> | ||
| <div className="flex items-center gap-x-5 flex-wrap"> | ||
| <Button>Getting started</Button> | ||
| <InstallCommand /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| 'use client' | ||
|
|
||
| import { useState } from 'react' | ||
| import { Check, Copy, Terminal } from 'lucide-react' | ||
| import { Button } from '@openlite/ui' | ||
|
|
||
| export default function InstallCommand() { | ||
| const [copied, setCopied] = useState(false) | ||
| const installCommand = 'npm install @openlite/ui' | ||
|
|
||
| const copyToClipboard = async () => { | ||
| await navigator.clipboard.writeText(installCommand) | ||
| setCopied(true) | ||
| setTimeout(() => setCopied(false), 2000) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flex items-center space-x-2 border-neutral-300 border rounded-medium p-1 max-w-md"> | ||
| <code className="flex items-center gap-2 flex-grow px-3 py-2 text-sm text-neutral-500"> | ||
| <Terminal className="size-4" /> | ||
| {installCommand} | ||
| </code> | ||
| <Button | ||
| onClick={copyToClipboard} | ||
| variant="ghost" | ||
| size="icon" | ||
| className="rounded-full hover:bg-gray-200" | ||
| > | ||
| {copied | ||
| ? ( | ||
| <Check className="size-4 text-green-500" /> | ||
| ) | ||
| : ( | ||
| <Copy className="size-4" /> | ||
| )} | ||
| </Button> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import Link from 'next/link' | ||
| import { Button, Sheet, SheetContent, SheetTrigger } from '@openlite/ui' | ||
| import { MenuIcon } from 'lucide-react' | ||
|
|
||
| const links = [ | ||
| { label: 'Templates', href: '#' }, | ||
| { label: 'Blog', href: '#' }, | ||
| { label: 'Releases', href: '#' }, | ||
| { label: 'Components', href: 'https://ui.openlabs.online/docs/components/accordion' }, | ||
| ] | ||
|
|
||
| function SubMenu({ classes }: { classes: string }) { | ||
| return ( | ||
| <nav className={classes}> | ||
| {links.map((link, key) => ( | ||
| <Link href={link.href} key={key}>{link.label}</Link> | ||
| ))} | ||
| </nav> | ||
| ) | ||
| } | ||
|
|
||
| function SubDocumentation({ classes }: { classes: string }) { | ||
| return ( | ||
| <div className={classes}> | ||
| <Button outline="default" asChild> | ||
| <Link href="/docs" className="text-neutral-500"> | ||
| Doucmentation | ||
| </Link> | ||
| </Button> | ||
| <Button asChild> | ||
| <Link href="https://github.com/openlitedotdev/ui"> | ||
| Github | ||
| </Link> | ||
| </Button> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| function SidebarMenuMobile() { | ||
| return ( | ||
| <nav className="block md:hidden"> | ||
| <Sheet> | ||
| <SheetTrigger asChild> | ||
| <MenuIcon /> | ||
| </SheetTrigger> | ||
| <SheetContent> | ||
| <div className="space-y-4 py-4"> | ||
| <SubMenu classes="flex flex-col md:hidden gap-y-3" /> | ||
| <SubDocumentation classes="flex md:hidden items-center gap-4" /> | ||
| </div> | ||
|
|
||
| </SheetContent> | ||
| </Sheet> | ||
| </nav> | ||
| ) | ||
| } | ||
|
|
||
| export function Header() { | ||
| return ( | ||
| <header className="px-4 lg:px-6 h-14 flex items-center gap-x-14 text-neutral-500"> | ||
| <SubMenu classes="hidden md:ml-auto md:flex gap-4 sm:gap-6" /> | ||
| <SubDocumentation classes="hidden md:flex items-center justify-center gap-4" /> | ||
| <SidebarMenuMobile /> | ||
| </header> | ||
| ) | ||
| } |