fix(docs): clean up cards examples

stefan-karger · Nov 14, 2023 · ca10d49 · ca10d49 · vercel · Nov 14, 2023
1 parent 6f07aba
commit ca10d49
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 30 deletions.
diff --git a/apps/docs/src/components/cards/cookie-settings.tsx b/apps/docs/src/components/cards/cookie-settings.tsx
@@ -21,7 +21,7 @@ export function CookieSettings() {
         <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">
+            <span class="text-muted-foreground font-normal leading-snug">
               These cookies are essential in order to use the website and use its features.
             </span>
           </Label>
@@ -30,7 +30,7 @@ export function CookieSettings() {
         <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">
+            <span class="text-muted-foreground font-normal leading-snug">
               These cookies allow the website to provide personalized functionality.
             </span>
           </Label>
@@ -39,7 +39,7 @@ export function CookieSettings() {
         <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">
+            <span class="text-muted-foreground font-normal leading-snug">
               These cookies help to improve the performance of the website.
             </span>
           </Label>

diff --git a/apps/docs/src/components/cards/create-account.tsx b/apps/docs/src/components/cards/create-account.tsx
@@ -36,7 +36,7 @@ export function CreateAccount() {
             <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>
+            <span class="bg-background text-muted-foreground px-2">Or continue with</span>
           </div>
         </div>
         <div class="grid gap-2">

diff --git a/apps/docs/src/components/cards/notifications.tsx b/apps/docs/src/components/cards/notifications.tsx
@@ -1,4 +1,5 @@
 import { TbBell, TbEyeOff, TbUser } from "solid-icons/tb"
+
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/registry/ui/card"
 
 export function Notifications() {
@@ -9,25 +10,25 @@ export function Notifications() {
         <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">
+        <div class="hover:bg-accent hover:text-accent-foreground -mx-2 flex items-start space-x-4 rounded-md p-2 transition-all">
           <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>
+            <p class="text-muted-foreground text-sm">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">
+        <div class="bg-accent text-accent-foreground -mx-2 flex items-start space-x-4 rounded-md p-2 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>
+            <p class="text-muted-foreground text-sm">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">
+        <div class="hover:bg-accent hover:text-accent-foreground -mx-2 flex items-start space-x-4 rounded-md p-2 transition-all">
           <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>
+            <p class="text-muted-foreground text-sm">Turn off all notifications.</p>
           </div>
         </div>
       </CardContent>

diff --git a/apps/docs/src/components/cards/payment-method.tsx b/apps/docs/src/components/cards/payment-method.tsx
@@ -1,7 +1,6 @@
+import { TbBrandApple, TbBrandPaypal, TbCreditCard } from "solid-icons/tb"
+
 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,
@@ -10,8 +9,10 @@ import {
   CardHeader,
   CardTitle
 } from "~/registry/ui/card"
+import { Input } from "~/registry/ui/input"
 import { Label } from "~/registry/ui/label"
-import { TbBrandApple, TbBrandPaypal, TbCreditCard } from "solid-icons/tb"
+import { RadioGroup, RadioGroupItem } from "~/registry/ui/radio-group"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/registry/ui/select"
 
 export function PaymentMethod() {
   return (
@@ -26,7 +27,7 @@ export function PaymentMethod() {
             <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"
+              class="border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 p-4"
             >
               <TbCreditCard class="mb-3 h-6 w-6" />
               Card
@@ -36,7 +37,7 @@ export function PaymentMethod() {
             <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"
+              class="border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 p-4"
             >
               <TbBrandPaypal class="mb-3 h-6 w-6" />
               Paypal
@@ -46,7 +47,7 @@ export function PaymentMethod() {
             <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"
+              class="border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 p-4"
             >
               <TbBrandApple class="mb-3 h-6 w-6" />
               Apple

diff --git a/apps/docs/src/components/cards/share-document.tsx b/apps/docs/src/components/cards/share-document.tsx
@@ -31,7 +31,7 @@ export function ShareDocument() {
                 </Avatar>
                 <div>
                   <p class="text-sm font-medium leading-none">Olivia Martin</p>
-                  <p class="text-sm text-muted-foreground">m@example.com</p>
+                  <p class="text-muted-foreground text-sm">m@example.com</p>
                 </div>
               </div>
               <Select
@@ -56,7 +56,7 @@ export function ShareDocument() {
                 </Avatar>
                 <div>
                   <p class="text-sm font-medium leading-none">Isabella Nguyen</p>
-                  <p class="text-sm text-muted-foreground">b@example.com</p>
+                  <p class="text-muted-foreground text-sm">b@example.com</p>
                 </div>
               </div>
               <Select
@@ -81,7 +81,7 @@ export function ShareDocument() {
                 </Avatar>
                 <div>
                   <p class="text-sm font-medium leading-none">Sofia Davis</p>
-                  <p class="text-sm text-muted-foreground">p@example.com</p>
+                  <p class="text-muted-foreground text-sm">p@example.com</p>
                 </div>
               </div>
               <Select

diff --git a/apps/docs/src/components/cards/solid-ui.tsx b/apps/docs/src/components/cards/solid-ui.tsx
@@ -26,7 +26,7 @@ export function SolidUI() {
             Beautifully designed components built with Kobalte and Tailwind CSS.
           </CardDescription>
         </div>
-        <div class="flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground">
+        <div class="bg-secondary text-secondary-foreground flex items-center space-x-1 rounded-md">
           <Button variant="secondary" class="px-3 shadow-none">
             <TbStar class="mr-2 h-4 w-4" />
             Star
@@ -35,7 +35,7 @@ export function SolidUI() {
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <As component={Button} variant={"secondary"} class="px-2 shadow-none">
-                <TbChevronDown class="h-4 w-4 text-secondary-foreground" />
+                <TbChevronDown class="text-secondary-foreground h-4 w-4" />
               </As>
             </DropdownMenuTrigger>
 
@@ -58,7 +58,7 @@ export function SolidUI() {
         </div>
       </CardHeader>
       <CardContent>
-        <div class="flex space-x-4 text-sm text-muted-foreground">
+        <div class="text-muted-foreground flex space-x-4 text-sm">
           <div class="flex items-center">
             <TbBrandTypescript class="mr-1 h-3 w-3 text-sky-400" />
             TypeScript

diff --git a/apps/docs/src/components/cards/team-members.tsx b/apps/docs/src/components/cards/team-members.tsx
@@ -1,4 +1,3 @@
-import { splitProps } from "solid-js"
 import { Avatar, AvatarFallback, AvatarImage } from "~/registry/ui/avatar"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/registry/ui/card"
 import {
@@ -39,7 +38,7 @@ export function TeamMembers() {
             </Avatar>
             <div>
               <p class="text-sm font-medium leading-none">Sofia Davis</p>
-              <p class="text-sm text-muted-foreground">m@example.com</p>
+              <p class="text-muted-foreground text-sm">m@example.com</p>
             </div>
           </div>
           <Combobox<Role>
@@ -50,10 +49,10 @@ export function TeamMembers() {
             optionLabel="label"
             placeholder="Select new role..."
             itemComponent={(props) => (
-              <ComboboxItem item={props.item} class="space-y-1 flex flex-col items-start px-4 py-2">
+              <ComboboxItem item={props.item} class="flex flex-col items-start space-y-1 px-4 py-2">
                 <ComboboxItemLabel>
                   <p>{props.item.rawValue.label}</p>
-                  <p class="text-sm text-muted-foreground">{props.item.rawValue.description}</p>
+                  <p class="text-muted-foreground text-sm">{props.item.rawValue.description}</p>
                 </ComboboxItemLabel>
               </ComboboxItem>
             )}
@@ -73,7 +72,7 @@ export function TeamMembers() {
             </Avatar>
             <div>
               <p class="text-sm font-medium leading-none">Jackson Lee</p>
-              <p class="text-sm text-muted-foreground">p@example.com</p>
+              <p class="text-muted-foreground text-sm">p@example.com</p>
             </div>
           </div>
           <Combobox<Role>
@@ -84,10 +83,10 @@ export function TeamMembers() {
             optionLabel="label"
             placeholder="Select new role..."
             itemComponent={(props) => (
-              <ComboboxItem item={props.item} class="space-y-1 flex flex-col items-start px-4 py-2">
+              <ComboboxItem item={props.item} class="flex flex-col items-start space-y-1 px-4 py-2">
                 <ComboboxItemLabel>
                   <p>{props.item.rawValue.label}</p>
-                  <p class="text-sm text-muted-foreground">{props.item.rawValue.description}</p>
+                  <p class="text-muted-foreground text-sm">{props.item.rawValue.description}</p>
                 </ComboboxItemLabel>
               </ComboboxItem>
             )}