, table: ({ node, ...props }) => ( @@ -66,14 +87,22 @@ export const Markdown = memo(function Markdown({ content, className }: MarkdownP ), thead: ({ node, ...props }) => , th: ({ node, ...props }) => ( -
+
{children}
);
@@ -85,7 +114,10 @@ export const Markdown = memo(function Markdown({ content, className }: MarkdownP
);
},
pre: ({ node, ...props }) => (
-
+
),
}}
>
diff --git a/frontend/src/components/shared/primitives.tsx b/frontend/src/components/shared/primitives.tsx
index 85a28fa2..4cc0689d 100644
--- a/frontend/src/components/shared/primitives.tsx
+++ b/frontend/src/components/shared/primitives.tsx
@@ -1,6 +1,7 @@
import { cn } from "@/lib/utils";
import { Link } from "@tanstack/react-router";
import type { ReactNode } from "react";
+import { FolderKanban, BellOff, MessageSquareDashed, UserPlus, Search } from "lucide-react";
export function SectionHeader({
title,
@@ -18,16 +19,11 @@ export function SectionHeader({
{title}
{action &&
(actionTo ? (
-
+
{action}
) : (
-
+
))}
+
+ );
+ case "notifications":
+ return (
+
+
+ );
+ case "messages":
+ return (
+
+
+ );
+ case "connections":
+ return (
+
+
+ );
+ case "search":
+ return (
+
+
+ );
+ default:
+ return (
+
+ โจ
+
+ );
+ }
+ };
+
return (
-
-
- โจ
+
+
);
}
+
export function TagChip({ children, className }: { children: ReactNode; className?: string }) {
return (
{label}
+ {renderIllustration()}
- {title}
- {desc &&{desc}
} - {action &&{action}
}
+ {title}
+ {desc &&{desc}
} + {action &&{action}
}
{value} - {suffix && {suffix}} + {suffix && ( + {suffix} + )}
{progress !== undefined && (
diff --git a/frontend/src/features/dashboard/sections.tsx b/frontend/src/features/dashboard/sections.tsx
index 3d82a180..b6a20699 100644
--- a/frontend/src/features/dashboard/sections.tsx
+++ b/frontend/src/features/dashboard/sections.tsx
@@ -124,7 +124,12 @@ export function InviteRequests() {
-
{data.map((r) => (
-
-
+
{r.icon}
@@ -170,9 +175,7 @@ export function SuggestedBuilders() {-
{s} ))}- {b.yearsExp} yrs exp -
+{b.yearsExp} yrs exp
{b.matchScore}% Match
+ } + /> + ) : ( +); } diff --git a/frontend/src/routes/_app.dashboard.tsx b/frontend/src/routes/_app.dashboard.tsx index 6ddc9242..06b5aaf7 100644 --- a/frontend/src/routes/_app.dashboard.tsx +++ b/frontend/src/routes/_app.dashboard.tsx @@ -18,7 +18,10 @@ export const Route = createFileRoute("/_app/dashboard")({ head: () => ({ meta: [ { title: "Dashboard โ DevLink" }, - { name: "description", content: "Your DevLink command center: projects, matches, messages and streaks." }, + { + name: "description", + content: "Your DevLink command center: projects, matches, messages and streaks.", + }, ], }), component: Dashboard, diff --git a/frontend/src/routes/_app.hackathons.tsx b/frontend/src/routes/_app.hackathons.tsx index 0a2b0996..c7816a52 100644 --- a/frontend/src/routes/_app.hackathons.tsx +++ b/frontend/src/routes/_app.hackathons.tsx @@ -20,7 +20,9 @@ function HackathonsPage() {+ ) + ) : tab === "matches" ? ( + + {filtered.map((b) => ( ++ ) : ( ++ ))} + + {filtered.map((b) => { + const isConnected = connections.includes(b.id); + return ( + ++ )}+ + + ); + })} ++++++ {b.name}
+{b.role}
++ {b.country} ยท {b.yearsExp} yrs +
++ {b.skills.slice(0, 3).map((s) => ( ++{s} + ))} ++ {b.matchScore}% Match +
++ + ++diff --git a/frontend/src/routes/_app.projects.tsx b/frontend/src/routes/_app.projects.tsx index 1aedbe8f..4c1e5858 100644 --- a/frontend/src/routes/_app.projects.tsx +++ b/frontend/src/routes/_app.projects.tsx @@ -1,7 +1,7 @@ -import { createFileRoute, Link } from "@tanstack/react-router"; +import { createFileRoute, Link, useRouterState, Outlet } from "@tanstack/react-router"; import { useQuery } from "@tanstack/react-query"; import { projectsService } from "@/services"; -import { Card, TagChip, SectionHeader } from "@/components/shared/primitives"; +import { Card, TagChip, SectionHeader, EmptyState } from "@/components/shared/primitives"; import { Star, GitFork, Users2, Plus, Search, SlidersHorizontal, X } from "lucide-react"; import { useState } from "react"; import { cn } from "@/lib/utils"; @@ -18,7 +18,16 @@ export const Route = createFileRoute("/_app/projects")({ const LANGUAGES = ["JavaScript", "TypeScript", "Python", "Go", "Rust", "Java", "C++"]; const DIFFICULTIES = ["beginner", "intermediate", "advanced"] as const; -const BOOL_FILTERS = ["remote", "paid", "openSource", "ai", "web", "mobile", "backend", "frontend"] as const; +const BOOL_FILTERS = [ + "remote", + "paid", + "openSource", + "ai", + "web", + "mobile", + "backend", + "frontend", +] as const; type BoolFilter = (typeof BOOL_FILTERS)[number]; const BOOL_LABELS: RecordHackathons
-Join a jam, build a team, ship something new.
++ Join a jam, build a team, ship something new. +
{data.map((h) => ( @@ -38,8 +40,12 @@ function HackathonsPage() {{h.name}
{h.theme}
-Starts in {h.startsIn}d - {h.teamSize} + + Starts in {h.startsIn}d + + + {h.teamSize} + {h.prize} {data.length === 0 && ( -diff --git a/frontend/src/routes/_app.notifications.tsx b/frontend/src/routes/_app.notifications.tsx index 95991e19..c52519e8 100644 --- a/frontend/src/routes/_app.notifications.tsx +++ b/frontend/src/routes/_app.notifications.tsx @@ -1,7 +1,7 @@ import { createFileRoute } from "@tanstack/react-router"; import { useQuery } from "@tanstack/react-query"; import { notificationsService } from "@/services"; -import { Card } from "@/components/shared/primitives"; +import { Card, EmptyState } from "@/components/shared/primitives"; import { cn } from "@/lib/utils"; export const Route = createFileRoute("/_app/notifications")({ @@ -15,7 +15,10 @@ export const Route = createFileRoute("/_app/notifications")({ }); function NotificationsPage() { - const { data = [] } = useQuery({ queryKey: ["notifications"], queryFn: notificationsService.list }); + const { data = [] } = useQuery({ + queryKey: ["notifications"], + queryFn: notificationsService.list, + }); return (No messages yet โ say hello ๐
++ No messages yet โ say hello ๐ +
)} {data.map((m) => ( -+))}{m.text}
-{m.at}
++ {m.at} +
); } diff --git a/frontend/src/routes/_app.profile.$username.tsx b/frontend/src/routes/_app.profile.$username.tsx index 25b0bb0c..a48b9ae0 100644 --- a/frontend/src/routes/_app.profile.$username.tsx +++ b/frontend/src/routes/_app.profile.$username.tsx @@ -7,7 +7,10 @@ export const Route = createFileRoute("/_app/profile/$username")({ head: ({ params }) => ({ meta: [ { title: `@${params.username} โ DevLink` }, - { name: "description", content: `${params.username}'s DevLink profile: skills, projects and activity.` }, + { + name: "description", + content: `${params.username}'s DevLink profile: skills, projects and activity.`, + }, ], }), component: ProfilePage, @@ -17,7 +20,14 @@ function ProfilePage() { const { username } = Route.useParams(); const me = username === currentUser.handle; const b = me - ? { ...builders[0], name: currentUser.name, handle: currentUser.handle, avatar: currentUser.avatar, bio: "Product engineer. Ships fast, sleeps sometimes.", role: "Full Stack Developer" } + ? { + ...builders[0], + name: currentUser.name, + handle: currentUser.handle, + avatar: currentUser.avatar, + bio: "Product engineer. Ships fast, sleeps sometimes.", + role: "Full Stack Developer", + } : builders.find((x) => x.handle === username); if (!b) throw notFound(); @@ -28,12 +38,20 @@ function ProfilePage() {@@ -27,17 +30,34 @@ function NotificationsPage() { Mark all read-- + {data.length === 0 ? ( +-
- {data.map((n) => (
-
-
-
-
{n.text}
- {n.ago} -
- ))}
-
+ ) : ( + + + )} +-
+ {data.map((n) => (
+
-
+
+
{n.text}
+ {n.ago} +
+ ))}
+
{!me && ( @@ -48,7 +66,9 @@ function ProfilePage() {{b.name}
-@{b.handle} ยท {b.role}
++ @{b.handle} ยท {b.role} +
{b.bio}
-{b.country} - Joined 2024 - devlink.io/{b.handle} + + {b.country} + + + Joined 2024 + + + devlink.io/{b.handle} + Skills
- {b.skills.map((s) =>{s} )} + {b.skills.map((s) => ( +{s} + ))}@@ -56,10 +76,14 @@ function ProfilePage() { -
{projects.slice(0, 4).map((p) => (
-
- {p.icon}
+
+ {p.icon}
+
{p.name}
-{p.stack.join(" ยท ")}
++ {p.stack.join(" ยท ")} +
))}
diff --git a/frontend/src/routes/_app.projects.$projectId.tsx b/frontend/src/routes/_app.projects.$projectId.tsx
index 6ef81a33..53e20ebc 100644
--- a/frontend/src/routes/_app.projects.$projectId.tsx
+++ b/frontend/src/routes/_app.projects.$projectId.tsx
@@ -7,10 +7,6 @@ import { useState } from "react";
import { cn } from "@/lib/utils";
import { builders, activity, currentUser } from "@/mocks/seed";
import { Markdown } from "@/components/shared/Markdown";
-import { ArrowLeft, Star, GitFork, Users2, Github } from "lucide-react";
-import { useState } from "react";
-import { cn } from "@/lib/utils";
-import { builders, activity } from "@/mocks/seed";
import { BackButton } from "@/components/shared/BackButton";
export const Route = createFileRoute("/_app/projects/$projectId")({
@@ -55,10 +51,7 @@ function ProjectDetail() {
>
Back to projects - + @@ -97,16 +90,6 @@ function ProjectDetail() {-{p.members} - -{p.stars} - - - {p.forks} - - - {p.members} - (set: T[], val: T): T[] { } function ProjectsPage() { + const pathname = useRouterState({ select: (s) => s.location.pathname }); const [q, setQ] = useState(""); - const [statusFilter, setStatusFilter] = useState<"all" | "active" | "planning" | "shipped">("all"); + const [statusFilter, setStatusFilter] = useState<"all" | "active" | "planning" | "shipped">( + "all", + ); const [showFilters, setShowFilters] = useState(false); const [langs, setLangs] = useState ; + } const hasActiveFilters = langs.length > 0 || difficulties.length > 0 || boolFilters.length > 0; @@ -82,7 +103,8 @@ function ProjectsPage() { if (statusFilter !== "all" && p.status !== statusFilter) return false; if (q && !p.name.toLowerCase().includes(q.toLowerCase())) return false; if (langs.length > 0 && (!p.language || !langs.includes(p.language))) return false; - if (difficulties.length > 0 && (!p.difficulty || !difficulties.includes(p.difficulty))) return false; + if (difficulties.length > 0 && (!p.difficulty || !difficulties.includes(p.difficulty))) + return false; for (const f of boolFilters) { if (!p[f]) return false; } @@ -94,7 +116,9 @@ function ProjectsPage() { Projects
-Everything you're building, in one place.
++ Everything you're building, in one place. +
-
-
-