Card

// Package card holds the site's example gsx components for ui/card.
package card

import "github.com/gsxhq/gsxui/ui"

// Basic renders a Card with a header and content.
component Basic() {
	<ui.Card>
		<ui.CardHeader>
			<ui.CardTitle>Create project</ui.CardTitle>
			<ui.CardDescription>Deploy your new project in one click.</ui.CardDescription>
		</ui.CardHeader>
		<ui.CardContent>
			<p class="text-sm text-muted-foreground">Choose a template to get started.</p>
		</ui.CardContent>
	</ui.Card>
}

package card

import (
	"github.com/gsxhq/gsxui/ui"
)

// Compound composes every Card part: a border-b header with title,
// description and action, content, and a border-t footer.
component Compound() {
	<ui.Card>
		<ui.CardHeader class="border-b">
			<ui.CardTitle>Notifications</ui.CardTitle>
			<ui.CardDescription>You have 3 unread messages.</ui.CardDescription>
			<ui.CardAction>
				<ui.Badge variant="secondary">New</ui.Badge>
			</ui.CardAction>
		</ui.CardHeader>
		<ui.CardContent>
			<p class="text-sm text-muted-foreground">Push notifications are enabled for this device.</p>
		</ui.CardContent>
		<ui.CardFooter class="border-t">
			<ui.Button class="w-full">Mark all as read</ui.Button>
		</ui.CardFooter>
	</ui.Card>
}

package card

import "github.com/gsxhq/gsxui/ui"

// Attrs demonstrates class-merge override: class="py-8" replaces Card's
// default py-6 — tailwind-merge resolves same-property conflicts, caller
// wins, same mechanism every gsxui component uses for its fallthrough attrs.
component Attrs() {
	<ui.Card class="py-8">
		<ui.CardHeader>
			<ui.CardTitle>Roomier card</ui.CardTitle>
			<ui.CardDescription>py-8 overrides py-6; the rest of the class list merges untouched.</ui.CardDescription>
		</ui.CardHeader>
		<ui.CardContent>
			<p class="text-sm text-muted-foreground">Every part accepts attrs the same way — this isn't Card-specific.</p>
		</ui.CardContent>
	</ui.Card>
}

package card

import "github.com/gsxhq/gsxui/ui"

// Rtl mirrors shadcn's own card-rtl demo: a login card with a
// CardAction sign-up link, an email/password form, and stacked footer
// buttons — translated to Arabic, wrapped in dir="rtl".
component Rtl() {
	<div dir="rtl" lang="ar" class="w-full max-w-sm">
		<ui.Card>
			<ui.CardHeader>
				<ui.CardTitle>تسجيل الدخول إلى حسابك</ui.CardTitle>
				<ui.CardDescription>أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك</ui.CardDescription>
				<ui.CardAction>
					<ui.Button variant="link">إنشاء حساب</ui.Button>
				</ui.CardAction>
			</ui.CardHeader>
			<ui.CardContent>
				<form>
					<div class="flex flex-col gap-6">
						<div class="grid gap-2">
							<ui.Label for="card-rtl-email">البريد الإلكتروني</ui.Label>
							<ui.Input id="card-rtl-email" type="email" placeholder="[email protected]" autocomplete="email" required/>
						</div>
						<div class="grid gap-2">
							<div class="flex items-center">
								<ui.Label for="card-rtl-password">كلمة المرور</ui.Label>
								<a href="#" class="ms-auto inline-block text-sm underline-offset-4 hover:underline">نسيت كلمة المرور؟</a>
							</div>
							<ui.Input id="card-rtl-password" type="password" autocomplete="current-password" required/>
						</div>
					</div>
				</form>
			</ui.CardContent>
			<ui.CardFooter class="flex-col gap-2">
				<ui.Button type="submit" class="w-full">تسجيل الدخول</ui.Button>
				<ui.Button variant="outline" class="w-full">تسجيل الدخول باستخدام Google</ui.Button>
			</ui.CardFooter>
		</ui.Card>
	</div>
}