dylan/vod-system
1
1
Fork 0
Code Issues 16 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(frontend): restyle and design frontend

Browse Source
This commit is contained in:
Dylan De Faoite
2026-06-20 12:52:51 +01:00
parent 1062f72661
commit 91c3259331
21 changed files with 185 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/components/video/ConfigBox.tsx
View File

@@ -7,6 +7,8 @@ type prop = {
className?: string;
}
const inputClass = "border border-gray-300 bg-white rounded-md w-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors";
export default function ConfigBox({setMetadata, className}: prop) {
const updateRes = (e: React.ChangeEvent<HTMLSelectElement>) => {
const vals = e.target.value.split(",");
@@ -32,15 +34,12 @@ export default function ConfigBox({setMetadata, className}: prop) {
}
return (
<div className={clsx("flex flex-col gap-2 p-10", className)}>
<h2 className={"text-xl font-bold"}>Export</h2>
<div className={clsx("flex flex-col gap-3 p-6", className)}>
<h2 className="text-sm font-semibold text-gray-800 mb-1">Export Settings</h2>
<Selector label={"Resolution"}>
<select id="resolution"
name="resolution"
defaultValue="1280,720"
onChange={updateRes}
className={"border-black bg-gray-200 rounded-md w-full p-2"}>
<Selector label="Resolution">
<select id="resolution" name="resolution" defaultValue="1280,720"
onChange={updateRes} className={inputClass}>
<option value="3840,2160">2160p</option>
<option value="2560,1440">1440p</option>
<option value="1920,1080">1080p</option>
@@ -50,27 +49,20 @@ export default function ConfigBox({setMetadata, className}: prop) {
</select>
</Selector>
<Selector label={"FPS"}>
<select id="fps"
name="fps"
defaultValue="30"
onChange={updateFps}
className={"border-black bg-gray-200 rounded-md w-full p-2"}>
<Selector label="FPS">
<select id="fps" name="fps" defaultValue="30"
onChange={updateFps} className={inputClass}>
<option value="60">60</option>
<option value="30">30</option>
<option value="15">15</option>
</select>
</Selector>
<Selector label={"File Size Limit (MB)"}>
<input type="number"
min="1"
defaultValue="10"
onChange={updateFileSize}
className={"border-black bg-gray-200 rounded-md w-full p-2"}
<Selector label="File Size Limit (MB)">
<input type="number" min="1" defaultValue="10"
onChange={updateFileSize} className={inputClass}
/>
</Selector>
</div>
)
}
}