chore: Code clean-up and setup environment variables

.gitignore

@@ -32,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+.env
 
 # vercel
 .vercel

src/app/screen/components/VideoControls/VideoControls.css

@@ -114,6 +114,12 @@
   justify-content: space-around;
   align-items: center;
 }
+.video-time {
+  color: white;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
 .time {
   color: white;
   padding-right: 15px;

src/app/screen/components/VideoControls/VideoControls.tsx

@@ -190,7 +190,6 @@ const VideoControls = (props: VideoControlsProps) => {
     setIsFullscreen(!isFullscreen);
   };
 
-
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
        if (!controls.current) return;

src/components/custom/BoxRevalStory.tsx

@@ -3,6 +3,7 @@ import { BoxReveal } from "@/components/magicui/box-reveal";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 export function BoxRevalStory() {
   return (
+    <>
     <div className='max-w-lg items-center justify-center overflow-hidden pt-8'>
       <BoxReveal boxColor={"#5046e6"} duration={0.5}>
         <p className='text-[3.5rem] font-semibold'>
@@ -36,5 +37,7 @@ export function BoxRevalStory() {
         <Button className='mt-[1.6rem] bg-[#5046e6]'>This gave me this idea</Button>
       </BoxReveal>
     </div>
+    </>
+
   );
 }

src/components/custom/Footer.tsx

@@ -15,7 +15,7 @@ const Footer = () => {
         >
           <path d='M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z'></path>
         </svg>
-        <p>Copyright © {new Date().getFullYear()} - All right reserved</p>
+        <p className="text-center">Copyright © {new Date().getFullYear()} - All right reserved</p>
       </aside>
       <nav className='grid-flow-col gap-4 md:place-self-center md:justify-self-end'>
         <a>

src/components/magicui/animated-beam.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
 "use client";
 
 import { motion } from "motion/react";
@@ -94,7 +96,7 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
     // Initialize ResizeObserver
     const resizeObserver = new ResizeObserver((entries) => {
       // For all entries, recalculate the path
-      for (let entry of entries) {
+      for (const entry of entries) {
         updatePath();
       }
     });

src/components/magicui/animated-grid-pattern.tsx

@@ -1,3 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any  */
+/* eslint-disable  react-hooks/exhaustive-deps  */
+
 "use client";
 
 import { motion } from "motion/react";
@@ -81,7 +85,7 @@ export function AnimatedGridPattern({
   // Resize observer to update container dimensions
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
+      for (const entry of entries) {
         setDimensions({
           width: entry.contentRect.width,
           height: entry.contentRect.height,

src/components/magicui/box-reveal.tsx

@@ -4,7 +4,7 @@ import { motion, useAnimation, useInView } from "motion/react";
 import { useEffect, useRef } from "react";
 
 interface BoxRevealProps {
-  children: JSX.Element;
+  children: React.ReactNode;
   width?: "fit-content" | "100%";
   boxColor?: string;
   duration?: number;

src/components/magicui/dock.tsx

@@ -47,7 +47,7 @@ const Dock = React.forwardRef<HTMLDivElement, DockProps>(
 
     const renderChildren = () => {
       return React.Children.map(children, (child) => {
-        if (React.isValidElement(child) && child.type === DockIcon) {
+        if (React.isValidElement<DockIconProps>(child) && child.type === DockIcon) {
           return React.cloneElement(child, {
             ...child.props,
             mouseX: mouseX,

src/components/magicui/interactive-hover-button.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+
 import React from "react";
 import { ArrowRight } from "lucide-react";
 import { cn } from "@/lib/utils";

src/components/magicui/particles.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable  react-hooks/exhaustive-deps  */
+
 "use client";
 
 import { cn } from "@/lib/utils";

src/components/magicui/pointer.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable  @typescript-eslint/no-empty-object-type   */
+
 "use client";
 
 import { cn } from "@/lib/utils";
@@ -7,7 +9,7 @@ import {
   motion,
   useMotionValue,
 } from "motion/react";
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 interface PointerProps extends Omit<HTMLMotionProps<"div">, "ref"> {}
 
@@ -24,7 +26,7 @@ export function Pointer({
   style,
   children,
   ...props
-}: PointerProps): JSX.Element {
+}: PointerProps): React.ReactNode {
   const x = useMotionValue(0);
   const y = useMotionValue(0);
   const [isActive, setIsActive] = useState<boolean>(false);