use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn CardExample() -> impl IntoView {
    view! {
        <Card class="w-full max-w-sm">
            <CardHeader>
                <CardTitle>"Log in to your account"</CardTitle>
                <CardDescription>
                    "Enter your email below to Log in to your account"
                </CardDescription>
                <CardAction>
                    <Button variant="link">"Sign Up"</Button>
                </CardAction>
            </CardHeader>
            <CardContent>
                <form>
                    <div class="flex flex-col gap-6">
                        <div class="grid gap-2">
                            <Label label_for="email">"Email"</Label>
                            <Input
                                id="email"
                                input_type="email"
                                placeholder="m@example.com"
                            />
                        </div>
                        <div class="grid gap-2">
                            <div class="flex items-center">
                                <Label label_for="password">"Password"</Label>
                                <a
                                    href="#"
                                    class="ml-auto inline-block text-sm underline-offset-4 hover:underline"
                                >
                                    "Forgot your password?"
                                </a>
                            </div>
                            <Input id="password" input_type="password" />
                        </div>
                    </div>
                </form>
            </CardContent>
            <CardFooter class="flex-col gap-2 border-t">
                <Button button_type="submit" class="w-full">
                    "Log in"
                </Button>
                <Button variant="outline" class="w-full">
                    "Log in with Google"
                </Button>
            </CardFooter>
        </Card>
    }
}

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn CardSizeExample() -> impl IntoView {
    view! {
        <Card size="sm" class="mx-auto w-full max-w-sm">
            <CardHeader>
                <CardTitle>"Small Card"</CardTitle>
                <CardDescription>"This card uses the small size variant."</CardDescription>
            </CardHeader>
            <CardContent>
                <p>
                    "The card component supports a size prop that can be set to
                    \"sm\" for a more compact appearance."
                </p>
            </CardContent>
            <CardFooter>
                <Button variant="outline" size="sm" class="w-full">
                    "Action"
                </Button>
            </CardFooter>
        </Card>
    }
}

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn CardImageExample() -> impl IntoView {
    view! {
        <Card class="relative mx-auto w-full max-w-sm">
            <img
                src="https://avatar.vercel.sh/shadcn1"
                alt="Event cover"
                class="relative aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40"
            />
            <div class="absolute inset-0 aspect-video bg-black/35" />
            <CardHeader>
                <CardAction>
                    <Badge variant="secondary">"Featured"</Badge>
                </CardAction>
                <CardTitle>"Design systems meetup"</CardTitle>
                <CardDescription>
                    "A practical talk on component APIs, accessibility, and shipping
                    faster."
                </CardDescription>
            </CardHeader>
            <CardFooter>
                <Button class="w-full">"View Event"</Button>
            </CardFooter>
        </Card>
    }
}