71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import type React from "react";
|
|
import type { Route } from "./+types/home";
|
|
|
|
export function meta({ }: Route.MetaArgs) {
|
|
return [
|
|
{ title: "New React Router App" },
|
|
{ name: "description", content: "Welcome to React Router!" },
|
|
];
|
|
}
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="h-screen grid grid-cols-[280px_1fr]">
|
|
{/* Sidebar */}
|
|
<aside className="bg-panel p-4 space-y-4">
|
|
<div className="text-lg font-semibold">
|
|
3dplot-gen
|
|
<div className="text-xs text-muted">
|
|
CSV → 3D Plot
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<Control label="CSV file">
|
|
<input
|
|
type="file"
|
|
accept=".csv"
|
|
className="w-full text-sm file:bg-bg file:text-slate-300 file:border-0
|
|
file:rounded file:px-2 file:py-1"
|
|
/>
|
|
</Control>
|
|
|
|
<Control label="X axis">
|
|
<select className="w-full bg-bg border border-slate-700 rounded px-2 py-1">
|
|
<option>-</option>
|
|
</select>
|
|
</Control>
|
|
|
|
<Control label="Y axis">
|
|
<select className="w-full bg-bg border border-slate-700 rounded px-2 py-1">
|
|
<option>-</option>
|
|
</select>
|
|
</Control>
|
|
|
|
<Control label="Z axis">
|
|
<select className="w-full bg-bg border border-slate-700 rounded px-2 py-1">
|
|
<option>-</option>
|
|
</select>
|
|
</Control>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Plot */}
|
|
<main className="bg-plot">
|
|
<div
|
|
id="plot"
|
|
className="w-full h-full"
|
|
/>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Control({ label, children }: { label: string, children: React.ReactNode }) {
|
|
return (
|
|
<div className="space-y-1">
|
|
<label className="text-xs text-muted">{label}</label>
|
|
{children}
|
|
</div>
|
|
);
|
|
} |