115 lines
5.4 KiB
TypeScript
115 lines
5.4 KiB
TypeScript
import {
|
|
Avatar,
|
|
Dropdown,
|
|
Label,
|
|
Separator,
|
|
SearchField,
|
|
RangeCalendar,
|
|
Button,
|
|
Popover,
|
|
PopoverDialog, PopoverArrow
|
|
} from "@heroui/react";
|
|
import {Calendar} from "@gravity-ui/icons";
|
|
import { useState } from "react";
|
|
import { WeekStrip } from "./WeekStrip";
|
|
import { FriendsNotes } from "./FriendsNotes";
|
|
import { DayView } from "./DayView";
|
|
import './journal.css'
|
|
|
|
export function Journal() {
|
|
const [selectedDate, setSelectedDate] = useState(new Date());
|
|
|
|
return (
|
|
<div className="p-8">
|
|
<Dropdown>
|
|
<Dropdown.Trigger aria-label="Open user menu" className="group flex items-center gap-3 cursor-pointer rounded-lg p-2 hover:bg-white/5">
|
|
<Avatar color="accent" className="rounded-lg">
|
|
<Avatar.Fallback className="rounded-lg">LR</Avatar.Fallback>
|
|
</Avatar>
|
|
<span className="flex flex-col">
|
|
<span className="text-sm font-bold text-[var(--text-h)]">Lena Rain</span>
|
|
<span className="text-xs text-[var(--text)]">Private journal</span>
|
|
</span>
|
|
<svg
|
|
className="ml-2 size-4 text-[var(--text)] transition-transform duration-200 group-aria-[expanded=true]:rotate-180"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
viewBox="0 0 24 24"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M6 9l6 6 6-6" />
|
|
</svg>
|
|
</Dropdown.Trigger>
|
|
<Dropdown.Popover className="bg-[var(--card-background)] rounded-xl">
|
|
<Dropdown.Menu
|
|
className="p-1"
|
|
onAction={(key) => console.log(key)}
|
|
>
|
|
<Dropdown.Item id="profile" textValue="Profile" className="rounded-lg text-[var(--text-h)]">
|
|
<Label className="font-medium text-white/90">Profile</Label>
|
|
</Dropdown.Item>
|
|
<Dropdown.Item id="settings" textValue="Settings" className="rounded-lg text-[var(--text-h)]">
|
|
<Label className="font-medium text-white/90">Settings</Label>
|
|
</Dropdown.Item>
|
|
<Separator className="bg-[var(--border-color)]" />
|
|
<Dropdown.Item id="logout" textValue="Log out" variant="danger" className="rounded-lg">
|
|
<Label>Log out</Label>
|
|
</Dropdown.Item>
|
|
</Dropdown.Menu>
|
|
</Dropdown.Popover>
|
|
</Dropdown>
|
|
<div className="container z-10 p-7 mx-auto flex flex-1 items-center justify-center gap-4">
|
|
<SearchField name="search" aria-label="Search for entries">
|
|
<SearchField.Group>
|
|
<SearchField.SearchIcon />
|
|
<SearchField.Input className="w-[280px]" placeholder="Search entries..." />
|
|
<SearchField.ClearButton />
|
|
</SearchField.Group>
|
|
</SearchField>
|
|
<div>
|
|
<Popover>
|
|
<Button variant="secondary">
|
|
<Calendar />
|
|
<span>Pick date range</span>
|
|
</Button>
|
|
<Popover.Content className="max-w-72" offset={10}>
|
|
<PopoverDialog aria-label="Date range picker">
|
|
<PopoverArrow />
|
|
<RangeCalendar aria-label="Trip dates" firstDayOfWeek="mon">
|
|
<RangeCalendar.Header>
|
|
<RangeCalendar.Heading />
|
|
<RangeCalendar.NavButton slot="previous" />
|
|
<RangeCalendar.NavButton slot="next" />
|
|
</RangeCalendar.Header>
|
|
<RangeCalendar.Grid>
|
|
<RangeCalendar.GridHeader>
|
|
{(day) => <RangeCalendar.HeaderCell>{day}</RangeCalendar.HeaderCell>}
|
|
</RangeCalendar.GridHeader>
|
|
<RangeCalendar.GridBody>
|
|
{(date) => <RangeCalendar.Cell date={date} />}
|
|
</RangeCalendar.GridBody>
|
|
</RangeCalendar.Grid>
|
|
</RangeCalendar>
|
|
</PopoverDialog>
|
|
</Popover.Content>
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
<div className="mx-auto max-w-3xl px-4">
|
|
<WeekStrip
|
|
selectedDate={selectedDate}
|
|
onDateChange={setSelectedDate}
|
|
/>
|
|
</div>
|
|
<div className="mx-auto mt-4 flex max-w-3xl gap-4 px-4">
|
|
<FriendsNotes />
|
|
<DayView selectedDate={selectedDate} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Journal; |