Card

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
 
export function CardDemo() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle className="text-2xl">Welcome Back</CardTitle>
        <CardDescription>
          Please sign in to your account to continue.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <div className="flex flex-col space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" name="email" type="email" placeholder="Email" />
        </div>
        <div className="flex flex-col space-y-2">
          <Label htmlFor="password">Password</Label>
          <Input
            id="password"
            name="password"
            type="password"
            placeholder="Password"
            autoComplete="off"
          />
        </div>
      </CardContent>
      <CardFooter>
        <Button className="w-full">Sign in</Button>
      </CardFooter>
    </Card>
  );
}

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
 
export function CardDemo1() {
  return (
    <Card className="max-w-md shadow-none">
      <CardHeader>
        <CardTitle>Aeonz</CardTitle>
        <CardDescription>Frontend Developer</CardDescription>
        <CardAction>
          <Avatar>
            <AvatarImage src="https://github.com/aeonzz.png" alt="@aeonz" />
            <AvatarFallback>AE</AvatarFallback>
          </Avatar>
        </CardAction>
      </CardHeader>
      <CardContent>
        <p className="text-sm">
          Aeonz is a frontend developer who enjoys building cool things for the
          web.
        </p>
      </CardContent>
      <CardFooter className="flex-col justify-between gap-2 sm:flex-row [&_button]:w-full sm:[&_button]:w-fit">
        <Button variant="outline" size="sm">
          View Profile
        </Button>
        <Button size="sm">Connect</Button>
      </CardFooter>
    </Card>
  );
}