-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat[STK-33]: create stack frequency section
- Loading branch information
Showing
11 changed files
with
344 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| "use client"; | ||
|
|
||
| import { format, isToday, isTomorrow } from "date-fns"; | ||
|
|
||
| import { Button, Calendar, Icon } from "@/ui"; | ||
| import { Dialog, Popover } from "@headlessui/react"; | ||
|
|
||
| import { Dispatch, Ref, SetStateAction, useState } from "react"; | ||
| import { usePopper } from "react-popper"; | ||
| import { twMerge } from "tailwind-merge"; | ||
|
|
||
| interface IDatePicker { | ||
| dateTime: Date; | ||
| setDateTime: Dispatch<SetStateAction<Date>>; | ||
| className?: string; | ||
| timeCaption: string; | ||
| } | ||
|
|
||
| export function DatePicker({ | ||
| dateTime, | ||
| setDateTime, | ||
| className, | ||
| timeCaption, | ||
| }: IDatePicker) { | ||
| const [currentDate, setCurrentDate] = useState<Date>(dateTime); | ||
| const [referenceElement, setReferenceElement] = useState< | ||
| HTMLButtonElement | undefined | ||
| >(); | ||
| const [popperElement, setPopperElement] = useState< | ||
| HTMLDivElement | undefined | ||
| >(); | ||
| const { styles, attributes } = usePopper(referenceElement, popperElement, { | ||
| placement: "bottom", | ||
| }); | ||
|
|
||
| const formattedDate = () => { | ||
| if (!dateTime) return "Pick a date"; | ||
| if (isToday(dateTime)) return format(dateTime, "'Today at' HH:mm"); | ||
| if (isTomorrow(dateTime)) return format(dateTime, "'Tomorrow at' HH:mm"); | ||
|
|
||
| return format(dateTime, "dd MMM Y @ HH:mm"); | ||
| }; | ||
|
|
||
| return ( | ||
| <Popover> | ||
| <Popover.Button | ||
| ref={setReferenceElement as Ref<HTMLButtonElement>} | ||
| className={twMerge("flex justify-between items-center", className)} // text-em-low if default dates | ||
| > | ||
| <span>{formattedDate()}</span> | ||
| <Icon name="caret-down" className="mr-2 h-4 w-4 text-black" /> | ||
| </Popover.Button> | ||
| <Popover.Panel | ||
| ref={setPopperElement as Ref<HTMLDivElement>} | ||
| style={styles.popper} | ||
| {...attributes.popper} | ||
| className="w-fit mx-auto max-md:!fixed max-md:!inset-0 max-md:!flex max-md:!items-center max-md:!justify-center max-md:!p-4 max-md:!transform" /* This styles will make it hover on mobile */ | ||
| > | ||
| {({ close }) => ( | ||
| <div className="flex flex-col space-y-2 bg-white divide-y divide-surface-50 rounded-2xl border border-surface-50"> | ||
| <Calendar | ||
| mode="single" | ||
| selected={currentDate} | ||
| onSelect={(newDate: Date | undefined) => { | ||
| if (!newDate) return; | ||
| if (currentDate) { | ||
| newDate.setHours(currentDate.getHours()); | ||
| newDate.setMinutes(currentDate.getMinutes()); | ||
| } | ||
| setCurrentDate(newDate); | ||
| }} | ||
| initialFocus | ||
| className="" | ||
| fromDate={new Date()} | ||
| /> | ||
| <div className="flex flex-col space-y-2 p-4 pt-2"> | ||
| <div className="flex justify-between items-center"> | ||
| <span>{timeCaption}</span> | ||
| <div className="flex space-x-2 items-center"> | ||
| <div className="flex items-center border border-surface-75 rounded-xl py-2 px-3 text-em-low"> | ||
| <input | ||
| className="outline-none font-semibold flex-grow text-sm w-5 text-center" | ||
| type="number" | ||
| value={currentDate ? format(currentDate, "HH") : ""} | ||
| onChange={(event) => { | ||
| const value = Number(event.target.value); | ||
| if (value >= 0 && value < 24) { | ||
| const newDate = new Date(currentDate); | ||
| newDate.setHours(value); | ||
| setCurrentDate(newDate); | ||
| } | ||
| }} | ||
| /> | ||
| </div> | ||
| <span>:</span> | ||
| <div className="flex items-center border border-surface-75 rounded-xl py-2 px-3 text-em-low"> | ||
| <input | ||
| className="outline-none font-semibold flex-grow text-sm w-5 text-center" | ||
| type="number" | ||
| value={currentDate ? format(currentDate, "mm") : ""} | ||
| onChange={(event) => { | ||
| const value = Number(event.target.value); | ||
| if (value >= 0 && value < 60) { | ||
| const newDate = new Date(currentDate); | ||
| newDate.setMinutes(value); | ||
| setCurrentDate(newDate); | ||
| } | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <Button | ||
| action="secondary" | ||
| onClick={() => { | ||
| setDateTime(currentDate); | ||
| close(); | ||
| }} | ||
| > | ||
| Set Date and Time | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </Popover.Panel> | ||
| </Popover> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| export * from "./navbar"; | ||
| export * from "./ConnectButton"; | ||
| export * from "./SelectNetwork"; | ||
| export * from "./DatePicker"; | ||
| export * from "./token-picker"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./TokenPicker"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| "use client"; | ||
|
|
||
| import * as React from "react"; | ||
|
|
||
| import { DayPicker } from "react-day-picker"; | ||
|
|
||
| import { buttonStyles, Icon } from "."; | ||
| import { twMerge } from "tailwind-merge"; | ||
|
|
||
| export type CalendarProps = React.ComponentProps<typeof DayPicker>; | ||
|
|
||
| function Calendar({ | ||
| className, | ||
| classNames, | ||
| showOutsideDays = true, | ||
| ...props | ||
| }: CalendarProps) { | ||
| return ( | ||
| <DayPicker | ||
| showOutsideDays={showOutsideDays} | ||
| className={className} | ||
| classNames={{ | ||
| months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", | ||
| month: "space-y-4", | ||
| caption: "flex justify-center relative items-center mx-4 py-3", | ||
| caption_label: "text-sm font-medium", | ||
| nav: "space-x-1 flex items-center", | ||
| nav_button: twMerge( | ||
| buttonStyles({ size: "icon", action: "quaternary" }), | ||
| "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100" | ||
| ), | ||
| nav_button_previous: "absolute left-1", | ||
| nav_button_next: "absolute right-1", | ||
| table: "w-full border-collapse space-y-1 mx-2", | ||
| head_row: "flex", | ||
| head_cell: "rounded-md w-9 font-normal text-[0.8rem]", | ||
| row: "flex w-full mt-2", | ||
| cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", | ||
| day: twMerge( | ||
| buttonStyles({ size: "icon", action: "quaternary" }), | ||
| "h-9 w-9 p-0 font-normal aria-selected:opacity-100 hover:bg-primary-400 focus:bg-primary-400" | ||
| ), | ||
| day_selected: "bg-primary-400 text-primary-foreground ", | ||
| day_today: "bg-accent text-accent-foreground", | ||
| day_outside: "opacity-50", | ||
| day_disabled: "opacity-50", | ||
| day_range_middle: | ||
| "aria-selected:bg-accent aria-selected:text-accent-foreground", | ||
| day_hidden: "invisible", | ||
| ...classNames, | ||
| }} | ||
| components={{ | ||
| IconLeft: ({ ...props }) => ( | ||
| <Icon name="caret-left" className="h-4 w-4" /> | ||
| ), | ||
| IconRight: ({ ...props }) => ( | ||
| <Icon name="caret-right" className="h-4 w-4" /> | ||
| ), | ||
| }} | ||
| {...props} | ||
| /> | ||
| ); | ||
| } | ||
| Calendar.displayName = "Calendar"; | ||
|
|
||
| export { Calendar }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.