Card

import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function CardDemo() {
  return (
    <Card css={{ w: "full", maxW: "sm" }}>
      <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>
          <styled.div css={{ display: "flex", flexDir: "column", gap: "6" }}>
            <styled.div css={{ display: "grid", gap: "2" }}>
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" placeholder="[email protected]" required />
            </styled.div>
            <styled.div css={{ display: "grid", gap: "2" }}>
              <styled.div css={{ display: "flex", alignItems: "center" }}>
                <Label htmlFor="password">Password</Label>
                <styled.a
                  href="#"
                  css={{
                    ml: "auto",
                    display: "inline-block",
                    textStyle: "sm",
                    textUnderlineOffset: "4px",
                    "&:hover": { textDecoration: "underline" },
                  }}
                >
                  Forgot your password?
                </styled.a>
              </styled.div>
              <Input id="password" type="password" required />
            </styled.div>
          </styled.div>
        </form>
      </CardContent>
      <CardFooter css={{ flexDir: "column", gap: "2" }}>
        <Button type="submit" css={{ w: "full" }}>
          Login
        </Button>
        <Button variant="outline" css={{ w: "full" }}>
          Login with Google
        </Button>
      </CardFooter>
    </Card>
  );
}

import { LuBellRing, LuCheck } from "react-icons/lu";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";

const notifications = [
  {
    title: "Your call has been confirmed.",
    description: "1 hour ago",
  },
  {
    title: "You have a new message!",
    description: "1 hour ago",
  },
  {
    title: "Your subscription is expiring soon!",
    description: "2 hours ago",
  },
];

export default function CardNotification() {
  return (
    <Card css={{ w: "380px" }}>
      <CardHeader>
        <CardTitle>Notifications</CardTitle>
        <CardDescription>You have 3 unread messages.</CardDescription>
      </CardHeader>
      <CardContent css={{ display: "grid", gap: "4" }}>
        <styled.div
          css={{ display: "flex", alignItems: "center", gap: "4", borderWidth: "1px", p: "4" }}
        >
          <LuBellRing />
          <styled.div css={{ flex: 1, spaceY: "1" }}>
            <styled.p css={{ textStyle: "sm", fontWeight: "medium", lineHeight: "none" }}>
              Push Notifications
            </styled.p>
            <styled.p css={{ textStyle: "sm", color: "muted.fg" }}>
              Send notifications to device.
            </styled.p>
          </styled.div>
          <Switch />
        </styled.div>
        <div>
          {notifications.map((notification, index) => (
            <styled.div
              key={index}
              css={{
                mb: "4",
                display: "grid",
                gridTemplateColumns: "25px 1fr",
                alignItems: "flex-start",
                pb: "4",
                _last: { mb: "0", pb: "0" },
              }}
            >
              <styled.span
                css={{
                  display: "flex",
                  w: "2",
                  h: "2",
                  transform: "translateY(0.25rem)",
                  rounded: "full",
                  bg: "sky.500",
                }}
              />
              <styled.div css={{ spaceY: "1" }}>
                <styled.p css={{ textStyle: "sm", fontWeight: "medium", lineHeight: "none" }}>
                  {notification.title}
                </styled.p>
                <styled.p css={{ textStyle: "sm", color: "muted.fg" }}>
                  {notification.description}
                </styled.p>
              </styled.div>
            </styled.div>
          ))}
        </div>
      </CardContent>
      <CardFooter>
        <Button css={{ w: "full" }}>
          <LuCheck /> Mark all as read
        </Button>
      </CardFooter>
    </Card>
  );
}