Popover

"use client";

import { Info } from "lucide-react";
import { Heading } from "react-aria-components";
import { Button } from "@/components/miyuki-ui/button";
import { Popover, PopoverArrow, PopoverTrigger } from "@/components/miyuki-ui/popover";

export default function PopoverDemo() {
  return (
    <PopoverTrigger>
      <Button variant="secondary" iconStart={<Info />}>
        Details
      </Button>
      <Popover>
        <PopoverArrow />
        <Heading slot="title" className="text-sm leading-5 font-semibold text-foreground">
          Net snowfall
        </Heading>
        <p className="mt-1.5 text-[13px] leading-5 text-pretty text-muted-foreground">
          New snow left on the board after settling and wind loss, over the past 24 hours.
        </p>
        <p className="mt-2 text-[13px] leading-5 text-pretty text-muted-foreground">
          Measured at 06:00 at the summit station, 1,831 m.
        </p>
      </Popover>
    </PopoverTrigger>
  );
}

"use client";

import { Bell } from "lucide-react";
import { Form, Heading } from "react-aria-components";
import { Button } from "@/components/miyuki-ui/button";
import { TextField } from "@/components/miyuki-ui/input";
import { Popover, PopoverTrigger } from "@/components/miyuki-ui/popover";

export default function PopoverFormDemo() {
  return (
    <PopoverTrigger>
      <Button variant="secondary" iconStart={<Bell />}>
        Snow alert
      </Button>
      <Popover placement="bottom start" className="w-72">
        {({ close }) => (
          <Form
            className="flex flex-col gap-4"
            onSubmit={(event) => {
              event.preventDefault();
              close();
            }}
          >
            <Heading slot="title" className="text-sm leading-5 font-semibold text-foreground">
              Alert me about Hakuba
            </Heading>
            <TextField
              label="When new snow is over"
              description="One message a day, at 06:30."
              defaultValue="20"
              inputMode="numeric"
              pattern="[0-9]*"
              suffix="cm"
              autoFocus
              isRequired
            />
            <Button type="submit" className="self-end">
              Save alert
            </Button>
          </Form>
        )}
      </Popover>
    </PopoverTrigger>
  );
}

"use client";

import { Heading } from "react-aria-components";
import { Button } from "@/components/miyuki-ui/button";
import { Popover, PopoverArrow, PopoverTrigger } from "@/components/miyuki-ui/popover";

const placements = [
  {
    placement: "top",
    label: "Top",
    text: "Opens above, and flips below near the top of the window.",
    cell: "col-start-2 row-start-1",
  },
  {
    placement: "left",
    label: "Left",
    text: "Opens to the left, and flips right near the edge.",
    cell: "col-start-1 row-start-2",
  },
  {
    placement: "right",
    label: "Right",
    text: "Opens to the right, and flips left near the edge.",
    cell: "col-start-3 row-start-2",
  },
  {
    placement: "bottom",
    label: "Bottom",
    text: "Opens below. This is the default.",
    cell: "col-start-2 row-start-3",
  },
] as const;

export default function PopoverPlacementsDemo() {
  return (
    <div className="grid grid-cols-3 grid-rows-3 gap-2">
      {placements.map(({ placement, label, text, cell }) => (
        <PopoverTrigger key={placement}>
          <Button variant="secondary" className={`w-24 ${cell}`}>
            {label}
          </Button>
          <Popover placement={placement} className="w-56">
            <PopoverArrow />
            <Heading slot="title" className="text-sm leading-5 font-semibold text-foreground">
              {label}
            </Heading>
            <p className="mt-1 text-[13px] leading-5 text-pretty text-muted-foreground">{text}</p>
          </Popover>
        </PopoverTrigger>
      ))}
    </div>
  );
}