Skip to content

Commit

Permalink
updated examples to fix meta props of index page & restructure
Browse files Browse the repository at this point in the history
  • Loading branch information
@stefan-karger
stefan-karger committed Dec 8, 2023
1 parent 599e228 commit bf2dc0e
Show file tree
Hide file tree
Showing 10 changed files with 389 additions and 337 deletions.
4 changes: 2 additions & 2 deletions apps/docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@
"lint": "eslint --fix \"**/*.{ts,tsx,js,jsx}\""
},
"dependencies": {
"@fontsource/inter": "^5.0.14",
"@fontsource/inter": "^5.0.16",
"@kobalte/core": "^0.11.2",
"@modular-forms/solid": "^0.20.0",
"@solid-primitives/keyboard": "^1.2.5",
"@solidjs/meta": "^0.28.6",
"@solidjs/router": "^0.8.3",
"@tanstack/solid-table": "^8.9.3",
"@vercel/analytics": "^1.1.1",
"chart.js": "^4.4.0",
"chart.js": "^4.4.1",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"shosho": "^1.4.3",
Expand Down
79 changes: 79 additions & 0 deletions apps/docs/src/components/authentication/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import { A } from "solid-start"

import { TbCommand } from "solid-icons/tb"

import { UserAuthForm } from "./user-auth-form"
import { cn } from "~/lib/utils"
import { buttonVariants } from "~/registry/ui/button"

export function Authentication() {
return (
<>
<div class="md:hidden">
<img
src="/examples/authentication-light.png"
width={1280}
height={843}
alt="Authentication"
class="block dark:hidden"
/>
<img
src="/examples/authentication-dark.png"
width={1280}
height={843}
alt="Authentication"
class="hidden dark:block"
/>
</div>
<div class="container relative hidden h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
<A
href="/examples/authentication"
class={cn(
buttonVariants({ variant: "ghost" }),
"absolute right-4 top-4 md:right-8 md:top-8"
)}
>
Login
</A>
<div class="bg-muted relative hidden h-full flex-col p-10 text-white dark:border-r lg:flex">
<div class="absolute inset-0 bg-zinc-900" />
<div class="relative z-20 flex items-center text-lg font-medium">
<TbCommand class="mr-2 h-6 w-6" />
Acme Inc
</div>
<div class="relative z-20 mt-auto">
<blockquote class="space-y-2">
<p class="text-lg">
&ldquo;This library has saved me countless hours of work and helped me deliver
stunning designs to my clients faster than ever before.&rdquo;
</p>
<footer class="text-sm">Sofia Davis</footer>
</blockquote>
</div>
</div>
<div class="lg:p-8">
<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
<div class="flex flex-col space-y-2 text-center">
<h1 class="text-2xl font-semibold tracking-tight">Create an account</h1>
<p class="text-muted-foreground text-sm">
Enter your email below to create your account
</p>
</div>
<UserAuthForm />
<p class="text-muted-foreground px-8 text-center text-sm">
By clicking continue, you agree to our{" "}
<A href="/terms" class="hover:text-primary underline underline-offset-4">
Terms of Service
</A>{" "}
and{" "}
<A href="/privacy" class="hover:text-primary underline underline-offset-4">
Privacy Policy
</A>
.
</p>
</div>
</div>
</div>
</>
)
}
47 changes: 47 additions & 0 deletions apps/docs/src/components/cards/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { CookieSettings } from "~/components/cards/cookie-settings"
import { CreateAccount } from "~/components/cards/create-account"
import { Notifications } from "~/components/cards/notifications"
import { PaymentMethod } from "~/components/cards/payment-method"
import { ReportAnIssue } from "~/components/cards/report-an-issue"
import { ShareDocument } from "~/components/cards/share-document"
import { SolidUI } from "~/components/cards/solid-ui"
import { TeamMembers } from "~/components/cards/team-members"

export function Cards() {
return (
<>
<div class="md:hidden">
<img
src="/examples/cards-light.png"
width={1280}
height={1214}
alt="Cards"
class="block dark:hidden"
/>
<img
src="/examples/cards-dark.png"
width={1280}
height={1214}
alt="Cards"
class="hidden dark:block"
/>
</div>
<div class="hidden items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3">
<div class="col-span-2 grid items-start gap-6 lg:col-span-1">
<CreateAccount />
<PaymentMethod />
</div>
<div class="col-span-2 grid items-start gap-6 lg:col-span-1">
<TeamMembers />
<ShareDocument />
<Notifications />
</div>
<div class="col-span-2 grid items-start gap-6 lg:col-span-2 lg:grid-cols-2 xl:col-span-1 xl:grid-cols-1">
<ReportAnIssue />
<SolidUI />
<CookieSettings />
</div>
</div>
</>
)
}
180 changes: 180 additions & 0 deletions apps/docs/src/components/dashboard/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
import { TbDownload } from "solid-icons/tb"

import { MainNav } from "~/components/dashboard/main-nav"
import { Overview } from "~/components/dashboard/overview"
import { RecentSales } from "~/components/dashboard/recent-sales"
import { Search } from "~/components/dashboard/search"
import { UserNav } from "~/components/dashboard/user-nav"
import { Button } from "~/registry/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/registry/ui/card"
import { Grid } from "~/registry/ui/grid"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/registry/ui/tabs"

export function Dashboard() {
return (
<>
<div class="md:hidden">
<img
src="/examples/dashboard-light.png"
width={1280}
height={866}
alt="Dashboard"
class="block dark:hidden"
/>
<img
src="/examples/dashboard-dark.png"
width={1280}
height={866}
alt="Dashboard"
class="hidden dark:block"
/>
</div>
<div class="hidden flex-col md:flex">
<div class="border-b">
<div class="flex h-16 items-center px-4">
<MainNav class="mx-6" />
<div class="ml-auto flex items-center space-x-4">
<Search />
<UserNav />
</div>
</div>
</div>
<div class="flex-1 space-y-4 p-8 pt-6">
<div class="flex items-center justify-between space-y-2">
<h2 class="text-3xl font-bold tracking-tight">Dashboard</h2>
<div class="flex items-center space-x-2">
<Button>
<TbDownload class="mr-2 h-4 w-4" />
Download
</Button>
</div>
</div>
<Tabs defaultValue="overview" class="space-y-4">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="analytics" disabled>
Analytics
</TabsTrigger>
<TabsTrigger value="reports" disabled>
Reports
</TabsTrigger>
<TabsTrigger value="notifications" disabled>
Notifications
</TabsTrigger>
</TabsList>
<TabsContent value="overview" class="space-y-4">
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<Card>
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle class="text-sm font-medium">Total Revenue</CardTitle>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="text-muted-foreground h-4 w-4"
>
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
</svg>
</CardHeader>
<CardContent>
<div class="text-2xl font-bold">$45,231.89</div>
<p class="text-muted-foreground text-xs">+20.1% from last month</p>
</CardContent>
</Card>
<Card>
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle class="text-sm font-medium">Subscriptions</CardTitle>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="text-muted-foreground h-4 w-4"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
</CardHeader>
<CardContent>
<div class="text-2xl font-bold">+2350</div>
<p class="text-muted-foreground text-xs">+180.1% from last month</p>
</CardContent>
</Card>
<Card>
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle class="text-sm font-medium">Sales</CardTitle>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="text-muted-foreground h-4 w-4"
>
<rect width="20" height="14" x="2" y="5" rx="2" />
<path d="M2 10h20" />
</svg>
</CardHeader>
<CardContent>
<div class="text-2xl font-bold">+12,234</div>
<p class="text-muted-foreground text-xs">+19% from last month</p>
</CardContent>
</Card>
<Card>
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle class="text-sm font-medium">Active Now</CardTitle>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="text-muted-foreground h-4 w-4"
>
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
</svg>
</CardHeader>
<CardContent>
<div class="text-2xl font-bold">+573</div>
<p class="text-muted-foreground text-xs">+201 since last hour</p>
</CardContent>
</Card>
</div>
<Grid colsMd={2} colsLg={7} class="gap-4">
<Card class="col-span-4">
<CardHeader>
<CardTitle>Overview</CardTitle>
</CardHeader>
<CardContent class="pl-2">
<Overview />
</CardContent>
</Card>
<Card class="col-span-3">
<CardHeader>
<CardTitle>Recent Sales</CardTitle>
<CardDescription>You made 265 sales this month.</CardDescription>
</CardHeader>
<CardContent>
<RecentSales />
</CardContent>
</Card>
</Grid>
</TabsContent>
</Tabs>
</div>
</div>
</>
)
}
6 changes: 3 additions & 3 deletions apps/docs/src/components/examples-nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@ const examples = [
{
name: "Dashboard",
href: "/examples/dashboard",
code: "https://github.com/sek-consulting/solid-ui/tree/main/apps/docs/src/routes/examples/dashboard"
code: "https://github.com/sek-consulting/solid-ui/tree/main/apps/docs/src/components/dashboard"
},
{
name: "Cards",
href: "/examples/cards",
code: "https://github.com/sek-consulting/solid-ui/tree/main/apps/docs/src/routes/examples/cards"
code: "https://github.com/sek-consulting/solid-ui/tree/main/apps/docs/src/components/cards"
},
{
name: "Authentication",
href: "/examples/authentication",
code: "https://github.com/sek-consulting/solid-ui/tree/main/apps/docs/src/routes/examples/authentication"
code: "https://github.com/sek-consulting/solid-ui/tree/main/apps/docs/src/components/authentication"
}
]

Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/routes/(home).tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Dashboard from "./examples/dashboard"
import { Dashboard } from "~/components/dashboard"
import { ExamplesNav } from "~/components/examples-nav"
import { HeroSection } from "~/components/hero-section"

Expand Down
Loading

1 comment on commit bf2dc0e

@vercel
Copy link

@vercel vercel bot commented on bf2dc0e Dec 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

solid-ui-components – ./

solid-ui-components.vercel.app
solid-ui-components-git-main-sek-consulting.vercel.app
www.solid-ui.com
solid-ui-components-sek-consulting.vercel.app
solid-ui.com

Please sign in to comment.