Add React web scaffold
This commit is contained in:
Asep Haryana Saputra
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ZeaVis Edu</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
type: application
|
||||
language: typescript
|
||||
|
||||
tasks:
|
||||
dev:
|
||||
command: bun run dev
|
||||
local: true
|
||||
build:
|
||||
command: bun run build
|
||||
deps:
|
||||
- shared:build
|
||||
inputs:
|
||||
- src/**/*
|
||||
- index.html
|
||||
- package.json
|
||||
- tsconfig.json
|
||||
- tsconfig.node.json
|
||||
- vite.config.ts
|
||||
- tailwind.config.ts
|
||||
- postcss.config.js
|
||||
- ../../packages/shared/dist/**/*
|
||||
outputs:
|
||||
- dist
|
||||
typecheck:
|
||||
command: bun run typecheck
|
||||
deps:
|
||||
- shared:typecheck
|
||||
inputs:
|
||||
- src/**/*
|
||||
- package.json
|
||||
- tsconfig.json
|
||||
- tsconfig.node.json
|
||||
- vite.config.ts
|
||||
- tailwind.config.ts
|
||||
- ../../packages/shared/dist/**/*
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "@zeavis/web",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host 0.0.0.0",
|
||||
"build": "tsc --project tsconfig.json && vite build",
|
||||
"preview": "vite preview --host 0.0.0.0",
|
||||
"typecheck": "tsc --project tsconfig.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@tanstack/react-query": "^5.59.16",
|
||||
"@vitejs/plugin-react": "^4.3.3",
|
||||
"@zeavis/shared": "workspace:*",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.468.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.28.0",
|
||||
"tailwind-merge": "^2.5.4",
|
||||
"zustand": "^5.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.49",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"typescript": "^5.6.3",
|
||||
"vite": "^6.0.1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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} />;
|
||||
}
|
||||
@@ -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} />;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@@ -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>,
|
||||
);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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 })),
|
||||
}));
|
||||
@@ -0,0 +1,33 @@
|
||||
import type { Config } from 'tailwindcss';
|
||||
|
||||
export default {
|
||||
darkMode: ['class'],
|
||||
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
border: 'hsl(var(--border))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
} satisfies Config;
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"types": ["vite/client"],
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"@zeavis/shared": ["../../packages/shared/src/index.ts"],
|
||||
"@zeavis/shared/*": ["../../packages/shared/src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"types": ["node"]
|
||||
},
|
||||
"include": ["vite.config.ts", "tailwind.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import react from '@vitejs/plugin-react';
|
||||
import path from 'node:path';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user