Section Card

"use client";

import {
  SectionCard,
  SectionGroupHeading,
} from "@/components/f-ui/section-card/section-card";
import { Separator } from "@/components/ui/separator";

function ContactFields() {
  return (
    <dl className="grid grid-cols-[8rem_1fr] gap-x-4 gap-y-2 text-sm">
      <dt className="text-muted-foreground">Owner</dt>
      <dd>Mei Chen</dd>
      <dt className="text-muted-foreground">Email</dt>
      <dd>mei.chen@example.com</dd>
    </dl>
  );
}

function FulfillmentFields() {
  return (
    <dl className="grid grid-cols-[8rem_1fr] gap-x-4 gap-y-2 text-sm">
      <dt className="text-muted-foreground">Carrier</dt>
      <dd>SF Express</dd>
      <dt className="text-muted-foreground">Ship by</dt>
      <dd>2026-03-08</dd>
    </dl>
  );
}

/** Titled card owns the h2; in-card groups stay muted. */
export function SectionCardDemo() {
  return (
    <SectionCard title="Order details">
      <div className="flex flex-col gap-3">
        <SectionGroupHeading>Contact</SectionGroupHeading>
        <ContactFields />
      </div>
      <Separator />
      <div className="flex flex-col gap-3">
        <SectionGroupHeading>Fulfillment</SectionGroupHeading>
        <FulfillmentFields />
      </div>
    </SectionCard>
  );
}

"use client";

import { RefreshCwIcon } from "lucide-react";

import { List } from "@/components/f-ui/list/list";
import { SectionCard } from "@/components/f-ui/section-card/section-card";
import { Button } from "@/components/ui/button";
import { IconGhostButton } from "@/demos/_shared/icon-ghost-button";

/** Title, count, ghost Refresh, and one solid Add share a single toolbar row. */
export function SectionCardToolbarDemo() {
  return (
    <SectionCard
      title="Members"
      count={2}
      tools={
        <IconGhostButton label="Refresh">
          <RefreshCwIcon className="size-4" />
        </IconGhostButton>
      }
      actions={<Button type="button">Add members</Button>}
    >
      <List>
        <List.Item extra="Owner">
          <List.Meta description="ada@example.com" title="Ada Lovelace" />
        </List.Item>
        <List.Item extra="Member">
          <List.Meta description="grace@example.com" title="Grace Hopper" />
        </List.Item>
      </List>
    </SectionCard>
  );
}

"use client";

import { SectionCard } from "@/components/f-ui/section-card/section-card";

const SAMPLE = Array.from({ length: 12 }, (_, i) =>
  `Paragraph ${i + 1}. Preview markdown and long reads scroll inside the card body. The scrollbar sits on the rounded border, not inset by padding.`,
).join("\n\n");

/** Fill-height preview: title stays; body is the flush scrollport. */
export function SectionCardFitHeightDemo() {
  return (
    <div className="flex h-80 min-h-0 flex-col">
      <SectionCard title="Preview" fitHeight>
        <p className="text-sm whitespace-pre-wrap">{SAMPLE}</p>
      </SectionCard>
    </div>
  );
}