/
ActivitySection.tsx
39 lines (38 loc) · 1.44 KB
/
ActivitySection.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { FC } from 'react';
import { ActivityTable } from './ActivityTable';
import { ActivityFilter, ActivityFilterProps } from './ActivityFilter';
import { ActivityCountDown } from './ActivityCountDown';
import { ActivityList } from './ActivityList';
import { useBreakpoints } from 'hooks/useBreakpoints';
import { ActivityExport } from './ActivityExport';
import { useActivity } from './ActivityProvider';
export const ActivitySection: FC<ActivityFilterProps> = ({ filters = [] }) => {
const { list: activities, all: allActivities } = useActivity();
const { aboveBreakpoint } = useBreakpoints();
return (
<section className="bg-background-900 rounded">
<header className="grid grid-cols-[auto_1fr] gap-16 px-20 py-24 md:grid-cols-[auto_1fr_auto]">
<h2 className="row-start-1">Activity</h2>
<ActivityFilter
filters={filters}
className="col-span-2 row-start-2 md:col-auto md:row-start-1"
/>
<div className="row-start-1 flex items-center gap-8 self-start justify-self-end">
<ActivityExport activities={allActivities} />
<ActivityCountDown time={30} />
</div>
</header>
{aboveBreakpoint('md') ? (
<ActivityTable
activities={activities}
hideIds={!filters.includes('ids')}
/>
) : (
<ActivityList
activities={activities}
hideIds={!filters.includes('ids')}
/>
)}
</section>
);
};