From b97f3b42e1bad5753728315b5c7ebdacf6f81172 Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Mon, 6 Jan 2025 23:48:56 -0800 Subject: [PATCH] initial commit --- .gitignore | 2 + app/components/DateWeatherLinks.tsx | 47 + app/components/QuickLinks.tsx | 49 + app/components/WhoisChart.tsx | 111 + app/globals.css | 35 + app/layout.tsx | 26 + app/page.tsx | 74 + components.json | 21 + components/ui/accordion.tsx | 58 + components/ui/alert-dialog.tsx | 141 + components/ui/alert.tsx | 59 + components/ui/aspect-ratio.tsx | 7 + components/ui/avatar.tsx | 50 + components/ui/badge.tsx | 36 + components/ui/breadcrumb.tsx | 115 + components/ui/button.tsx | 56 + components/ui/calendar.tsx | 66 + components/ui/card.tsx | 79 + components/ui/carousel.tsx | 262 ++ components/ui/chart.tsx | 365 +++ components/ui/checkbox.tsx | 30 + components/ui/collapsible.tsx | 11 + components/ui/command.tsx | 153 + components/ui/context-menu.tsx | 200 ++ components/ui/dialog.tsx | 122 + components/ui/drawer.tsx | 118 + components/ui/dropdown-menu.tsx | 200 ++ components/ui/form.tsx | 178 ++ components/ui/hover-card.tsx | 29 + components/ui/input-otp.tsx | 71 + components/ui/input.tsx | 22 + components/ui/label.tsx | 26 + components/ui/menubar.tsx | 236 ++ components/ui/navigation-menu.tsx | 128 + components/ui/pagination.tsx | 117 + components/ui/popover.tsx | 31 + components/ui/progress.tsx | 28 + components/ui/radio-group.tsx | 44 + components/ui/resizable.tsx | 45 + components/ui/scroll-area.tsx | 48 + components/ui/select.tsx | 160 + components/ui/separator.tsx | 31 + components/ui/sheet.tsx | 140 + components/ui/sidebar.tsx | 763 +++++ components/ui/skeleton.tsx | 15 + components/ui/slider.tsx | 28 + components/ui/sonner.tsx | 31 + components/ui/switch.tsx | 29 + components/ui/table.tsx | 117 + components/ui/tabs.tsx | 55 + components/ui/textarea.tsx | 22 + components/ui/toast.tsx | 129 + components/ui/toaster.tsx | 35 + components/ui/toggle-group.tsx | 61 + components/ui/toggle.tsx | 45 + components/ui/tooltip.tsx | 30 + components/ui/use-mobile.tsx | 19 + components/ui/use-toast.ts | 194 ++ hooks/use-mobile.tsx | 19 + hooks/use-toast.ts | 194 ++ lib/data-context.ts | 65 + lib/utils.ts | 21 + lib/wmocodes.json | 282 ++ next-env.d.ts | 5 + next.config.mjs | 49 + package-lock.json | 4198 +++++++++++++++++++++++++++ package.json | 70 + postcss.config.mjs | 8 + public/placeholder-logo.png | Bin 0 -> 958 bytes public/placeholder-logo.svg | 1 + public/placeholder-user.jpg | Bin 0 -> 2615 bytes public/placeholder.jpg | Bin 0 -> 1596 bytes public/placeholder.svg | 1 + styles/globals.css | 94 + tailwind.config.ts | 96 + tsconfig.json | 27 + 76 files changed, 10530 insertions(+) create mode 100644 .gitignore create mode 100644 app/components/DateWeatherLinks.tsx create mode 100644 app/components/QuickLinks.tsx create mode 100644 app/components/WhoisChart.tsx create mode 100644 app/globals.css create mode 100644 app/layout.tsx create mode 100644 app/page.tsx create mode 100644 components.json create mode 100644 components/ui/accordion.tsx create mode 100644 components/ui/alert-dialog.tsx create mode 100644 components/ui/alert.tsx create mode 100644 components/ui/aspect-ratio.tsx create mode 100644 components/ui/avatar.tsx create mode 100644 components/ui/badge.tsx create mode 100644 components/ui/breadcrumb.tsx create mode 100644 components/ui/button.tsx create mode 100644 components/ui/calendar.tsx create mode 100644 components/ui/card.tsx create mode 100644 components/ui/carousel.tsx create mode 100644 components/ui/chart.tsx create mode 100644 components/ui/checkbox.tsx create mode 100644 components/ui/collapsible.tsx create mode 100644 components/ui/command.tsx create mode 100644 components/ui/context-menu.tsx create mode 100644 components/ui/dialog.tsx create mode 100644 components/ui/drawer.tsx create mode 100644 components/ui/dropdown-menu.tsx create mode 100644 components/ui/form.tsx create mode 100644 components/ui/hover-card.tsx create mode 100644 components/ui/input-otp.tsx create mode 100644 components/ui/input.tsx create mode 100644 components/ui/label.tsx create mode 100644 components/ui/menubar.tsx create mode 100644 components/ui/navigation-menu.tsx create mode 100644 components/ui/pagination.tsx create mode 100644 components/ui/popover.tsx create mode 100644 components/ui/progress.tsx create mode 100644 components/ui/radio-group.tsx create mode 100644 components/ui/resizable.tsx create mode 100644 components/ui/scroll-area.tsx create mode 100644 components/ui/select.tsx create mode 100644 components/ui/separator.tsx create mode 100644 components/ui/sheet.tsx create mode 100644 components/ui/sidebar.tsx create mode 100644 components/ui/skeleton.tsx create mode 100644 components/ui/slider.tsx create mode 100644 components/ui/sonner.tsx create mode 100644 components/ui/switch.tsx create mode 100644 components/ui/table.tsx create mode 100644 components/ui/tabs.tsx create mode 100644 components/ui/textarea.tsx create mode 100644 components/ui/toast.tsx create mode 100644 components/ui/toaster.tsx create mode 100644 components/ui/toggle-group.tsx create mode 100644 components/ui/toggle.tsx create mode 100644 components/ui/tooltip.tsx create mode 100644 components/ui/use-mobile.tsx create mode 100644 components/ui/use-toast.ts create mode 100644 hooks/use-mobile.tsx create mode 100644 hooks/use-toast.ts create mode 100644 lib/data-context.ts create mode 100644 lib/utils.ts create mode 100644 lib/wmocodes.json create mode 100644 next-env.d.ts create mode 100644 next.config.mjs create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 postcss.config.mjs create mode 100644 public/placeholder-logo.png create mode 100644 public/placeholder-logo.svg create mode 100644 public/placeholder-user.jpg create mode 100644 public/placeholder.jpg create mode 100644 public/placeholder.svg create mode 100644 styles/globals.css create mode 100644 tailwind.config.ts create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b90a368 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +.next diff --git a/app/components/DateWeatherLinks.tsx b/app/components/DateWeatherLinks.tsx new file mode 100644 index 0000000..1c004fa --- /dev/null +++ b/app/components/DateWeatherLinks.tsx @@ -0,0 +1,47 @@ +"use client"; + +import { useState, useEffect, useContext } from "react"; +import QuickLinks from "./QuickLinks"; +import { DataContext } from "@/lib/data-context"; + +export default function DateWeatherLinksWelcome() { + const [date, setDate] = useState(new Date()); + const data = useContext(DataContext); + + useEffect(() => { + const timer = setInterval(() => setDate(new Date()), 1000); + return () => clearInterval(timer); + }, []); + + return ( +
+
+
+

+ {date.toLocaleDateString(undefined, { + weekday: "long", + year: "numeric", + month: "long", + day: "numeric", + })} +

+

+ {date.toLocaleTimeString()} +

+
+
+

+ {data?.weather + ? Math.round(data.weather.temperature * (9 / 5) + 32) + "°F" + : "--"} +

+

+ {data?.weather ? data.weather.description : "--"} +

+
+
+
+ +
+ ); +} diff --git a/app/components/QuickLinks.tsx b/app/components/QuickLinks.tsx new file mode 100644 index 0000000..8a853cf --- /dev/null +++ b/app/components/QuickLinks.tsx @@ -0,0 +1,49 @@ +import { + Skull, + Search, + GitPullRequest, + Mail, + Fish, + ChartArea, +} from "lucide-react"; + +export default function QuickLinks() { + const links = [ + { name: "Google", url: "https://www.google.com", icon: Search }, + { name: "Gitea", url: "https://git.simponic.xyz", icon: GitPullRequest }, + { + name: "Mail", + url: "https://roundcube.internal.simponic.xyz", + icon: Mail, + }, + { + name: "Jellyfin", + url: "https://jellyfin.internal.simponic.xyz", + icon: Fish, + }, + { + name: "Uptime Kuma", + url: "https://uptime.internal.simponic.xyz", + icon: ChartArea, + }, + ]; + + return ( +
+ {links.map((link) => { + const Icon = link.icon; + return ( + + + {link.name} + + ); + })} +
+ ); +} diff --git a/app/components/WhoisChart.tsx b/app/components/WhoisChart.tsx new file mode 100644 index 0000000..43f5eb9 --- /dev/null +++ b/app/components/WhoisChart.tsx @@ -0,0 +1,111 @@ +"use client"; + +import { useContext } from "react"; +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + ResponsiveContainer, +} from "recharts"; +import { DataContext } from "@/lib/data-context"; +import { greet } from "@/lib/utils"; + +const colors: Record = { + lizzy: "#d985e6", + alex: "#66d1c3", +}; + +export default function UpdateChart() { + const data = useContext(DataContext); + if (!data.whois) return null; + + const groupedData: { [name: string]: { time: number; value: number }[] } = {}; + data.whois.forEach((update, i, arr) => { + if (!(update.name in groupedData)) groupedData[update.name] = []; + const msPerHour = 60 * 60 * 1000; + + if (i === arr.length - 1) { + const now = new Date(); + groupedData[update.name].push({ time: update.time, value: 0 }); + groupedData[update.name].push({ + time: now.getTime(), + value: (now.getTime() - update.time) / msPerHour, + }); + } + + if (i === 0) return; + const prev = arr[i - 1]; + + groupedData[prev.name].push({ time: prev.time, value: 0 }); + groupedData[prev.name].push({ + time: update.time, + value: (update.time - prev.time) / msPerHour, + }); + groupedData[prev.name].push({ time: update.time, value: 0 }); + }); + + const uniqueNames = Object.keys(groupedData); + const chartData = Object.entries(groupedData) + .flatMap(([name, dataPoints]) => + dataPoints.map((data) => ({ time: data.time, name, [name]: data.value })) + ) + .sort((a, b) => a.time - b.time); + + return ( +
+
+

+ {greet(data.whois ? data.whois[0].name : "Friend", new Date())} +

+
+ +
+ + + + new Date(tick).toLocaleTimeString()} + stroke="rgba(var(--foreground), 0.6)" + /> + (tick === 0 ? "" : `${tick} hrs`)} + /> + {uniqueNames.map((uniqueName, index) => ( + name === uniqueName)} + name={uniqueName} + stroke={colors[uniqueName] ?? "#ff0000"} + strokeWidth={3} + dot={false} + isAnimationActive={false} + /> + ))} + + +
+
+ {Object.keys(groupedData).map((name) => ( + + {name} + + ))} +
+
+ ); +} diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..172ed1e --- /dev/null +++ b/app/globals.css @@ -0,0 +1,35 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --background: 255, 255, 255; + --background-blend: rgba(234, 144, 206, 0.5); + --foreground: 0, 0, 0; + --accent: 255, 192, 203; + --accent-foreground: 33, 33, 33; +} + +.dark { + --background: 18, 18, 18; + --background-blend: rgba(127, 1, 131, 0.483); + --foreground: 255, 255, 255; + --accent: 255, 182, 193; + --accent-foreground: 240, 240, 240; +} + +body { + color: rgb(var(--foreground)); + background-image: url("https://static.simponic.xyz/static/penguins.png"); + background-repeat: repeat; + background-size: 900px; + background-color: var(--background-blend); + background-blend-mode: multiply; + backdrop-filter: blur(3px); +} + +.glass { + background: rgba(var(--background), 0.7); + backdrop-filter: blur(10px); + border: 1px solid rgba(var(--foreground), 0.1); +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..bb57e86 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,26 @@ +import "./globals.css"; +import { Inter } from "next/font/google"; +import { ThemeProvider } from "next-themes"; + +const inter = Inter({ subsets: ["latin"] }); + +export const metadata = { + title: "Penguin New Tab", + description: "A beautiful penguin-themed new tab page", +}; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + + {children} + + + + ); +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..8584df0 --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,74 @@ +"use client"; + +import { useState, useEffect } from "react"; +import { useTheme } from "next-themes"; +import DateWeatherLinks from "./components/DateWeatherLinks"; +import WhoisChart from "./components/WhoisChart"; +import { + Data, + DataContext, + fetchWeather, + fetchWhois, +} from "@/lib/data-context"; + +export default function Home() { + // god i hate next. + const [mounted, setMounted] = useState(false); + const { theme, setTheme } = useTheme(); + const [data, setData] = useState({}); + + useEffect(() => { + setMounted(true); + }, []); + + useEffect(() => { + const update = () => + fetchWeather().then((weather) => + setData((data) => data && { ...data, weather }) + ); + update(); + const interval = setInterval(update, 5 * 60_000); // 5 mins + return () => clearInterval(interval); + }, []); + + useEffect(() => { + const update = () => + fetchWhois().then((whois) => + setData((data) => data && { ...data, whois }) + ); + update(); + const interval = setInterval(update, 5 * 1_000); // 5 seconds + return () => clearInterval(interval); + }, []); + + if (!mounted) return null; + + return ( + +
+
+
+

+ 🐧 Penguin New Tab +

+ +
+
+ + +
+
+

+ Made with 💖 by Penguin Lovers +

+
+
+
+ + ); +} diff --git a/components.json b/components.json new file mode 100644 index 0000000..d9ef0ae --- /dev/null +++ b/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} \ No newline at end of file diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx new file mode 100644 index 0000000..24c788c --- /dev/null +++ b/components/ui/accordion.tsx @@ -0,0 +1,58 @@ +"use client" + +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx new file mode 100644 index 0000000..25e7b47 --- /dev/null +++ b/components/ui/alert-dialog.tsx @@ -0,0 +1,141 @@ +"use client" + +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx new file mode 100644 index 0000000..41fa7e0 --- /dev/null +++ b/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx new file mode 100644 index 0000000..d6a5226 --- /dev/null +++ b/components/ui/aspect-ratio.tsx @@ -0,0 +1,7 @@ +"use client" + +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx new file mode 100644 index 0000000..51e507b --- /dev/null +++ b/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx new file mode 100644 index 0000000..f000e3e --- /dev/null +++ b/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 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/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..60e6c96 --- /dev/null +++ b/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>