status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Create calendar function to take range (CUSTOM)

This commit is contained in:
Hristo Nedelkov 2023-09-14 12:56:16 +03:00
parent 8ae0aec302
commit 8bd935010e
1 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/pages/Dashboard/BalanceLineChart/BalanceChardCard.tsx
View File

@ -6,9 +6,24 @@ import Icon from "../../../components/General/Icon";
import { Calendar } from '@status-im/components'
import { useState } from "react";
type DateRangeType = {
start: Date | null;
end: Date | null;
};
const BalanceChardCard = () => {
const [isCalendarVisible, setIsCalendarVisible] = useState(false)
let calendarStyle = { backgroundColor: 'white' }
const [dateRange, setDateRange] = useState<DateRangeType>({ start: null, end: null });
const calendarStyle = { backgroundColor: 'white', width: 'fit-content' }
const handleDayClick = (day: any) => {
if (!dateRange.start) {
setDateRange({ start: day, end: null });
} else if (!dateRange.end) {
setDateRange({ start: dateRange.start, end: day });
} else {
setDateRange({ start: day, end: null });
}
};
return (
<DashboardCardWrapper >
<Stack style={{ width: '536px' }}>
@ -23,12 +38,12 @@ const BalanceChardCard = () => {
</XStack>
</YStack>
<XStack onClick={() => setIsCalendarVisible((prev) => !prev)} style={{ border: '2px solid #09101C14', height: 'fit-content', padding: '3px', borderRadius: '10px' }}>
<Text size={13} weight={'semibold'}>01 APR 2022</Text>
<Text size={13} weight={'semibold'}> → 31 MAR 2023</Text>
<Text size={13} weight={'semibold'}>{dateRange.start ? dateRange.start.toLocaleDateString() : 'Start Date'}</Text>
<Text size={13} weight={'semibold'}>{dateRange.end ? dateRange.end.toLocaleDateString() : 'End Date'}</Text>
<Icon src="/icons/edit.svg" />
</XStack>
{isCalendarVisible && <Calendar style={{ ...calendarStyle }} />}
</XStack>
{isCalendarVisible && <Calendar style={{ ...calendarStyle }} onDayClick={handleDayClick} />}
<LineChart />
</YStack>
</Stack>