diff --git a/src/components/calendar-tab/index.tsx b/src/components/calendar-tab/index.tsx index 7856c68..394b12d 100644 --- a/src/components/calendar-tab/index.tsx +++ b/src/components/calendar-tab/index.tsx @@ -8,6 +8,7 @@ interface Props { tabListItems: CalendarDataKey[]; tabListProps?: TabListProps; boxProps?: BoxProps; + type?: 'subscribe'; } export default function CalendarTab({ @@ -16,6 +17,7 @@ export default function CalendarTab({ tabListItems, tabListProps, boxProps, + type, ...props }: Props & TabsProps) { const engToZh: Record = { @@ -40,6 +42,11 @@ export default function CalendarTab({ {engToZh[week]} ))} + {type === 'subscribe' ? ( + + 搜索 + + ) : null} diff --git a/src/pages/subscribe/index.tsx b/src/pages/subscribe/index.tsx index 4755437..6cbb3fb 100644 --- a/src/pages/subscribe/index.tsx +++ b/src/pages/subscribe/index.tsx @@ -1,16 +1,16 @@ -import { useMemo, useReducer } from 'react'; +import { useMemo, useReducer, useState } from 'react'; import { CiFilter } from 'react-icons/ci'; -import { Button, Flex, Menu, MenuButton, MenuItem, MenuList, Spinner } from '@chakra-ui/react'; +import { Box, Button, Flex, Input, Menu, MenuButton, MenuItem, MenuList, Spinner, TabPanel } from '@chakra-ui/react'; import { useCalendar } from '~/hooks/use-calendar'; import { useColorMode } from '~/hooks/use-color-mode'; +import Auth from '~/components/auth'; import CalendarTab from '~/components/calendar-tab'; import SubscribePanel from '~/components/subscribe-panel'; -import Auth from '~/components/auth'; -import type { Calendar, CalendarDataEntries, CalendarDataKey } from '~/types/calendar'; +import type { Calendar, CalendarDataEntries, CalendarDataKey, WeekCalendar } from '~/types/calendar'; interface FilterOptionsState { subscribed: boolean; @@ -122,6 +122,8 @@ export default function Subscribe() { const tabListItems = useMemo(() => Object.keys(calendarData ?? []) as CalendarDataKey[], [calendarData]); const tabPanelsItems = useMemo(() => Object.entries(calendarData ?? []) as CalendarDataEntries, [calendarData]); + const searchData = useMemo(() => tabPanelsItems.flatMap(([_, bangumis]) => bangumis ?? []), [tabPanelsItems]); + if (!calendarData || tabListItems.length === 0 || tabPanelsItems.length === 0) { return ( @@ -137,11 +139,39 @@ export default function Subscribe() { tabListItems={tabListItems} tabListProps={{ mr: '16' }} boxProps={{ mr: '16' }} + type="subscribe" > {tabPanelsItems.map(([week, bangumis]) => ( ))} + + + ); } + +function SearchPanel({ data }: { data: WeekCalendar[] }) { + const [key, setKey] = useState(''); + + const filterData = useMemo(() => { + return data.sort(b => (!b.status ? 1 : -1)).filter(_d => _d.name.includes(key)); + }, [data, key]); + + return ( + <> + setKey(e.target.value)} + /> + + + + + ); +}