MythEclipse/zeavis-edu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add React web scaffold

Browse Source
This commit is contained in:
Asep Haryana Saputra
2026-05-22 12:41:55 +00:00
parent 393779f81d
commit 62f45ed454
17 changed files with 452 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app.tsx
+25
View File
@@ -0,0 +1,25 @@
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { DashboardPage } from '@/pages/dashboard-page';
import { LandingPage } from '@/pages/landing-page';
const queryClient = new QueryClient();
const router = createBrowserRouter([
{
path: '/',
element: <LandingPage />,
},
{
path: '/dashboard',
element: <DashboardPage />,
},
]);
export function App() {
return (
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
</QueryClientProvider>
);
}
apps/web/src/components/ui/button.tsx
+36
View File
@@ -0,0 +1,36 @@
import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from 'class-variance-authority';
import type { ButtonHTMLAttributes } from 'react';
import { cn } from '@/lib/utils';
const buttonVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
outline: 'border border-border bg-transparent hover:bg-muted',
ghost: 'hover:bg-muted',
},
size: {
default: 'h-10 px-4 py-2',
lg: 'h-12 rounded-lg px-6',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
},
);
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean;
};
export function Button({ className, variant, size, asChild = false, ...props }: ButtonProps) {
const Comp = asChild ? Slot : 'button';
return <Comp className={cn(buttonVariants({ variant, size, className }))} {...props} />;
}
apps/web/src/components/ui/card.tsx
+22
View File
@@ -0,0 +1,22 @@
import type { HTMLAttributes } from 'react';
import { cn } from '@/lib/utils';
export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
return <div className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)} {...props} />;
}
export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
return <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />;
}
export function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
return <h3 className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />;
}
export function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
return <p className={cn('text-sm text-muted-foreground', className)} {...props} />;
}
export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
return <div className={cn('p-6 pt-0', className)} {...props} />;
}
apps/web/src/index.css
+27
View File
@@ -0,0 +1,27 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 48 60% 97%;
--foreground: 156 26% 12%;
--card: 0 0% 100%;
--card-foreground: 156 26% 12%;
--primary: 142 60% 32%;
--primary-foreground: 0 0% 100%;
--muted: 84 35% 90%;
--muted-foreground: 156 12% 35%;
--border: 84 24% 82%;
--radius: 1rem;
}
* {
@apply border-border;
}
body {
@apply bg-background text-foreground antialiased;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
}
apps/web/src/lib/utils.ts
+6
View File
@@ -0,0 +1,6 @@
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
apps/web/src/main.tsx
+10
View File
@@ -0,0 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './app';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
apps/web/src/pages/dashboard-page.tsx
+72
View File
@@ -0,0 +1,72 @@
import { BookOpen, History, Leaf, LayoutDashboard } from 'lucide-react';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { useUiStore } from '@/store/ui-store';
const dashboardCards = [
{
icon: Leaf,
title: 'Deteksi Penyakit',
description: 'Area ini akan menjadi pintu masuk analisis gambar daun jagung.',
},
{
icon: History,
title: 'Riwayat Analisis',
description: 'Hasil deteksi sebelumnya akan ditampilkan saat fitur data tersedia.',
},
{
icon: BookOpen,
title: 'Materi Edukasi',
description: 'Konten edukasi penyakit jagung akan terhubung ke modul pembelajaran.',
},
];
export function DashboardPage() {
const { dashboardCompact, toggleDashboardCompact } = useUiStore();
return (
<main className="min-h-screen px-6 py-8">
<div className="mx-auto max-w-6xl space-y-8">
<header className="flex flex-col gap-4 rounded-3xl border bg-card p-6 shadow-sm md:flex-row md:items-center md:justify-between">
<div className="space-y-2">
<div className="flex items-center gap-2 text-sm font-medium text-primary">
<LayoutDashboard className="h-4 w-4" /> Dashboard
</div>
<h1 className="text-3xl font-bold tracking-tight">ZeaVis Edu Workspace</h1>
<p className="text-muted-foreground">
Placeholder awal untuk fitur deteksi, riwayat analisis, dan edukasi.
</p>
</div>
<div className="flex gap-3">
<Button variant="outline" onClick={toggleDashboardCompact}>
{dashboardCompact ? 'Mode Nyaman' : 'Mode Ringkas'}
</Button>
<Button asChild>
<Link to="/">Kembali</Link>
</Button>
</div>
</header>
<section className={dashboardCompact ? 'grid gap-4 md:grid-cols-3' : 'grid gap-6 md:grid-cols-3'}>
{dashboardCards.map((item) => (
<Card key={item.title}>
<CardHeader>
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-muted text-primary">
<item.icon className="h-6 w-6" />
</div>
<CardTitle className="text-xl">{item.title}</CardTitle>
<CardDescription className="leading-6">{item.description}</CardDescription>
</CardHeader>
<CardContent>
<div className="rounded-2xl border border-dashed p-4 text-sm text-muted-foreground">
Belum ada data. Fitur akan dihubungkan pada iterasi berikutnya.
</div>
</CardContent>
</Card>
))}
</section>
</div>
</main>
);
}
apps/web/src/pages/landing-page.tsx
+87
View File
@@ -0,0 +1,87 @@
import { ArrowRight, Leaf, ShieldCheck, Sprout } from 'lucide-react';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
const features = [
{
icon: Leaf,
title: 'Deteksi penyakit daun jagung',
description: 'Fondasi aplikasi siap untuk integrasi model klasifikasi ZeaVis Edu.',
},
{
icon: ShieldCheck,
title: 'Edukasi berbasis data',
description: 'Materi dan hasil analisis dapat dikembangkan di atas dashboard awal.',
},
{
icon: Sprout,
title: 'Siap tumbuh bersama produk',
description: 'Monorepo memisahkan frontend, backend, dan shared types dengan jelas.',
},
];
export function LandingPage() {
return (
<main className="min-h-screen overflow-hidden">
<section className="mx-auto flex min-h-screen w-full max-w-6xl flex-col px-6 py-10">
<nav className="flex items-center justify-between">
<div className="flex items-center gap-3 font-semibold">
<div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
<Leaf className="h-5 w-5" />
</div>
ZeaVis Edu
</div>
<Button asChild variant="ghost">
<Link to="/dashboard">Dashboard</Link>
</Button>
</nav>
<div className="grid flex-1 items-center gap-10 py-20 lg:grid-cols-[1.1fr_0.9fr]">
<div className="space-y-8">
<div className="inline-flex rounded-full border bg-card px-4 py-2 text-sm text-muted-foreground">
Platform edukasi kesehatan tanaman jagung
</div>
<div className="space-y-5">
<h1 className="max-w-3xl text-5xl font-bold tracking-tight sm:text-6xl">
Belajar mengenali penyakit daun jagung dengan alur digital yang rapi.
</h1>
<p className="max-w-2xl text-lg leading-8 text-muted-foreground">
Scaffold ini menyiapkan fondasi aplikasi ZeaVis Edu untuk antarmuka edukasi,
API, dan integrasi model machine learning berikutnya.
</p>
</div>
<div className="flex flex-col gap-3 sm:flex-row">
<Button asChild size="lg">
<Link to="/dashboard">
Buka Dashboard <ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
<Button asChild size="lg" variant="outline">
<a href="https://elysiajs.com" target="_blank" rel="noreferrer">
Lihat Stack API
</a>
</Button>
</div>
</div>
<div className="grid gap-4">
{features.map((feature) => (
<Card key={feature.title} className="bg-card/80 backdrop-blur">
<CardHeader className="flex-row items-start gap-4 space-y-0">
<div className="rounded-2xl bg-muted p-3 text-primary">
<feature.icon className="h-6 w-6" />
</div>
<div>
<CardTitle className="text-xl">{feature.title}</CardTitle>
<CardDescription className="mt-2 leading-6">{feature.description}</CardDescription>
</div>
</CardHeader>
</Card>
))}
</div>
</div>
</section>
</main>
);
}
apps/web/src/store/ui-store.ts
+12
View File
@@ -0,0 +1,12 @@
import { create } from 'zustand';
type UiState = {
dashboardCompact: boolean;
toggleDashboardCompact: () => void;
};
export const useUiStore = create<UiState>((set) => ({
dashboardCompact: false,
toggleDashboardCompact: () =>
set((state) => ({ dashboardCompact: !state.dashboardCompact })),
}));