Reveal

"use client";
import * as React from "react";
import { Button } from "@/components/ui/notchset/button";
import { Reveal } from "@/components/ui/notchset/reveal";

export default function RevealDemo() {
  const [cc, setCc] = React.useState(false);
  return (
    <div className="flex w-full max-w-md flex-col gap-2">
      <Button size="sm" className="self-start" onClick={() => setCc(!cc)}>
        {cc ? "Remove Cc" : "Add Cc"}
      </Button>
      <div className="rounded-[var(--ns-radius)] text-[length:var(--ns-text-small)] shadow-[inset_0_0_0_1px_var(--ns-line)]">
        <div className="px-3 py-2">
          <span className="text-[var(--ns-ink-3)]">To</span> Kevin Ito
        </div>
        <Reveal open={cc}>
          <div className="border-t border-[var(--ns-line-soft)] px-3 py-2">
            <span className="text-[var(--ns-ink-3)]">Cc</span> Priya Shah
          </div>
        </Reveal>
        <div className="border-t border-[var(--ns-line-soft)] px-3 py-2 text-[var(--ns-ink-3)]">Subject: Re: Order form</div>
      </div>
    </div>
  );
}