Separator

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Separator
} from "@pimolu/react";

export function DemoExample() {
  return (
    <div
      className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0 items-start"
    >
      <Card>
        <CardHeader>
          <CardTitle>Account settings</CardTitle>
          <CardDescription>Sections divided by separators.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-5 min-w-0">
            <div>
              <p>Profile</p>
              <p className="text-sm text-muted leading-relaxed">Name, photo, email</p>
            </div>
            <Separator />
            <div>
              <p>Security</p>
              <p className="text-sm text-muted leading-relaxed">Password, two-factor</p>
            </div>
            <Separator appearance="dashed" />
            <div>
              <p>Notifications</p>
              <p className="text-sm text-muted leading-relaxed">Email and push</p>
            </div>
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Toolbar</CardTitle>
          <CardDescription>Vertical separators between inline actions.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex items-center gap-4">
            <span>Profile</span>
            <Separator orientation="vertical" />
            <span>Settings</span>
            <Separator orientation="vertical" />
            <span>Logout</span>
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Order summary</CardTitle>
          <CardDescription>The total is separated from the lines.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-5 min-w-0">
            <div
              className="flex flex-wrap items-center gap-3 min-w-0 justify-between"
            >
              <span className="text-sm text-muted leading-relaxed">Subtotal</span>
              <span>€148</span>
            </div>
            <div
              className="flex flex-wrap items-center gap-3 min-w-0 justify-between"
            >
              <span className="text-sm text-muted leading-relaxed">Shipping</span>
              <span>€9</span>
            </div>
            <Separator thickness="medium" />
            <div
              className="flex flex-wrap items-center gap-3 min-w-0 justify-between"
            >
              <strong>Total</strong>
              <strong>€157</strong>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}