diff --git a/pages/notice/index.tsx b/pages/notice/index.tsx index 52a3019..dfe50e0 100644 --- a/pages/notice/index.tsx +++ b/pages/notice/index.tsx @@ -1,5 +1,5 @@ import { getNotifications } from '@/api/notification'; -import { Button, Nav } from '@/components'; +import { Button, Chip, Nav } from '@/components'; import DefaultLayout from '@/components/layouts/DefaultLayout'; import React, { useEffect } from 'react'; import Send from '@/public/icons/send.svg'; @@ -9,8 +9,34 @@ import { formatDateForNotification } from '@/utils/transform'; import NoLiked from '@/public/icons/noLiked.svg'; import { useRouter } from 'next/router'; +// const FILTER_LABEL: Record = { +// All_ +// }; + +const FILTERS = ['All', 'Send', 'Recieved']; + +interface filterProps { + selectedFilter?: string; + label: string; + onClick?: () => void; +} + +const Filter = ({ selectedFilter, label, onClick }: filterProps) => { + const styleBySelected = selectedFilter === label ? 'bg-r1 text-g0 border-r1' : 'border-g3 text-g5 bg-g0'; + + return ( +
+ {label} +
+ ); +}; + function Notice() { const [notifications, setNotifications] = React.useState([]); + const [selectedFilter, setSelectedFilter] = React.useState('All'); const fetchData = async () => { const data = await getNotifications(); @@ -34,6 +60,13 @@ function Notice() { return (
+
+ {FILTERS.map((filter, index) => ( +
+ setSelectedFilter(filter)} /> +
+ ))} +
{notifications.length === 0 && (