Card

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@dashboardpack/core/components/ui/card";
import { Button } from "@dashboardpack/core/components/ui/button";

import { useState } from "react";

export default function CardExample() {
  const [joined, setJoined] = useState(false);
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Your workspace</CardTitle>
        <CardDescription>Everything your team needs to ship.</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground">
          12 projects · 8 team members
        </p>
      </CardContent>
      <CardFooter>
        <Button
          onClick={() => setJoined(!joined)}
          variant={joined ? "secondary" : "default"}
        >
          {joined ? "Joined workspace" : "Join workspace"}
        </Button>
      </CardFooter>
    </Card>
  );
}