yt fix

components/Youtube.tsx

@@ -1,9 +1,5 @@
 export const YouTubeVideo = ({ id, children }: any) => (
-    <iframe
+    <iframe src={'https://www.youtube.com/embed/' + id} className="w-full xl:h-96 md:h-80 h-64">
-      src={'https://www.youtube.com/embed/' + id}
-      width="640"
-      height="360"
-    >
         {children}
     </iframe>
 )

layouts/MainLayout.tsx

@@ -1,13 +1,12 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react'
-import { R3Gradient } from '../components/R3Background';
+import { R3Gradient } from '../components/R3Background'
-import { Navbar } from "../components/Navbar";
+import { Navbar } from '../components/Navbar'
 
 export const MainLayout = ({ children }: PropsWithChildren) => {
     return (
         <div className="w-full">
             <Navbar />
-      <R3Gradient />
             <main className="xl:p-5 p-4 px-5 xl:mx-0">{children}</main>
         </div>
-  );
+    )
-};
+}

pages/_app.tsx

@@ -1,6 +1,12 @@
+import { R3Gradient } from '../components/R3Background'
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+    return (
+        <>
+            <R3Gradient />
+            <Component {...pageProps} />
+        </>
+    )
 }

pages/projects/index.tsx

@@ -1,27 +1,17 @@
-import { GetServerSideProps } from "next";
+import { GetServerSideProps } from 'next'
-import { MainLayout } from "../../layouts/MainLayout";
+import { MainLayout } from '../../layouts/MainLayout'
-import { Post, getAllProjectsFrontMatter } from "../../utils/markdown";
+import { Post, getAllProjectsFrontMatter } from '../../utils/markdown'
-import Link from "next/link";
+import Link from 'next/link'
-import { formatDate } from "../../utils/general";
+import { formatDate } from '../../utils/general'
-import { BasicArticleProps } from "../../components/PostHeader";
+import { BasicArticleProps } from '../../components/PostHeader'
 
-const ProjectCard = ({
+const ProjectCard = ({ project, slug }: { project: BasicArticleProps; slug: string }) => {
-  project,
-  slug,
-}: {
-  project: BasicArticleProps;
-  slug: string;
-}) => {
     return (
         <div className="p-4 rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:shadow-gray-900 dark:border-gray-700 grid grid-cols-1 xl:grid-cols-2 items-center gap-4 bg-black bg-opacity-60">
             <div className="order-last xl:order-1">
-        <div className="text-sm font-medium text-gray-500">
+                <div className="text-sm font-medium text-gray-500">{formatDate(project.date)}</div>
-          {formatDate(project.date)}
-        </div>
                 <h2 className="text-2xl font-bold">{project.title}</h2>
-        <p className="text-gray-600 dark:text-gray-400 text-sm">
+                <p className="text-gray-600 dark:text-gray-400 text-sm">{project.description}</p>
-          {project.description}
-        </p>
                 <Link href={`project/${slug}`}>
                     <button className="bg-action px-2 py-1 rounded-md mt-4 hover:bg-action/60 transition-all ease-in duration-100 font-bold text-white">
                         Read more
@@ -36,36 +26,30 @@ const ProjectCard = ({
                 />
             )}
         </div>
-  );
+    )
-};
+}
 
 const Projects = ({ posts }: { posts: Post[] }) => {
     return (
         <MainLayout>
-      <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100">
+            <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100">Projects</h1>
-        Projects
-      </h1>
             <div className="w-full h-0.5 bg-violet-200 dark:bg-white/20 my-4 rounded-full" />
             <div className="grid grid-cols-1 gap-4">
                 {posts.map((post, index) => (
-          <ProjectCard
+                    <ProjectCard key={index} project={post.frontMatter as BasicArticleProps} slug={post.slug} />
-            key={index}
-            project={post.frontMatter as BasicArticleProps}
-            slug={post.slug}
-          />
                 ))}
             </div>
         </MainLayout>
-  );
+    )
-};
+}
 
 export const getServerSideProps: GetServerSideProps = async () => {
-  const posts = getAllProjectsFrontMatter();
+    const posts = getAllProjectsFrontMatter()
     return {
         props: {
             posts,
         },
-  };
+    }
-};
+}
 
-export default Projects;
+export default Projects