Card

'use client'

import { Button } from '@nerdfish/react/button'
import {
	Card,
	CardAction,
	CardContent,
	CardDescription,
	CardFooter,
	CardHeader,
	CardTitle,
} from '@nerdfish/react/card'
import { Input } from '@nerdfish/react/input'
import { Label } from '@nerdfish/react/label'

export default function CardExample() {
	return (
		<Card className="w-87.5 max-w-[calc(100vw-3rem)]">
			<CardHeader>
				<CardTitle>Login to your account</CardTitle>
				<CardDescription>
					Enter your email below to login to your account
				</CardDescription>
				<CardAction>
					<Button variant="link">Sign Up</Button>
				</CardAction>
			</CardHeader>
			<CardContent>
				<form>
					<div className="flex flex-col gap-6">
						<div className="grid gap-2">
							<Label htmlFor="email">Email</Label>
							<Input
								id="email"
								type="email"
								placeholder="m@example.com"
								required
							/>
						</div>
						<div className="grid gap-2">
							<div className="flex items-center">
								<Label htmlFor="password">Password</Label>
								<a
									href="#"
									className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
								>
									Forgot your password?
								</a>
							</div>
							<Input id="password" type="password" required />
						</div>
					</div>
				</form>
			</CardContent>
			<CardFooter className="flex-col gap-2">
				<Button type="submit" className="w-full">
					Login
				</Button>
				<Button variant="outline" className="w-full">
					Login with Google
				</Button>
			</CardFooter>
		</Card>
	)
}

'use client'

import { Button } from '@nerdfish/react/button'
import { Card, CardContent } from '@nerdfish/react/card'
import { Slider, SliderThumb } from '@nerdfish/react/slider'
import {
	HeartIcon,
	PauseCircleIcon,
	Repeat1Icon,
	ShuffleIcon,
	SkipBackIcon,
	SkipForwardIcon,
} from 'lucide-react'
import React from 'react'

export default function CardBlurredExample() {
	const [liked, setLiked] = React.useState(false)

	return (
		<div className="p-acquaintances rounded-container from-info/80 to-info/90 bg-linear-to-tr">
			<Card className="bg-blurred text-info-contrast border-none">
				<CardContent>
					<div className="grid grid-cols-12 items-center justify-center gap-4">
						<div className="relative col-span-4">
							<img
								alt="Album cover"
								className="rounded-[calc(var(--radius-container)-theme(padding.friends))] object-cover"
								height={200}
								width={200}
								src="https://avatars.githubusercontent.com/u/92470693"
							/>
						</div>

						<div className="col-span-8 flex flex-col">
							<div className="flex items-start justify-between">
								<div className="flex flex-col gap-0">
									<h3 className="text-info-contrast font-semibold">
										Daily Mix
									</h3>
									<p className="text-info-contrast text-sm">12 Tracks</p>
									<h1 className="text-large mt-2 font-medium">
										Frontend Radio
									</h1>
								</div>
								<Button
									icon
									variant="ghost"
									onClick={() => setLiked((v) => !v)}
								>
									<HeartIcon
										className={liked ? '[&>path]:stroke-transparent' : ''}
										fill={liked ? 'currentColor' : 'none'}
									/>
								</Button>
							</div>

							<div className="mt-3 flex flex-col gap-1">
								<Slider
									aria-label="music progress"
									defaultValue={[50]}
									max={100}
									step={1}
								>
									<SliderThumb />
								</Slider>
								<div className="flex justify-between">
									<p className="text-sm">1:23</p>
									<p className="text-info-contrast/50 text-sm">4:32</p>
								</div>
							</div>

							<div className="flex w-full items-center justify-center">
								<Button icon variant="ghost">
									<Repeat1Icon className="text-info-contrast/80" />
								</Button>
								<Button icon variant="ghost">
									<SkipBackIcon />
								</Button>
								<Button icon variant="ghost">
									<PauseCircleIcon />
								</Button>
								<Button icon variant="ghost">
									<SkipForwardIcon />
								</Button>
								<Button icon variant="ghost">
									<ShuffleIcon />
								</Button>
							</div>
						</div>
					</div>
				</CardContent>
			</Card>
		</div>
	)
}

'use client'

import { Button } from '@nerdfish/react/button'
import { Card, CardFooter } from '@nerdfish/react/card'

export default function CardBlurredFooterExample() {
	return (
		<Card className="relative max-w-sm border-none">
			<img
				alt="Woman listing to music"
				className="rounded-container size-full object-cover"
				height={200}
				src="https://images.unsplash.com/photo-1619983081563-430f63602796?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1287"
				width={200}
			/>
			<CardFooter className="bg-blurred bottom-casual mx-best-friends p-best-friends rounded-[calc(var(--radius-container)-theme(padding.best-friends))] absolute right-0 left-0 flex justify-between">
				<p className="text-tiny text-white/80">Available soon.</p>
				<Button
					className="bg-blurred! border-border text-white shadow-md"
					size="sm"
				>
					Notify me
				</Button>
			</CardFooter>
		</Card>
	)
}