Added data download ability

frontend/src/components/SignVideoGrid.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import { getSigns, addSign } from '../services/signs';
+import { Sign, SignVideo } from '../types/sign';
+import SignComponent from './SignComponent';
+import SignVideoThumbnail from './SignVideoThumbnail';
+
+interface Props {
+    sign: Sign | null;
+    currentVideo: number | null;
+    setCurrentVideo: (sign_video: number | null) => void;
+}
+
+const SignVideoGrid: React.FC<Props> = ({ sign, setCurrentVideo, currentVideo }) => {
+
+    const [isHovered, setIsHovered] = React.useState(false);
+
+    const handleVideoClick = (sign_video: number) => {
+        setCurrentVideo(sign_video);
+    }
+
+    return (
+        <div className="grid grid-flow-col auto-cols-max gap-5 mt-5" >
+            {sign != null &&
+                <div className={`rounded-lg w-60 h-32 ${isHovered ? 'bg-gray-300' : 'bg-gray-200'} flex items-center justify-center ${isHovered ? 'text-6xl' : 'text-4xl'}`} onMouseEnter={() => {
+                    setIsHovered(true);
+                }}
+                    onMouseLeave={() => {
+                        setIsHovered(false);
+                    }} onClick={
+                        () => {
+                            setCurrentVideo(null);
+                        }
+                    }>
+                    <i className={`fas fa-camera ${isHovered ? 'text-6xl' : 'text-4xl'}`}></i>
+                </div>
+            }
+            {sign &&
+                sign.sign_videos.map((vid, i) => <SignVideoThumbnail selected={currentVideo == i} sign_id={sign.id} sign_video={vid} handle_play={() => handleVideoClick(i)} />)
+            }
+        </div >
+    );
+};
+
+export default SignVideoGrid;