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>
}