diff --git a/packages/explorer/src/components/ElapsedTime.tsx b/packages/explorer/src/components/ElapsedTime.tsx new file mode 100644 index 0000000000..b6949ad692 --- /dev/null +++ b/packages/explorer/src/components/ElapsedTime.tsx @@ -0,0 +1,25 @@ +import { useEffect, useState } from "react"; +import { timeSince } from "../lib/utils"; + +type Props = { + timestamp: number; +}; + +export function ElapsedTime({ timestamp }: Props) { + const [elapsedTime, setElapsedTime] = useState(timeSince(new Date(timestamp))); + + useEffect(() => { + let animationFrameId: number; + + const updateElapsedTime = () => { + setElapsedTime(timeSince(new Date(timestamp))); + animationFrameId = requestAnimationFrame(updateElapsedTime); + }; + + animationFrameId = requestAnimationFrame(updateElapsedTime); + + return () => cancelAnimationFrame(animationFrameId); + }, [timestamp]); + + return <>{elapsedTime}; +} diff --git a/packages/explorer/src/components/ui/Badge.tsx b/packages/explorer/src/components/ui/Badge.tsx new file mode 100644 index 0000000000..78042479b1 --- /dev/null +++ b/packages/explorer/src/components/ui/Badge.tsx @@ -0,0 +1,33 @@ +import { type VariantProps, cva } from "class-variance-authority"; +import * as React from "react"; +import { cn } from "../../lib/utils"; + +const badgeVariants = cva( + cn( + "inline-flex items-center px-2.5 py-0.5", + "rounded-md border", + "text-xs font-semibold transition-colors", + "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + ), + { + variants: { + variant: { + default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +); + +export interface BadgeProps extends React.HTMLAttributes, VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return
; +} + +export { Badge, badgeVariants }; diff --git a/packages/explorer/src/components/ui/ScrollArea.tsx b/packages/explorer/src/components/ui/ScrollArea.tsx new file mode 100644 index 0000000000..6634978fc9 --- /dev/null +++ b/packages/explorer/src/components/ui/ScrollArea.tsx @@ -0,0 +1,39 @@ +"use client"; + +import * as React from "react"; +import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"; +import { cn } from "../../lib/utils"; + +const ScrollArea = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + + + +)); +ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName; + +const ScrollBar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = "vertical", ...props }, ref) => ( + + + +)); +ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName; + +export { ScrollArea, ScrollBar };