REFACTOR frontend

frontend/src/components/Selector.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+type props = {
+    children: React.ReactNode;
+    label: String;
+}
+
+const Selector = ({children, label}: props) => {
+    return (
+        <div className={"flex items-center gap-2"}>
+            <label
+                className={"w-full"}>
+                { label }
+            </label>
+            <div className="w-px h-6 bg-gray-400 mx-3" />
+            {children}
+        </div>
+    )
+}
+
+export default Selector;

frontend/src/components/video/ClipConfig.tsx

@@ -1,4 +1,5 @@
-import type { VideoMetadata } from "../utils/types.ts";
+import type { VideoMetadata } from "../../utils/types.ts";
+import Selector from "../Selector.tsx";
 import clsx from "clsx";
 
 type prop = {
@@ -33,11 +34,8 @@ 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="flex items-center gap-2">
-                <label htmlFor="resolution"
-                       className={"w-full"}
-                >Resolution: </label>
-                <div className="w-px h-6 bg-gray-400 mx-3" />
+
+            <Selector label={"Resolution"}>
                 <select id="resolution"
                         name="resolution"
                         defaultValue="1280,720"
@@ -50,13 +48,9 @@ export default function ClipConfig({setMetadata, className}: prop) {
                     <option value="854,480">480p</option>
                     <option value="640,360">360p</option>
                 </select>
-            </div>
+            </Selector>
 
-            <div className="flex items-center gap-2">
-                <label htmlFor="fps"
-                       className={"w-full"}
-                >FPS: </label>
-                <div className="w-px h-6 bg-gray-400 mx-3" />
+            <Selector label={"FPS"}>
                 <select id="fps"
                         name="fps"
                         defaultValue="30"
@@ -66,20 +60,17 @@ export default function ClipConfig({setMetadata, className}: prop) {
                     <option value="30">30</option>
                     <option value="15">15</option>
                 </select>
-            </div>
+            </Selector>
 
-            <div className="flex items-center gap-2">
-                <label className={"w-full"}>
-                    File Size (mb):
-                </label>
-                <div className="w-px h-6 bg-gray-400 mx-3" />
+            <Selector label={"File Size"}>
                 <input type="number"
                        min="1"
                        defaultValue="10"
                        onChange={updateFileSize}
                        className={"border-black bg-gray-200 p-2 rounded-md w-full"}
                 />
-            </div>
+            </Selector>
+
         </div>
     )
 }

frontend/src/components/video/ClipRangeSlider.tsx

@@ -2,7 +2,7 @@ import RangeSlider from 'react-range-slider-input';
 import 'react-range-slider-input/dist/style.css';
 import {useRef} from "react";
 import clsx from 'clsx';
-import type { VideoMetadata } from "../utils/types.ts";
+import type { VideoMetadata } from "../../utils/types.ts";
 
 type Props = {
     videoRef: HTMLVideoElement | null;

frontend/src/components/video/ExportWidget.tsx

@@ -1,4 +1,5 @@
-import BlueButton from "./buttons/BlueButton.tsx";
+import BlueButton from "../buttons/BlueButton.tsx";
+import React from "react";
 
 type props = {
     dataSend: React.MouseEventHandler<HTMLButtonElement>;

frontend/src/components/video/PlaybackSlider.tsx

@@ -1,6 +1,6 @@
 import {useEffect} from "react";
 import clsx from 'clsx';
-import type { VideoMetadata } from "../utils/types.ts";
+import type { VideoMetadata } from "../../utils/types.ts";
 
 type Props = {
     videoRef: HTMLVideoElement | null;

frontend/src/components/video/Playbar.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState} from "react";
 import { Volume1, Volume2, VolumeX, Play, Pause } from 'lucide-react';
 import clsx from 'clsx';
-import type { VideoMetadata } from "../utils/types.ts";
+import type { VideoMetadata } from "../../utils/types.ts";
 
 
 type Props = {