68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
import { useState } from 'react';
|
|
import type { RecentThought } from '@/entities/session';
|
|
import { InboxList } from '@/features/inbox';
|
|
|
|
interface InboxToolPanelProps {
|
|
thoughts: RecentThought[];
|
|
onCompleteThought: (thought: RecentThought) => void;
|
|
onDeleteThought: (thought: RecentThought) => void;
|
|
onClear: () => void;
|
|
}
|
|
|
|
export const InboxToolPanel = ({
|
|
thoughts,
|
|
onCompleteThought,
|
|
onDeleteThought,
|
|
onClear,
|
|
}: InboxToolPanelProps) => {
|
|
const [confirmOpen, setConfirmOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="relative space-y-3.5">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<p className="text-xs text-white/58">나중에 모아보는 읽기 전용 인박스</p>
|
|
<button
|
|
type="button"
|
|
onClick={() => setConfirmOpen(true)}
|
|
className="rounded-full border border-white/20 bg-white/8 px-2.5 py-1 text-[11px] text-white/74 transition-colors hover:bg-white/14 hover:text-white"
|
|
>
|
|
모두 비우기
|
|
</button>
|
|
</div>
|
|
<InboxList
|
|
thoughts={thoughts}
|
|
onCompleteThought={onCompleteThought}
|
|
onDeleteThought={onDeleteThought}
|
|
/>
|
|
|
|
{confirmOpen ? (
|
|
<div className="absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-slate-950/70 px-3 backdrop-blur-sm">
|
|
<div className="w-full max-w-[272px] rounded-2xl border border-white/14 bg-slate-900/92 p-3.5 shadow-xl shadow-slate-950/45">
|
|
<p className="text-sm font-medium text-white/92">정말 인박스를 비울까요?</p>
|
|
<p className="mt-1 text-[11px] text-white/60">실수라면 토스트에서 실행취소할 수 있어요.</p>
|
|
<div className="mt-3 flex justify-end gap-1.5">
|
|
<button
|
|
type="button"
|
|
onClick={() => setConfirmOpen(false)}
|
|
className="rounded-full border border-white/20 bg-white/8 px-2.5 py-1 text-[11px] text-white/74 transition-colors hover:bg-white/14 hover:text-white"
|
|
>
|
|
취소
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
onClear();
|
|
setConfirmOpen(false);
|
|
}}
|
|
className="rounded-full border border-rose-200/34 bg-rose-200/16 px-2.5 py-1 text-[11px] text-rose-100/92 transition-colors hover:bg-rose-200/24"
|
|
>
|
|
비우기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|