librecloud/status
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: librecloud:370521fbc003eed17439f57010d173d36c1e221e
Branches Tags
librecloud:main
..
compare: librecloud:05b98f96ca6cbd19b4bf8c86770b2c06c57ddb03
Branches Tags
librecloud:main

2 Commits
370521fbc0 ... 05b98f96ca

Author SHA1 Message Date
Aidan
05b98f96ca design: add initial design+layout 2025-04-24 23:31:46 -04:00
Aidan
5bab9ac25b ignore: exclude env (why is this not the default?) 2025-04-24 23:31:17 -04:00
6 changed files with 154 additions and 13 deletions
Show Stats Expand all files Collapse all files

6
.gitignore vendored
View File

@ -46,4 +46,8 @@ next-env.d.ts
bun.lock* bun.lock*
# VSCode # VSCode
.vscode/ .vscode/
# env
.env*
!.env.example

1
package.json
View File

@ -19,6 +19,7 @@
"next-themes": "^0.4.6", "next-themes": "^0.4.6",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-icons": "^5.5.0",
"tailwind-merge": "^3.2.0" "tailwind-merge": "^3.2.0"
}, },
"devDependencies": { "devDependencies": {

3
src/app/globals.css
View File

@ -6,8 +6,7 @@
@theme inline { @theme inline {
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--font-sans: var(--font-space-mono); --font-sans: var(--font-plex-sans);
--font-mono: var(--font-space-mono);
--color-sidebar-ring: var(--sidebar-ring); --color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border); --color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);

16
src/app/layout.tsx
View File

@ -1,29 +1,27 @@
import type { Metadata } from "next" import type { Metadata } from "next"
import { Space_Mono } from "next/font/google" import { IBM_Plex_Sans } from "next/font/google"
import "./globals.css" import "./globals.css"
import { ThemeProvider } from "@/components/ThemeProvider" import { ThemeProvider } from "@/components/ThemeProvider"
const spaceMono = Space_Mono({ const ibmPlexSans = IBM_Plex_Sans({
variable: "--font-space-mono", variable: "--font-plex-sans",
subsets: ["latin"], subsets: ["latin"],
weight: ["400", "700"], weight: ["400", "700"],
}) })
export const metadata: Metadata = { export const metadata: Metadata = {
title: `${process.env.NEXT_PUBLIC_APP_NAME + (process.env.NEXT_PUBLIC_APP_NAME ? " " : "")}Status`, title: `${(process.env.NEXT_PUBLIC_APP_NAME || "Status")}`,
description: `${process.env.NEXT_PUBLIC_APP_NAME + (process.env.NEXT_PUBLIC_APP_NAME ? " " : "")}Status`, description: `${(process.env.NEXT_PUBLIC_APP_NAME || "Status")}`,
} }
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode
}>) { }>) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body <body className={`${ibmPlexSans.variable} antialiased`}>
className={`${spaceMono.variable} antialiased`}
>
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="system" defaultTheme="system"

49
src/app/page.tsx
View File

@ -1,5 +1,52 @@
import { TbServerBolt } from "react-icons/tb"
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from "@/components/ui/card"
export default function Home() { export default function Home() {
return ( return (
<h1>Hello World</h1> <div className="flex flex-col h-screen w-full">
<div className="flex flex-col items-center justify-center mt-12">
<TbServerBolt size={78} className="my-4" />
<h1 className="text-4xl font-bold">{process.env.NEXT_PUBLIC_APP_NAME || "Status"}</h1>
</div>
<div className="grid grid-cols-2 gap-10 mt-16 px-10">
<Card>
<CardHeader>
<CardTitle className="text-2xl">Core Services</CardTitle>
</CardHeader>
<CardContent className="-mt-1">
<p>Nothing here yet</p>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-2xl">Some Category</CardTitle>
</CardHeader>
<CardContent className="-mt-1">
<p>Nothing here yet</p>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-2xl">Some Category</CardTitle>
</CardHeader>
<CardContent className="-mt-1">
<p>Nothing here yet</p>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-2xl">Some Category</CardTitle>
</CardHeader>
<CardContent className="-mt-1">
<p>Nothing here yet</p>
</CardContent>
</Card>
</div>
</div>
) )
} }

92
src/components/ui/card.tsx Normal file
View File

@ -0,0 +1,92 @@
import * as React from "react"
import { cn } from "@/lib/utils"
function Card({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card"
className={cn(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
className
)}
{...props}
/>
)
}
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-header"
className={cn(
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
className
)}
{...props}
/>
)
}
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-title"
className={cn("leading-none font-semibold", className)}
{...props}
/>
)
}
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
)
}
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-action"
className={cn(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className
)}
{...props}
/>
)
}
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-content"
className={cn("px-6", className)}
{...props}
/>
)
}
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-footer"
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
{...props}
/>
)
}
export {
Card,
CardHeader,
CardFooter,
CardTitle,
CardAction,
CardDescription,
CardContent,
}