-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4f6668d
commit ae316f8
Showing
33 changed files
with
1,265 additions
and
169 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "$schema": "https://ui.shadcn.com/schema.json", | ||
| "style": "new-york", | ||
| "rsc": false, | ||
| "tsx": true, | ||
| "tailwind": { | ||
| "config": "tailwind.config.js", | ||
| "css": "src/index.css", | ||
| "baseColor": "neutral", | ||
| "cssVariables": true, | ||
| "prefix": "" | ||
| }, | ||
| "aliases": { | ||
| "components": "@/components", | ||
| "utils": "@/lib/utils", | ||
| "ui": "@/components/ui", | ||
| "lib": "@/lib", | ||
| "hooks": "@/hooks" | ||
| } | ||
| } |
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
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,24 @@ | ||
| import { Toaster as Sonner } from 'sonner'; | ||
|
|
||
| type ToasterProps = React.ComponentProps<typeof Sonner>; | ||
|
|
||
| const Toaster = ({ ...props }: ToasterProps) => { | ||
| return ( | ||
| <Sonner | ||
| className="toaster group" | ||
| position="bottom-right" | ||
| toastOptions={{ | ||
| classNames: { | ||
| toast: | ||
| 'group toast font-sans group-[.toaster]:bg-accent-50 border group-[.toaster]:text-accent-900 group-[.toaster]:border-accent-900 group-[.toaster]:border-opacity-10 group-[.toaster]:shadow-lg', | ||
| title: 'group-[.toast]:font-semibold', | ||
| description: 'group-[.toast]:text-accent-700 group-[.toast]:font-semibold', | ||
| actionButton: 'group-[.toast]:bg-accent-50 group-[.toast]:text-accent-900', | ||
| cancelButton: 'group-[.toast]:bg-accent-50 group-[.toast]:text-accent-900' | ||
| } | ||
| }} | ||
| {...props} | ||
| /> | ||
| ); | ||
| }; | ||
| export { Toaster }; |
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,27 @@ | ||
| import { cn } from '@critter/react/utils/cn'; | ||
| import * as TooltipPrimitive from '@radix-ui/react-tooltip'; | ||
| import * as React from 'react'; | ||
|
|
||
| const TooltipProvider = TooltipPrimitive.Provider; | ||
|
|
||
| const Tooltip = TooltipPrimitive.Root; | ||
|
|
||
| const TooltipTrigger = TooltipPrimitive.Trigger; | ||
|
|
||
| const TooltipContent = React.forwardRef< | ||
| React.ElementRef<typeof TooltipPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> | ||
| >(({ className, sideOffset = 4, ...props }, ref) => ( | ||
| <TooltipPrimitive.Content | ||
| ref={ref} | ||
| sideOffset={sideOffset} | ||
| className={cn( | ||
| 'z-50 overflow-hidden rounded-lg bg-accent-300 pt-2 pb-2.5 shadow-[inset_0_-7px_0px_-0.25rem_rgba(0,0,0,0.15)] px-3 text-sm text-accent-950 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| TooltipContent.displayName = TooltipPrimitive.Content.displayName; | ||
|
|
||
| export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }; |
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,9 +1,25 @@ | ||
| import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/feedback/Tooltip'; | ||
| import { format } from 'date-fns'; | ||
| import { formatInTimeZone } from 'date-fns-tz'; | ||
| import { FC } from 'react'; | ||
|
|
||
| interface TimestampProps { | ||
| date: Date; | ||
| } | ||
|
|
||
| export const Timestamp: FC<TimestampProps> = ({ date }) => { | ||
| return <span>{formatInTimeZone(date, 'America/Chicago', 'PP p')}</span>; | ||
| return ( | ||
| <TooltipProvider> | ||
| <Tooltip> | ||
| <TooltipTrigger> | ||
| <span>{formatInTimeZone(date, 'America/Chicago', 'PP p')}</span> | ||
| </TooltipTrigger> | ||
| <TooltipContent> | ||
| <span className="flex gap-2 items-center"> | ||
| <span>Your time: {format(date, 'PP p')}</span> | ||
| </span> | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| ); | ||
| }; |
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,50 @@ | ||
| import { Note } from '@/components/containers/Note'; | ||
| import { Timestamp } from '@/components/text/Timestamp'; | ||
| import { useCapture } from '@/services/api/capture'; | ||
| import { FC, useMemo, useState } from 'react'; | ||
| import { useParams } from 'react-router'; | ||
| import { Dock } from '../../components/controls/Dock'; | ||
| import { Main } from '../snapshots/images/Main'; | ||
|
|
||
| export const Capture: FC = () => { | ||
| const params = useParams(); | ||
| const id = useMemo(() => Number(params.id), [params.id]); | ||
| const snapshot = useCapture(id); | ||
|
|
||
| const [mainImageIndex, setMainImageIndex] = useState<number | undefined>( | ||
| snapshot.data.images.length > 0 ? 0 : undefined | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="flex-1 bg-accent-100 p-8 flex flex-col gap-6 items-center"> | ||
| <nav className="w-full relative flex items-center justify-end"> | ||
| <Note className="w-fit z-10 absolute top-0 left-0 rounded-md min-w-96"> | ||
| <h2 className="text-2xl font-medium px-3 outline-none bg-accent-50 placeholder:opacity-25 placeholder:text-accent-900"> | ||
| {snapshot.data.name} | ||
| </h2> | ||
| <p className="px-3 py-1 text-sm"> | ||
| Captured by <strong>{snapshot.data.createdBy}</strong> | ||
| </p> | ||
| <p className="px-3 py-1 text-sm"> | ||
| Captured at{' '} | ||
| <strong> | ||
| <Timestamp date={new Date(snapshot.data.createdAt)} /> | ||
| </strong> | ||
| </p> | ||
| </Note> | ||
| </nav> | ||
| <div className="w-full relative flex-1"> | ||
| <div className="h-full flex items-center justify-center"> | ||
| {mainImageIndex !== undefined && ( | ||
| <Main key={snapshot.data.images[mainImageIndex].id} url={snapshot.data.images[mainImageIndex].url} /> | ||
| )} | ||
| </div> | ||
| </div> | ||
| <Dock | ||
| images={snapshot.data.images.map(i => i.url)} | ||
| selectedIndex={mainImageIndex} | ||
| setSelectedIndex={setMainImageIndex} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.