diff --git a/index.html b/index.html index dd39c1e..2c9dd28 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,10 @@ - Event Horizon + diff --git a/src/App.tsx b/src/App.tsx index 505b20e..5aa9d4e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,15 +1,9 @@ import { useMemo } from "react"; -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from "./components/ui/tooltip"; import { Helmet } from "react-helmet"; import { useFormData } from "./lib/hooks"; +import { FloatingMenu } from "./components/floating-menu"; import { Toaster } from "./components/ui/toaster"; -import { ModeToggle } from "./components/mode-toggle"; import { MainContent } from "./components/main-content"; -import { SettingsToggle } from "./components/settings-toggle"; import { BackgroundImage } from "./components/background-image"; export default function App() { @@ -20,27 +14,16 @@ export default function App() { ); return ( - <> +
{title} - - -
- - - - - Open settings modal - - - - - - Change color scheme - +
+ +
+ - +
); } diff --git a/src/components/floating-menu.tsx b/src/components/floating-menu.tsx new file mode 100644 index 0000000..945ee7c --- /dev/null +++ b/src/components/floating-menu.tsx @@ -0,0 +1,23 @@ +import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip"; +import { ModeToggle } from "./mode-toggle"; +import { SettingsToggle } from "./settings-toggle"; +import { cn } from "../lib/utils"; + +export function FloatingMenu({ className }: { className?: string }) { + return ( +
+ + + + + Open settings modal + + + + + + Change color scheme + +
+ ); +} diff --git a/src/components/picture-upload.tsx b/src/components/picture-upload.tsx index d5f634f..cd2d9f3 100644 --- a/src/components/picture-upload.tsx +++ b/src/components/picture-upload.tsx @@ -40,7 +40,10 @@ export function PictureUpload({ - + e.preventDefault()} + > Picture upload @@ -53,7 +56,6 @@ export function PictureUpload({ - {/* */} OR
) => void; + className?: string; }) { const { endDate, digits, title, imageId } = data; + const [isDateTimeOpen, setIsDateTimeOpen] = useState(false); return ( -
+
{ setDirtyData({ title: e.target.value }); @@ -31,6 +43,9 @@ export function SettingsForm({ setDate={(date) => { setDirtyData({ endDate: date }); }} + popoverRootProps={{ + onOpenChange: setIsDateTimeOpen, + }} /> (imgur image id)
- + { diff --git a/src/components/settings-toggle.tsx b/src/components/settings-toggle.tsx index 537c88b..fe99227 100644 --- a/src/components/settings-toggle.tsx +++ b/src/components/settings-toggle.tsx @@ -36,7 +36,10 @@ export function SettingsToggle() { - + e.preventDefault()} + > Timer settings diff --git a/src/components/ui/datetime-picker.tsx b/src/components/ui/datetime-picker.tsx index 9b2b6ea..9f340c8 100644 --- a/src/components/ui/datetime-picker.tsx +++ b/src/components/ui/datetime-picker.tsx @@ -1,21 +1,28 @@ import * as React from "react"; +import { Label } from "./label"; +import { Input } from "./input"; import { DateTime } from "luxon"; -import { Calendar as CalendarIcon } from "lucide-react"; - +import { cn } from "@/lib/utils"; import { Button } from "./button"; import { Calendar } from "./calendar"; -import { Popover, PopoverContent, PopoverTrigger } from "./popover"; -import { cn } from "@/lib/utils"; +import { Calendar as CalendarIcon } from "lucide-react"; import { SelectSingleEventHandler } from "react-day-picker"; -import { Label } from "./label"; -import { Input } from "./input"; +import { Popover, PopoverContent, PopoverTrigger } from "./popover"; +import * as PopoverPrimitive from "@radix-ui/react-popover"; interface DateTimePickerProps { date: DateTime; setDate: (date: DateTime) => void; + popoverRootProps?: React.ComponentPropsWithoutRef< + typeof PopoverPrimitive.Root + >; } -export function DateTimePicker({ date, setDate }: DateTimePickerProps) { +export function DateTimePicker({ + date, + setDate, + popoverRootProps, +}: DateTimePickerProps) { const [selectedDateTime, setSelectedDateTime] = React.useState(date); @@ -45,6 +52,7 @@ export function DateTimePicker({ date, setDate }: DateTimePickerProps) {
+