기능 | 계좌번호 - ssseok/wedding.invitation GitHub Wiki

목적

  • 결혼식 참석이 어려우신 분들을 위해 계좌번호를 기재했습니다.

설치

bunx --bun shadcn@latest add separator

bunx --bun shadcn@latest add accordion

코드

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/common/components/ui/accordion';
import { Separator } from '@/common/components/ui/separator';
import { copy } from '@/lib/copy';
import { cn } from '@/lib/utils';
import { Copy } from 'lucide-react';

export default function BankAccordion({
  title,
  bankList,
}: {
  title: string;
  bankList: { holder: string; bank: string; number: string }[];
}) {
  return (
    <div className='mt-8 mx-8'>
      <Accordion type='single' collapsible>
        <AccordionItem value='item-1'>
          <AccordionTrigger className='dark:text-background'>
            {title}
          </AccordionTrigger>
          <AccordionContent className='space-y-4'>
            {bankList.map(({ holder, bank, number }, i) => (
              <div key={i} className='relative  text-xs'>
                <div className='flex items-center h-3 space-x-2'>
                  <div>{holder}</div>
                  <Separator orientation='vertical' className='bg-foreground' />
                  <div>{bank}</div>
                  <Separator orientation='vertical' className='bg-foreground' />
                  <div>{number}</div>
                </div>
                <button
                  className={cn(
                    'absolute top-0.5 right-0',
                    ' transition-colors ',
                  )}
                  onClick={() => copy(`${bank} ${number}`)}
                >
                  <Copy className='w-4 h-4 cursor-pointer' />
                </button>
              </div>
            ))}
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}
  • copy component는 사용하는 곳이 많기에 lib 폴더에 따로 빼서 관리하였습니다. (copy component도 wiki에 설명에 적어놓겠습니다.)
⚠️ **GitHub.com Fallback** ⚠️