cleaning up the UI, adding title, description, and thumbnail for video metadata

Author: wjohnsto

.gitignore

@@ -7,4 +7,6 @@ dist
 
 .vscode
 .env
-.env.*
+.env.*
+
+.credentials

app/next.config.js

@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'i.ytimg.com',
+      },
+    ],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

app/src/app/page.tsx

@@ -1,13 +1,27 @@
-"use client";
+'use client';
 
+import { useState } from 'react';
 import QuestionForm from '@/components/QuestionForm';
+import VideoList, { type VideoDocument } from '@/components/VideoList';
+
+const SEARCH_API = `http://localhost:3001/api/videos/search`;
 
 export default function Home() {
+  const [videos, setVideos] = useState<VideoDocument[]>([]);
+
+  const handleSearch = async (question: string) => {
+    // Replace with your API call
+    const response = await fetch(`${SEARCH_API}?question=${question}`);
+    const data: { results: VideoDocument[] } = await response.json();
+    setVideos(data.results);
+  };
+
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <QuestionForm onSubmit={(question) => {
-        console.log(question);
-      }} />
+      <div className="container mx-auto p-4">
+        <QuestionForm onSubmit={handleSearch} />
+        <VideoList videos={videos} />
+      </div>
     </main>
   );
 }

app/src/components/QuestionForm.tsx

@@ -17,10 +17,7 @@ export default function QuestionForm({ onSubmit }: QuestionFormProps) {
         /* and other goodies */
       }) => (
         <Form>
-          <Field as="textarea" name="question" />
-          <button type="submit" disabled={isSubmitting}>
-            Submit
-          </button>
+          <Field as="input" name="question" className="w-full p-4 border rounded shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-600" />
         </Form>
       )}
     </Formik>

app/src/components/VideoList.tsx

@@ -0,0 +1,45 @@
+import Image from 'next/image';
+
+export interface VideoDocument {
+  pageContent: string;
+  metadata: {
+    id: string;
+    link: string;
+    title: string;
+    description: string;
+    thumbnail: string;
+  };
+}
+
+const VideoList = ({ videos }: { videos: VideoDocument[] }) => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-8">
+      {videos.map(({ metadata }) => (
+        <div
+          key={metadata.id}
+          className="max-w-sm rounded overflow-hidden shadow-lg">
+          <div className="w-full">
+            <Image
+              src={metadata.thumbnail}
+              alt={metadata.title}
+              layout="responsive"
+              width={1280}
+              height={720}
+            />
+          </div>
+          <div className="px-6 py-4">
+            <a
+              href={metadata.link}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-bold text-xl mb-2 hover:text-indigo-600">
+              {metadata.title}
+            </a>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default VideoList;