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

ABSTRACT sidebar buttons

Browse Source
This commit is contained in:
Dylan De Faoite
2025-05-30 14:58:29 +02:00
parent 1802659f43
commit e65bbf8e75
6 changed files with 55 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/Sidebar.tsx
View File

@@ -1,6 +1,5 @@
import { Link } from "react-router-dom";
import clsx from "clsx";
import MenuButton from "./buttons/MenuButton.tsx";
import SidebarButton from "./buttons/SidebarButton.tsx";
import { Plus, Film, Home } from 'lucide-react';
import Box from "./Box.tsx";
@@ -10,32 +9,29 @@ type props = {
const Sidebar = ({className}: props) => {
return (
<Box className={clsx("h-screen flex flex-col gap-2 mr-5", className)}>
<Box className={clsx("h-screen flex flex-col mr-5", className)}>
<img
className={"w-45 mx-auto grayscale-100"}
className={"w-45 mx-auto"}
src={"../../public/logo.png"}
alt={"VoD System Logo"}
/>
<Link
className={"w-full"}
to={"/"}
>
<MenuButton className={"flex items-center gap-2 w-full"}>
<Home size={20}/> Home
</MenuButton>
</Link>
<SidebarButton
url={"/"}
logo={<Home size={20}/>}
label={"Home"}
/>
<Link
className={"w-full"}
to="/create"
>
<MenuButton className={"flex items-center gap-2 w-full"}>
<Plus size={20}/> Create Clip
</MenuButton>
</Link>
<MenuButton className={"flex items-center gap-2"}>
<Film size={20}/> My Clips
</MenuButton>
<SidebarButton
url={"/create"}
logo={<Plus size={20}/>}
label={"Create Clip"}
/>
<SidebarButton
url={"/my-clips"}
logo={<Film size={20}/>}
label={"My Clips"}
/>
</Box>
);
};

2
frontend/src/components/buttons/BlueButton.tsx
View File

@@ -5,7 +5,7 @@ type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
const BlueButton: React.FC<Props> = ({ className = "", ...props }) => {
return (
<button
className={`bg-primary text-text p-2 rounded-lg hover:bg-primary-pressed transition-colors duration-100 h-10 ${className}`}
className={`bg-primary text-text rounded-lg hover:bg-primary-pressed transition-colors duration-100 h-10 ${className}`}
{...props}
/>
);

3
frontend/src/components/buttons/MenuButton.tsx
View File

@@ -1,11 +1,12 @@
import React from "react";
import clsx from "clsx";
type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
const MenuButton: React.FC<Props> = ({ className = "", ...props }) => {
return (
<button
className={`text-gray-800 text-base px-3 py-2 rounded-lg hover:bg-gray-100 hover:text-black transition-colors duration-200 ${className}`}
className={clsx("p-2 rounded-lg hover:bg-gray-300 hover:text-black transition-colors duration-200", className)}
{...props}
/>
);

23
frontend/src/components/buttons/SidebarButton.tsx Normal file
View File

@@ -0,0 +1,23 @@
import MenuButton from "./MenuButton.tsx";
import { Link } from "react-router-dom";
type props = {
url: string;
logo: React.ReactNode;
label: String;
}
const SidebarButton = ({url, logo, label}: props) => {
return (
<Link
className={"w-full"}
to={url}
>
<MenuButton className={"flex items-center gap-2 w-full"}>
{logo}{label}
</MenuButton>
</Link>
)
}
export default SidebarButton;

10
frontend/src/components/video/ClipConfig.tsx
View File

@@ -32,15 +32,15 @@ export default function ClipConfig({setMetadata, className}: prop) {
}
return (
<div className={clsx("flex flex-col gap-2 p-10 rounded-md", className)}>
<h2 className={"text-3xl font-bold text-gray-800 mb-4"}>Export Settings</h2>
<div className={clsx("flex flex-col gap-2 p-10", className)}>
<h2 className={"text-3xl font-bold mb-4"}>Export Settings</h2>
<Selector label={"Resolution"}>
<select id="resolution"
name="resolution"
defaultValue="1280,720"
onChange={updateRes}
className={"border-black bg-gray-200 p-2 rounded-md w-full"}>
className={"border-black bg-gray-200 rounded-md w-full"}>
<option value="3840,2160">2160p</option>
<option value="2560,1440">1440p</option>
<option value="1920,1080">1080p</option>
@@ -55,7 +55,7 @@ export default function ClipConfig({setMetadata, className}: prop) {
name="fps"
defaultValue="30"
onChange={updateFps}
className={"border-black bg-gray-200 p-2 rounded-md w-full"}>
className={"border-black bg-gray-200 rounded-md w-full"}>
<option value="60">60</option>
<option value="30">30</option>
<option value="15">15</option>
@@ -67,7 +67,7 @@ export default function ClipConfig({setMetadata, className}: prop) {
min="1"
defaultValue="10"
onChange={updateFileSize}
className={"border-black bg-gray-200 p-2 rounded-md w-full"}
className={"border-black bg-gray-200 rounded-md w-full"}
/>
</Selector>

7
frontend/src/components/video/Playbar.tsx
View File

@@ -76,7 +76,7 @@ export default function Playbar({ video, videoMetadata, className }: Props) {
}, [video]);
return (
<div className={clsx("flex justify-between items-center p-2 rounded-lg", className)}>
<div className={clsx("flex justify-between items-center mb-2", className)}>
<div className={"flex gap-1"}>
<Icon size={24} />
<input
@@ -88,7 +88,10 @@ export default function Playbar({ video, videoMetadata, className }: Props) {
className={"w-20"}
/>
</div>
<button onClick={togglePlay}>
<button
onClick={togglePlay}
className={"hover:bg-gray-300 rounded-full p-1"}
>
{isPlaying ? <Pause size={24} /> : <Play size={24} />}
</button>
{videoMetadata.endPoint &&