Popover

import { ActionButton } from "seed-design/ui/action-button";
import {
  PopoverBody,
  PopoverContent,
  PopoverFooter,
  PopoverRoot,
  PopoverTrigger,
} from "seed-design/ui/popover";

const PopoverPreview = () => {
  return (
    <PopoverRoot>
      <PopoverTrigger asChild>
        <ActionButton variant="neutralSolid">Open Popover</ActionButton>
      </PopoverTrigger>
      <PopoverContent title="제목" description="설명을 작성할 수 있어요">
        <PopoverBody>
          Popover 본문에는 사용자가 확인해야 할 내용이나 추가 액션을 배치할 수 있습니다.
        </PopoverBody>
        <PopoverFooter>
          <ActionButton variant="neutralSolid">확인</ActionButton>
        </PopoverFooter>
      </PopoverContent>
    </PopoverRoot>
  );
};

export default PopoverPreview;

import { ActionButton } from "seed-design/ui/action-button";
import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from "seed-design/ui/popover";

const PopoverTriggerExample = () => {
  return (
    <PopoverRoot>
      <PopoverTrigger asChild>
        <ActionButton variant="neutralSolid">Trigger</ActionButton>
      </PopoverTrigger>
      <PopoverContent title="제목">
        <PopoverBody>트리거를 눌러 Popover를 열 수 있습니다.</PopoverBody>
      </PopoverContent>
    </PopoverRoot>
  );
};

export default PopoverTriggerExample;

import { useState } from "react";
import { ActionButton } from "seed-design/ui/action-button";
import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from "seed-design/ui/popover";

const PopoverControlled = () => {
  const [open, setOpen] = useState(false);

  return (
    <PopoverRoot open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <ActionButton variant="neutralSolid">{open ? "닫기" : "열기"}</ActionButton>
      </PopoverTrigger>
      <PopoverContent title="제어 상태">
        <PopoverBody>open prop으로 Popover의 열림 상태를 직접 제어합니다.</PopoverBody>
      </PopoverContent>
    </PopoverRoot>
  );
};

export default PopoverControlled;

import { ActionButton } from "seed-design/ui/action-button";
import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from "seed-design/ui/popover";

const PopoverPlacement = () => {
  return (
    <PopoverRoot placement="right-start">
      <PopoverTrigger asChild>
        <ActionButton variant="neutralSolid">right-start</ActionButton>
      </PopoverTrigger>
      <PopoverContent title="Placement">
        <PopoverBody>
          placement prop으로 트리거 기준 위치를 지정합니다. 뷰포트를 벗어나면 자동으로 뒤집히거나
          이동합니다.
        </PopoverBody>
      </PopoverContent>
    </PopoverRoot>
  );
};

export default PopoverPlacement;

import { useState } from "react";
import { ActionButton } from "seed-design/ui/action-button";
import { PopoverAnchor, PopoverBody, PopoverContent, PopoverRoot } from "seed-design/ui/popover";

const PopoverAnchorExample = () => {
  const [open, setOpen] = useState(false);

  return (
    <PopoverRoot open={open} onOpenChange={setOpen}>
      <PopoverAnchor asChild>
        <div
          style={{
            padding: 16,
            borderRadius: 8,
            border: "1px dashed var(--seed-color-stroke-neutral-muted)",
          }}
        >
          이 영역을 기준으로 배치됩니다
        </div>
      </PopoverAnchor>
      <ActionButton variant="neutralSolid" onClick={() => setOpen((prev) => !prev)}>
        {open ? "닫기" : "열기"}
      </ActionButton>
      <PopoverContent title="Anchor">
        <PopoverBody>
          트리거와 분리된 요소를 기준으로 Popover의 위치를 잡을 수 있습니다.
        </PopoverBody>
      </PopoverContent>
    </PopoverRoot>
  );
};

export default PopoverAnchorExample;

import { ActionButton } from "seed-design/ui/action-button";
import {
  PopoverBody,
  PopoverContent,
  PopoverFooter,
  PopoverRoot,
  PopoverTrigger,
} from "seed-design/ui/popover";

const PopoverScroll = () => {
  return (
    <PopoverRoot>
      <PopoverTrigger asChild>
        <ActionButton variant="neutralSolid">긴 콘텐츠 Popover</ActionButton>
      </PopoverTrigger>
      <PopoverContent title="약관 동의" description="아래 내용을 확인해주세요">
        <PopoverBody>
          {Array.from({ length: 20 }, (_, index) => (
            <p key={index} style={{ margin: 0 }}>
              {index + 1}. 본문이 길어지면 Body가 스크롤되고, 스크롤 시 상단 divider와 하단 scroll
              fog가 나타납니다.
            </p>
          ))}
        </PopoverBody>
        <PopoverFooter>
          <ActionButton variant="neutralSolid">동의</ActionButton>
        </PopoverFooter>
      </PopoverContent>
    </PopoverRoot>
  );
};

export default PopoverScroll;