lena/JournalSite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
LenaGmbh
2026-07-28 21:58:43 +02:00
commit 2129f1f7d0
20 changed files with 3443 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/journal.tsx
+115
View File
@@ -0,0 +1,115 @@
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;