add blog

src/components/BlogCard.tsx

@@ -0,0 +1,26 @@
+import Image from 'next/image'
+import Link from 'next/link';
+
+type BlogCardProps = {
+    image: string,
+    name: string,
+    tagline: string,
+    id: string
+}
+export default function BlogCard(props: BlogCardProps) {
+    return (
+        <Link href={`/blog/${props.id}`}>
+            <div className="inline-block">
+                <div className="bg-white text-black text-center">
+                    <div>
+                        <Image src={props.image} width="300" height="300" alt="Blog Cover" />
+                    </div>
+                    <div className="p-4 divide-y divide-black">
+                        <h1 className="font-bold">{props.name}</h1>
+                        <p>{props.tagline}</p>
+                    </div>
+                </div>
+            </div>
+        </Link>
+    )
+}

src/components/MusicCard.tsx

@@ -19,7 +19,7 @@ export default function MusicCard() {
                             />
                         </div>
                         <div className="flex flex-col ml-2 pt-1.5">
-                            <h1>{musicFetch.data.track.name}</h1>
+                            <h1 className="text-sm truncate">{musicFetch.data.track.name}</h1>
                             <p>{musicFetch.data.track.artist["#text"]}</p>
                         </div>
                     </div>

src/components/NotFound.tsx

@@ -0,0 +1,8 @@
+export default function NotFound() {
+    return (
+        <div className="text-white text-center">
+            <h1 className="font-bold text-2xl">Well, this is awkward..</h1>
+            <p>There&apos;s nothing here right now :/</p>
+        </div>
+    )
+}

src/components/header.tsx

@@ -12,6 +12,7 @@ export default function Header() {
                     <HeaderItem content="home" linkTo="/" />
                     <HeaderItem content="reviews" linkTo="/reviews" />
                     <HeaderItem content="links" linkTo="/links" />
+                    <HeaderItem content="blog" linkTo="/blog" />
                     { status === "authenticated" &&
                         <HeaderItem 
                             content="create"