Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion apps/dashboard/src/routes/_protected/dashboard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
CardHeader,
CardTitle,
} from "@quickhub/ui/components/card";
import { Logo } from "@quickhub/ui/components/logo";
import { createFileRoute } from "@tanstack/react-router";
import { signOut } from "#/lib/auth.client";

Expand All @@ -29,8 +30,18 @@ function DashboardPage() {
.toUpperCase();

return (
<main className="min-h-screen bg-[linear-gradient(180deg,_color-mix(in_oklch,_var(--color-secondary)_55%,_transparent)_0%,_transparent_38%)] p-4 sm:p-8">
<main className="min-h-dvh bg-[linear-gradient(180deg,_color-mix(in_oklch,_var(--color-secondary)_55%,_transparent)_0%,_transparent_38%)] p-4 sm:p-8">
<div className="mx-auto grid max-w-5xl gap-6">
<div className="flex items-center gap-3 px-1">
<Logo className="size-8" />
<div>
<p className="text-xs font-medium tracking-[0.28em] text-muted-foreground uppercase">
QuickHub
</p>
<p className="text-sm text-muted-foreground">Workspace</p>
</div>
</div>

<Card className="border-border/70 bg-background/95 shadow-sm">
<CardHeader className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-4">
Expand Down
22 changes: 18 additions & 4 deletions apps/dashboard/src/routes/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
CardHeader,
CardTitle,
} from "@quickhub/ui/components/card";
import { Logo } from "@quickhub/ui/components/logo";
import { createFileRoute, Link } from "@tanstack/react-router";
import { getSession } from "#/lib/auth.functions";
import { getUserRepos } from "#/lib/github.functions";
Expand All @@ -31,14 +32,27 @@ function Home() {
const ctaLink = session ? "/dashboard" : "/login";

return (
<main className="min-h-screen bg-[radial-gradient(circle_at_top,_color-mix(in_oklch,_var(--color-primary)_6%,_transparent),_transparent_48%),linear-gradient(180deg,_color-mix(in_oklch,_var(--color-secondary)_65%,_white)_0%,_transparent_45%)]">
<main className="min-h-dvh bg-[radial-gradient(circle_at_top,_color-mix(in_oklch,_var(--color-primary)_6%,_transparent),_transparent_48%),linear-gradient(180deg,_color-mix(in_oklch,_var(--color-secondary)_65%,_white)_0%,_transparent_45%)]">
<div className="mx-auto flex w-full max-w-6xl flex-col gap-10 px-4 py-10 sm:px-6 lg:px-8">
<section className="grid gap-6 lg:grid-cols-[minmax(0,1.2fr)_minmax(320px,420px)]">
<Card className="border-border/70 bg-background/90 shadow-sm backdrop-blur">
<CardHeader className="gap-5">
<Badge variant="outline" className="w-fit">
Circle base imported
</Badge>
<div className="flex flex-wrap items-center justify-between gap-3">
<div className="flex items-center gap-3">
<Logo />
<div>
<p className="text-xs font-medium tracking-[0.28em] text-muted-foreground uppercase">
QuickHub
</p>
<p className="text-sm text-muted-foreground">
Placeholder logo
</p>
</div>
</div>
<Badge variant="outline" className="w-fit">
Shared UI baseline
</Badge>
</div>
<div className="space-y-3">
<CardTitle className="text-3xl tracking-tight sm:text-4xl">
QuickHub, now on a shared UI foundation.
Expand Down
14 changes: 12 additions & 2 deletions apps/dashboard/src/routes/login.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
CardHeader,
CardTitle,
} from "@quickhub/ui/components/card";
import { Logo } from "@quickhub/ui/components/logo";
import { createFileRoute, redirect } from "@tanstack/react-router";
import { signIn } from "#/lib/auth.client";
import { getSession } from "#/lib/auth.functions";
Expand All @@ -20,9 +21,18 @@ export const Route = createFileRoute("/login")({

function LoginPage() {
return (
<main className="flex min-h-screen items-center justify-center bg-[radial-gradient(circle_at_top,_color-mix(in_oklch,_var(--color-primary)_6%,_transparent),_transparent_48%),linear-gradient(180deg,_color-mix(in_oklch,_var(--color-secondary)_65%,_white)_0%,_transparent_45%)] px-4">
<main className="flex min-h-dvh items-center justify-center bg-[radial-gradient(circle_at_top,_color-mix(in_oklch,_var(--color-primary)_6%,_transparent),_transparent_48%),linear-gradient(180deg,_color-mix(in_oklch,_var(--color-secondary)_65%,_white)_0%,_transparent_45%)] px-4">
<Card className="w-full max-w-md border-border/70 bg-background/95 shadow-sm backdrop-blur">
<CardHeader className="text-center">
<CardHeader className="gap-5 text-center">
<div className="mx-auto flex items-center gap-3">
<Logo />
<div className="text-left">
<p className="text-xs font-medium tracking-[0.28em] text-muted-foreground uppercase">
QuickHub
</p>
<p className="text-sm text-muted-foreground">Placeholder logo</p>
</div>
</div>
<CardTitle className="text-2xl tracking-tight sm:text-3xl">
Sign in to QuickHub
</CardTitle>
Expand Down
28 changes: 28 additions & 0 deletions packages/ui/src/components/logo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import type * as React from "react";

import { cn } from "../lib/utils";

function Logo({ className, ...props }: React.ComponentProps<"svg">) {
return (
<svg
data-slot="logo"
viewBox="0 0 40 40"
aria-hidden="true"
className={cn("size-10 shrink-0 text-foreground", className)}
{...props}
>
<path
className="fill-current"
fillRule="evenodd"
clipRule="evenodd"
d="M20 0C27.4768 0 31.2154 -0.000204921 34 1.60742C35.8242 2.66064 37.3394 4.17577 38.3926 6C40.0002 8.7846 40 12.5232 40 20C40 27.4768 40.0002 31.2154 38.3926 34C37.3394 35.8242 35.8242 37.3394 34 38.3926C31.2154 40.0002 27.4768 40 20 40C12.5232 40 8.7846 40.0002 6 38.3926C4.17577 37.3394 2.66064 35.8242 1.60742 34C-0.000204921 31.2154 0 27.4768 0 20C0 12.5232 -0.000204921 8.7846 1.60742 6C2.66064 4.17577 4.17577 2.66064 6 1.60742C8.7846 -0.000204921 12.5232 0 20 0ZM22 4C13.1634 4 6 11.1634 6 20C6 28.8366 13.1634 36 22 36C30.8366 36 38 28.8366 38 20C38 11.1634 30.8366 4 22 4Z"
/>
<path
className="fill-current"
d="M36 20C36 25.5228 31.5228 30 26 30C20.4772 30 16 25.5228 16 20C16 14.4772 20.4772 10 26 10C31.5228 10 36 14.4772 36 20Z"
/>
</svg>
);
}

export { Logo };