cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

⚡️ feat: add interaction on the example page

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-02-20 16:54:32 +07:00
parent af0d28e654
commit dc6bf3794a
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
1 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/frontend/src/pages/components/index.tsx
View File

@ -1,9 +1,13 @@
import { Button, ButtonOrLinkProps } from 'components/shared/Button';
import { Calendar } from 'components/shared/Calendar';
import { PlusIcon } from 'components/shared/CustomIcon';
import React from 'react';
import React, { useState } from 'react';
import { Value } from 'react-calendar/dist/cjs/shared/types';
const Page = () => {
const [singleDate, setSingleDate] = useState<Value>();
const [dateRange, setDateRange] = useState<Value>();
return (
<div className="relative h-full min-h-full">
<div className="flex flex-col items-center justify-center max-w-7xl mx-auto px-20 py-20">
@ -75,9 +79,25 @@ const Page = () => {
<div className="w-full h border border-gray-200 px-20 my-10" />
<div className="flex flex-col gap-10 items-center justify-between">
<h1 className="text-2xl font-bold">Calendar</h1>
<div className="flex gap-10 flex-wrap">
<Calendar />
<Calendar selectRange />
<div className="flex flex-col gap-10">
<div className="space-y-5 flex flex-col items-center">
<p>Selected date: {singleDate?.toString()}</p>
<Calendar
value={singleDate}
onChange={setSingleDate}
onSelect={setSingleDate}
/>
</div>
<div className="space-y-5 flex flex-col items-center">
<p>
Start date:{' '}
{dateRange instanceof Array ? dateRange[0]?.toString() : ''}{' '}
<br />
End date:{' '}
{dateRange instanceof Array ? dateRange[1]?.toString() : ''}
</p>
<Calendar selectRange value={dateRange} onChange={setDateRange} />
</div>
</div>
</div>
</div>