Card

1import Image from "next/image"
2 
3import {
4  Example,
5  ExampleWrapper,
6} from "@/registry/radix-sera/components/example"
7import {
8  Avatar,
9  AvatarFallback,
10  AvatarGroup,
11  AvatarGroupCount,
12  AvatarImage,
13} from "@/registry/radix-sera/ui/avatar"
14import { Button } from "@/registry/radix-sera/ui/button"
15import {
16  Card,
17  CardAction,
18  CardContent,
19  CardDescription,
20  CardFooter,
21  CardHeader,
22  CardTitle,
23} from "@/registry/radix-sera/ui/card"
24import { Field, FieldGroup, FieldLabel } from "@/registry/radix-sera/ui/field"
25import { Input } from "@/registry/radix-sera/ui/input"
26import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
27 
28export default function CardExample() {
29  return (
30    <ExampleWrapper>
31      <CardDefault />
32      <CardSmall />
33      <CardHeaderWithBorder />
34      <CardFooterWithBorder />
35      <CardHeaderWithBorderSmall />
36      <CardFooterWithBorderSmall />
37      <CardWithImage />
38      <CardWithImageSmall />
39      <CardLogin />
40      <CardMeetingNotes />
41    </ExampleWrapper>
42  )
43}
44 
45function CardLogin() {
46  return (
47    <Example title="Login">
48      <Card className="mx-auto w-full max-w-sm">
49        <CardHeader>
50          <CardTitle>Login to your account</CardTitle>
51          <CardDescription>
52            Enter your email below to login to your account
53          </CardDescription>
54        </CardHeader>
55        <CardContent>
56          <form>
57            <FieldGroup>
58              <Field>
59                <FieldLabel htmlFor="email">Email</FieldLabel>
60                <Input
61                  id="email"
62                  type="email"
63                  placeholder="m@example.com"
64                  required
65                />
66              </Field>
67              <Field>
68                <div className="flex items-center">
69                  <FieldLabel htmlFor="password">Password</FieldLabel>
70                  <a
71                    href="#"
72                    className="ml-auto inline-block underline-offset-4 hover:underline"
73                  >
74                    Forgot your password?
75                  </a>
76                </div>
77                <Input id="password" type="password" required />
78              </Field>
79            </FieldGroup>
80          </form>
81        </CardContent>
82        <CardFooter className="flex-col gap-2">
83          <Button type="submit" className="w-full">
84            Login
85          </Button>
86          <Button variant="outline" className="w-full">
87            Login with Google
88// … truncated