Card Component Added

2026-04-13 15:39:41 +05:00
parent 06ec22704b
commit c23c598b0b
13 changed files with 513 additions and 2 deletions
@@ -57,6 +57,16 @@
                        </Icon>
                        <ChildContent>Forms</ChildContent>
                    </SidebarMenuItem>
+                    <SidebarMenuItem Href="/cards" Tooltip="Cards">
+                        <Icon>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <rect width="18" height="18" x="3" y="3" rx="2" />
+                                <path d="M3 9h18" />
+                            </svg>
+                        </Icon>
+                        <ChildContent>Cards</ChildContent>
+                    </SidebarMenuItem>
                </SidebarGroupContent>
            </SidebarGroup>
        </SidebarContent>
@@ -0,0 +1,67 @@
+@page "/cards"
+@rendermode InteractiveServer
+
+<PageTitle>Cards</PageTitle>
+
+<div class="space-y-8 max-w-lg">
+    <div>
+        <h1 class="text-3xl font-bold tracking-tight">Cards Demo</h1>
+        <p class="text-muted-foreground">Card components with multiple layouts.</p>
+    </div>
+
+    @* ── Basic card ── *@
+    <Card data-testid="card-basic">
+        <CardHeader>
+            <CardTitle>Card Title</CardTitle>
+            <CardDescription>Card Description</CardDescription>
+        </CardHeader>
+        <CardContent>
+            <p>Card Content</p>
+        </CardContent>
+        <CardFooter>
+            <p>Card Footer</p>
+        </CardFooter>
+    </Card>
+
+    @* ── Card with action in header ── *@
+    <Card data-testid="card-login">
+        <CardHeader>
+            <CardTitle>Login to your account</CardTitle>
+            <CardAction>
+                <Button Variant="@ButtonVariant.Link" Class="text-sm">Sign Up</Button>
+            </CardAction>
+            <CardDescription>Enter your email below to login to your account</CardDescription>
+        </CardHeader>
+        <CardContent>
+            <div class="space-y-4">
+                <FormField Label="Email" For="email">
+                    <TextInput Id="email" Type="email" Placeholder="m@example.com" />
+                </FormField>
+                <FormField Label="Password" For="password">
+                    <TextInput Id="password" Type="password" />
+                </FormField>
+            </div>
+        </CardContent>
+        <CardFooter Class="flex-col gap-2">
+            <Button Class="w-full">Login</Button>
+            <Button Variant="@ButtonVariant.Outline" Class="w-full">Login with Google</Button>
+        </CardFooter>
+    </Card>
+
+    @* ── Image card ── *@
+    <Card data-testid="card-image">
+        <CardImage Src="https://placehold.co/600x300/2a2a2a/2a2a2a" Alt="Event cover" WrapperClass="h-48" />
+        <CardHeader>
+            <CardTitle>Design systems meetup</CardTitle>
+            <CardAction>
+                <span class="rounded-full border border-border px-3 py-0.5 text-xs font-medium text-muted-foreground">
+                    Featured
+                </span>
+            </CardAction>
+            <CardDescription>A practical talk on component APIs, accessibility, and shipping faster.</CardDescription>
+        </CardHeader>
+        <CardFooter>
+            <Button Class="w-full">View Event</Button>
+        </CardFooter>
+    </Card>
+</div>