feat: initialize warpbox.dev project structure and backend
Initialize the repository with the core Go backend architecture and a frontend mockup for warpbox.dev, a self-hosted file-sharing application. - Set up Go backend modules for configuration, HTTP server, middleware, handlers, and templates. - Add local development scripts, environment templates, and basic project configuration. - Include a React-based frontend mockup under the docs directory.
This commit is contained in:
73
docs/Mock-Up/Mockup Magic/src/routes/admin.settings.tsx
Normal file
73
docs/Mock-Up/Mockup Magic/src/routes/admin.settings.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { AppShell } from "@/components/layout/AppShell";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
export const Route = createFileRoute("/admin/settings")({
|
||||
head: () => ({ meta: [{ title: "Admin · Settings — warpbox.dev" }] }),
|
||||
component: AdminSettings,
|
||||
});
|
||||
|
||||
function AdminSettings() {
|
||||
return (
|
||||
<AppShell variant="admin" title="Admin · Settings">
|
||||
<div className="mx-auto max-w-2xl space-y-6">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<h2 className="font-medium">Instance branding</h2>
|
||||
<div className="mt-4 grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-1.5"><Label>Instance name</Label><Input defaultValue="warpbox.dev" /></div>
|
||||
<div className="space-y-1.5"><Label>Tagline</Label><Input defaultValue="Send a file. Get a link." /></div>
|
||||
<div className="space-y-1.5"><Label>Primary color</Label><Input defaultValue="#3b82f6" /></div>
|
||||
<div className="space-y-1.5"><Label>Logo URL</Label><Input placeholder="https://…" /></div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<h2 className="font-medium">Limits & retention</h2>
|
||||
<div className="mt-4 grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-1.5"><Label>Max file size (MB)</Label><Input type="number" defaultValue={5120} /></div>
|
||||
<div className="space-y-1.5"><Label>Default expiry (days)</Label><Input type="number" defaultValue={7} /></div>
|
||||
<div className="space-y-1.5"><Label>Anonymous quota / IP (MB/day)</Label><Input type="number" defaultValue={2048} /></div>
|
||||
<div className="space-y-1.5"><Label>Per-user quota (GB)</Label><Input type="number" defaultValue={50} /></div>
|
||||
</div>
|
||||
<Separator className="my-5" />
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
["Allow anonymous uploads", true],
|
||||
["Allow registrations", true],
|
||||
["Require password on public links", false],
|
||||
["Show 'Powered by warpbox' footer", true],
|
||||
].map(([label, on]) => (
|
||||
<div key={label as string} className="flex items-center justify-between">
|
||||
<span className="text-sm">{label as string}</span>
|
||||
<Switch defaultChecked={on as boolean} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-5"><Button>Save settings</Button></div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<h2 className="font-medium">SMTP</h2>
|
||||
<div className="mt-4 grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-1.5"><Label>Host</Label><Input defaultValue="smtp.example.com" /></div>
|
||||
<div className="space-y-1.5"><Label>Port</Label><Input defaultValue={587} /></div>
|
||||
<div className="space-y-1.5"><Label>Username</Label><Input defaultValue="warpbox" /></div>
|
||||
<div className="space-y-1.5"><Label>Password</Label><Input type="password" /></div>
|
||||
</div>
|
||||
<div className="mt-4 flex gap-2"><Button>Save</Button><Button variant="outline">Send test email</Button></div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user