yt fix

components/Youtube.tsx

@@ -1,9 +1,5 @@
-export const YouTubeVideo = ({id, children} : any) => (
+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}
+        {children}
-      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 (
+    return (
-    <div className="w-full">
+        <div className="w-full">
-      <Navbar />
+            <Navbar />
-      <R3Gradient />
+            <main className="xl:p-5 p-4 px-5 xl:mx-0">{children}</main>
-      <main className="xl:p-5 p-4 px-5 xl:mx-0">{children}</main>
+        </div>
-    </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,71 +1,55 @@
-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,
+    return (
-  slug,
+        <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">
-  project: BasicArticleProps;
+                <div className="text-sm font-medium text-gray-500">{formatDate(project.date)}</div>
-  slug: string;
+                <h2 className="text-2xl font-bold">{project.title}</h2>
-}) => {
+                <p className="text-gray-600 dark:text-gray-400 text-sm">{project.description}</p>
-  return (
+                <Link href={`project/${slug}`}>
-    <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">
+                    <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">
-      <div className="order-last xl:order-1">
+                        Read more
-        <div className="text-sm font-medium text-gray-500">
+                    </button>
-          {formatDate(project.date)}
+                </Link>
+            </div>
+            {project.thumbnail && (
+                <img
+                    src={project.thumbnail}
+                    alt={`${slug}-thumbnail`}
+                    className="w-full xl:h-40 h-auto object-cover rounded-md order-1 xl:order-last"
+                />
+            )}
         </div>
-        <h2 className="text-2xl font-bold">{project.title}</h2>
+    )
-        <p className="text-gray-600 dark:text-gray-400 text-sm">
+}
-          {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
-          </button>
-        </Link>
-      </div>
-      {project.thumbnail && (
-        <img
-          src={project.thumbnail}
-          alt={`${slug}-thumbnail`}
-          className="w-full xl:h-40 h-auto object-cover rounded-md order-1 xl:order-last"
-        />
-      )}
-    </div>
-  );
-};
 
 const Projects = ({ posts }: { posts: Post[] }) => {
-  return (
+    return (
-    <MainLayout>
+        <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
+            <div className="w-full h-0.5 bg-violet-200 dark:bg-white/20 my-4 rounded-full" />
-      </h1>
+            <div className="grid grid-cols-1 gap-4">
-      <div className="w-full h-0.5 bg-violet-200 dark:bg-white/20 my-4 rounded-full" />
+                {posts.map((post, index) => (
-      <div className="grid grid-cols-1 gap-4">
+                    <ProjectCard key={index} project={post.frontMatter as BasicArticleProps} slug={post.slug} />
-        {posts.map((post, index) => (
+                ))}
-          <ProjectCard
+            </div>
-            key={index}
+        </MainLayout>
-            project={post.frontMatter as BasicArticleProps}
+    )
-            slug={post.slug}
+}
-          />
-        ))}
-      </div>
-    </MainLayout>
-  );
-};
 
 export const getServerSideProps: GetServerSideProps = async () => {
-  const posts = getAllProjectsFrontMatter();
+    const posts = getAllProjectsFrontMatter()
-  return {
+    return {
-    props: {
+        props: {
-      posts,
+            posts,
-    },
+        },
-  };
+    }
-};
+}
 
-export default Projects;
+export default Projects