Feat: Landing page component examples (#37)

* feat(docs): started working on the landing page examples

* feat: added card examples

* chore(release): version packages (#35)

* solves #34

* fix: changed the search api url

* docs: fixed merge conflicts

* chore: clean up & more cards

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Stefan E-K <stefan.eideloth@gmail.com>

.changeset/empty-boxes-punch.md

@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+fix: changed search api url

.changeset/lemon-months-kneel.md

@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+feat: add more examples

apps/docs/src/components/authentication/user-auth-form.tsx

@@ -18,14 +18,14 @@ export function UserAuthForm() {
   return (
     <div class="grid gap-6">
       <Form onSubmit={handleSubmit}>
-        <Grid class="gap-2">
+        <Grid class="gap-4">
           <Field name="email">
             {(_, props) => (
               <Grid class="gap-1">
-                <Label class="sr-only" html-for="email">
+                <Label class="sr-only" for="email">
                   Email
                 </Label>
-                <Input {...props} type="email" />
+                <Input {...props} type="email" placeholder="me@email.com" />
               </Grid>
             )}
           </Field>

apps/docs/src/components/cards/cookie-settings.tsx

@@ -0,0 +1,56 @@
+import { Button } from "~/registry/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "~/registry/ui/card"
+import { Label } from "~/registry/ui/label"
+import { Switch } from "~/registry/ui/switch"
+
+export function CookieSettings() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Cookie Settings</CardTitle>
+        <CardDescription>Manage your cookie settings here.</CardDescription>
+      </CardHeader>
+      <CardContent class="grid gap-6">
+        <div class="flex items-center justify-between space-x-2">
+          <Label for="necessary" class="flex flex-col space-y-1">
+            <span>Strictly Necessary</span>
+            <span class="font-normal leading-snug text-muted-foreground">
+              These cookies are essential in order to use the website and use its features.
+            </span>
+          </Label>
+          <Switch id="necessary" defaultChecked />
+        </div>
+        <div class="flex items-center justify-between space-x-2">
+          <Label for="functional" class="flex flex-col space-y-1">
+            <span>Functional Cookies</span>
+            <span class="font-normal leading-snug text-muted-foreground">
+              These cookies allow the website to provide personalized functionality.
+            </span>
+          </Label>
+          <Switch id="functional" />
+        </div>
+        <div class="flex items-center justify-between space-x-2">
+          <Label for="performance" class="flex flex-col space-y-1">
+            <span>Performance Cookies</span>
+            <span class="font-normal leading-snug text-muted-foreground">
+              These cookies help to improve the performance of the website.
+            </span>
+          </Label>
+          <Switch id="performance" />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" class="w-full">
+          Save preferences
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}

apps/docs/src/components/cards/create-account.tsx

@@ -0,0 +1,56 @@
+import { TbBrandGithub, TbBrandGoogle } from "solid-icons/tb"
+
+import { Button } from "~/registry/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "~/registry/ui/card"
+import { Input } from "~/registry/ui/input"
+import { Label } from "~/registry/ui/label"
+
+export function CreateAccount() {
+  return (
+    <Card>
+      <CardHeader class="space-y-1">
+        <CardTitle class="text-2xl">Create an account</CardTitle>
+        <CardDescription>Enter your email below to create your account</CardDescription>
+      </CardHeader>
+
+      <CardContent class="grid gap-4">
+        <div class="grid grid-cols-2 gap-6">
+          <Button variant="outline">
+            <TbBrandGithub class="mr-2 h-4 w-4" />
+            Github
+          </Button>
+          <Button variant="outline">
+            <TbBrandGoogle class="mr-2 h-4 w-4" />
+            Google
+          </Button>
+        </div>
+        <div class="relative">
+          <div class="absolute inset-0 flex items-center">
+            <span class="w-full border-t" />
+          </div>
+          <div class="relative flex justify-center text-xs uppercase">
+            <span class="bg-background px-2 text-muted-foreground">Or continue with</span>
+          </div>
+        </div>
+        <div class="grid gap-2">
+          <Label for="email">Email</Label>
+          <Input id="email" type="email" placeholder="m@example.com" />
+        </div>
+        <div class="grid gap-2">
+          <Label for="password">Password</Label>
+          <Input id="password" type="password" />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button class="w-full">Create account</Button>
+      </CardFooter>
+    </Card>
+  )
+}

apps/docs/src/components/cards/notifications.tsx

@@ -0,0 +1,36 @@
+import { TbBell, TbEyeOff, TbUser } from "solid-icons/tb"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/registry/ui/card"
+
+export function Notifications() {
+  return (
+    <Card>
+      <CardHeader class="pb-3">
+        <CardTitle>Notifications</CardTitle>
+        <CardDescription>Choose what you want to be notified about.</CardDescription>
+      </CardHeader>
+      <CardContent class="grid gap-1">
+        <div class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
+          <TbBell class="mt-px h-5 w-5" />
+          <div class="space-y-1">
+            <p class="text-sm font-medium leading-none">Everything</p>
+            <p class="text-sm text-muted-foreground">Email digest, mentions & all activity.</p>
+          </div>
+        </div>
+        <div class="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all">
+          <TbUser class="mt-px h-5 w-5" />
+          <div class="space-y-1">
+            <p class="text-sm font-medium leading-none">Available</p>
+            <p class="text-sm text-muted-foreground">Only mentions and comments.</p>
+          </div>
+        </div>
+        <div class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
+          <TbEyeOff class="mt-px h-5 w-5" />
+          <div class="space-y-1">
+            <p class="text-sm font-medium leading-none">Ignoring</p>
+            <p class="text-sm text-muted-foreground">Turn off all notifications.</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

apps/docs/src/components/cards/payment-method.tsx

@@ -0,0 +1,120 @@
+import { Button } from "~/registry/ui/button"
+import { Input } from "~/registry/ui/input"
+import { RadioGroup, RadioGroupItem } from "~/registry/ui/radio-group"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/registry/ui/select"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "~/registry/ui/card"
+import { Label } from "~/registry/ui/label"
+import { TbBrandApple, TbBrandPaypal, TbCreditCard } from "solid-icons/tb"
+
+export function PaymentMethod() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Payment Method</CardTitle>
+        <CardDescription>Add a new payment method to your account.</CardDescription>
+      </CardHeader>
+      <CardContent class="grid gap-6">
+        <RadioGroup defaultValue="card" class="grid grid-cols-3 gap-4">
+          <div>
+            <RadioGroupItem value="card" id="card" class="peer sr-only" />
+            <Label
+              html-for="card"
+              class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
+              <TbCreditCard class="mb-3 h-6 w-6" />
+              Card
+            </Label>
+          </div>
+          <div>
+            <RadioGroupItem value="paypal" id="paypal" class="peer sr-only" />
+            <Label
+              html-for="paypal"
+              class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
+              <TbBrandPaypal class="mb-3 h-6 w-6" />
+              Paypal
+            </Label>
+          </div>
+          <div>
+            <RadioGroupItem value="apple" id="apple" class="peer sr-only" />
+            <Label
+              html-for="apple"
+              class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
+              <TbBrandApple class="mb-3 h-6 w-6" />
+              Apple
+            </Label>
+          </div>
+        </RadioGroup>
+        <div class="grid gap-2">
+          <Label html-for="name">Name</Label>
+          <Input id="name" placeholder="First Last" />
+        </div>
+        <div class="grid gap-2">
+          <Label html-for="number">Card number</Label>
+          <Input id="number" placeholder="" />
+        </div>
+        <div class="grid grid-cols-3 gap-4">
+          <div class="grid gap-2">
+            <Label html-for="month">Expires</Label>
+            <Select
+              options={[
+                "January",
+                "February",
+                "March",
+                "April",
+                "May",
+                "April",
+                "June",
+                "July",
+                "August",
+                "September",
+                "October",
+                "November",
+                "December"
+              ]}
+              placeholder="Month"
+              itemComponent={(props) => (
+                <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
+              )}
+            >
+              <SelectTrigger id="month">
+                <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
+              </SelectTrigger>
+              <SelectContent />
+            </Select>
+          </div>
+          <div class="grid gap-2">
+            <Label html-for="year">Year</Label>
+            <Select
+              options={Array.from({ length: 10 }, (_, i) => new Date().getFullYear() + i)}
+              placeholder="Year"
+              itemComponent={(props) => (
+                <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
+              )}
+            >
+              <SelectTrigger id="year">
+                <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
+              </SelectTrigger>
+              <SelectContent />
+            </Select>
+          </div>
+          <div class="grid gap-2">
+            <Label html-for="cvc">CVC</Label>
+            <Input id="cvc" placeholder="CVC" />
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button class="w-full">Continue</Button>
+      </CardFooter>
+    </Card>
+  )
+}

apps/docs/src/components/cards/report-an-issue.tsx

@@ -0,0 +1,84 @@
+import { createSignal } from "solid-js"
+
+import { Button } from "~/registry/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "~/registry/ui/card"
+import { Input } from "~/registry/ui/input"
+import { Label } from "~/registry/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/registry/ui/select"
+import { Textarea } from "~/registry/ui/textarea"
+
+export function ReportAnIssue() {
+  const [area, setArea] = createSignal()
+  const [secLevel, setSecLevel] = createSignal()
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Report an issue</CardTitle>
+        <CardDescription>What area are you having problems with?</CardDescription>
+      </CardHeader>
+      <CardContent class="grid gap-6">
+        <div class="grid grid-cols-2 gap-4">
+          <div class="grid gap-2">
+            <Label for="area">Area</Label>
+            <Select
+              id="area"
+              value={area()}
+              onChange={setArea}
+              options={["Team", "Billing", "Accounts", "Deployments"]}
+              defaultValue={"Billing"}
+              itemComponent={(props) => (
+                <SelectItem item={props.item}>{props.item.textValue}</SelectItem>
+              )}
+            >
+              <SelectTrigger aria-label="billing" class="flex-1">
+                <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
+              </SelectTrigger>
+              <SelectContent />
+            </Select>
+          </div>
+          <div class="grid gap-2">
+            <Label for="security-level">Security Level</Label>
+            <Select
+              id="security-level"
+              value={secLevel()}
+              onChange={setSecLevel}
+              options={["Level 1(lowest)", "Level 2", "Level 3", "Level 4", "Level 5(💀)"]}
+              defaultValue={"Level 2"}
+              itemComponent={(props) => (
+                <SelectItem item={props.item}>{props.item.textValue}</SelectItem>
+              )}
+            >
+              <SelectTrigger aria-label="security level" class="flex-1">
+                <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
+              </SelectTrigger>
+              <SelectContent />
+            </Select>
+          </div>
+        </div>
+        <div class="grid gap-2">
+          <Label for="subject">Subject</Label>
+          <Input id="subject" placeholder="I need help with..." />
+        </div>
+        <div class="grid gap-2">
+          <Label for="description">Description</Label>
+          <Textarea
+            id="description"
+            placeholder="Please include all information relevant to your issue."
+          />
+        </div>
+      </CardContent>
+      <CardFooter class="justify-between space-x-2">
+        <Button variant="ghost">Cancel</Button>
+        <Button>Submit</Button>
+      </CardFooter>
+    </Card>
+  )
+}