Everything works!

package.json

@@ -25,10 +25,12 @@
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@supabase/supabase-js": "^2.39.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide-react": "^0.363.0",
     "next": "14.1.4",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
     "react-dropzone": "^14.2.3",

src/app/cards.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import React from 'react';
+
+import UploadFile from '@/components/upload-file';
+import DownloadFile from '@/components/download-file';
+import { JsonlProvider } from '@/contexts/jsonl-context';
+
+export default function Cards() {
+  return (
+    <JsonlProvider>
+      <UploadFile />
+      <DownloadFile />
+    </JsonlProvider>
+  );
+}

src/app/layout.tsx

@@ -2,6 +2,8 @@ import type { Metadata } from 'next';
 import { Inter as FontSans } from 'next/font/google';
 
 import { cn } from '@/lib/utils';
+import AppHeader from '@/components/app-header';
+import { ThemeProvider } from '@/components/theme-provider';
 
 import './globals.css';
 
@@ -10,8 +12,10 @@ const fontSans = FontSans({
   variable: '--font-sans'
 });
 
+const APP_NAME = 'toJSONL';
+
 export const metadata: Metadata = {
-  title: 'Create Next App',
+  title: APP_NAME,
   description: 'Generated by create next app'
 };
 
@@ -28,7 +32,16 @@ export default function RootLayout({
           fontSans.variable
         )}
       >
-        {children}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <AppHeader name={APP_NAME} />
+
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   );