From 819ab4116f9113c7ac2f7765c14deb73526ee15e Mon Sep 17 00:00:00 2001
From: carlevison <caroline.levison@cloudinary.com>
Date: Mon, 9 Dec 2024 16:33:27 +0000
Subject: [PATCH 1/8] Working without moderation

---
 app/cloudinary-video-player.tsx |  71 +++
 app/config/cloudinary.ts        |   4 +-
 app/globals.css                 |  79 ++-
 app/layout.tsx                  |   3 +-
 app/page.tsx                    | 165 +-----
 app/page_profile.tsx            | 142 +++++
 app/product-reviews.tsx         | 130 +++++
 app/types/cloudinary.d.ts       |  15 +
 components.json                 |  21 +
 components/ui/button.tsx        |  57 ++
 components/ui/card.tsx          |  76 +++
 components/ui/textarea.tsx      |  22 +
 lib/utils.ts                    |   6 +
 package-lock.json               | 985 +++++++++++++++++++++++++++-----
 package.json                    |   9 +-
 tailwind.config.ts              |  60 +-
 16 files changed, 1549 insertions(+), 296 deletions(-)
 create mode 100644 app/cloudinary-video-player.tsx
 create mode 100644 app/page_profile.tsx
 create mode 100644 app/product-reviews.tsx
 create mode 100644 app/types/cloudinary.d.ts
 create mode 100644 components.json
 create mode 100644 components/ui/button.tsx
 create mode 100644 components/ui/card.tsx
 create mode 100644 components/ui/textarea.tsx
 create mode 100644 lib/utils.ts

diff --git a/app/cloudinary-video-player.tsx b/app/cloudinary-video-player.tsx
new file mode 100644
index 0000000..f13fb01
--- /dev/null
+++ b/app/cloudinary-video-player.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import { useEffect, useRef, useState } from "react"
+
+interface CloudinaryVideoPlayerProps {
+  publicId: string
+}
+
+export function CloudinaryVideoPlayer({ publicId }: CloudinaryVideoPlayerProps) {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const [isScriptLoaded, setIsScriptLoaded] = useState(false)
+
+  useEffect(() => {
+    if (!window.cloudinary || !window.cloudinary.videoPlayer) {
+      const script = document.createElement("script")
+      script.src = "https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js"
+      script.async = true
+      
+      script.onload = () => {
+        const videoPlayerScript = document.createElement("script")
+        videoPlayerScript.src = "https://unpkg.com/cloudinary-video-player@1.9.9/dist/cld-video-player.min.js"
+        videoPlayerScript.async = true
+        videoPlayerScript.onload = () => setIsScriptLoaded(true)
+        videoPlayerScript.onerror = (error) => console.error("Error loading Cloudinary Video Player script:", error)
+        document.head.appendChild(videoPlayerScript)
+      }
+      
+      script.onerror = (error) => console.error("Error loading Cloudinary Core script:", error)
+      document.head.appendChild(script)
+
+      const link = document.createElement("link")
+      link.href = "https://unpkg.com/cloudinary-video-player@1.9.9/dist/cld-video-player.min.css"
+      link.rel = "stylesheet"
+      document.head.appendChild(link)
+
+      return () => {
+        document.head.removeChild(script)
+        const videoPlayerScript = document.querySelector('script[src="https://unpkg.com/cloudinary-video-player@1.9.9/dist/cld-video-player.min.js"]')
+        if (videoPlayerScript) {
+          document.head.removeChild(videoPlayerScript)
+        }
+        document.head.removeChild(link)
+      }
+    } else {
+      setIsScriptLoaded(true)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (isScriptLoaded && videoRef.current && window.cloudinary && window.cloudinary.videoPlayer) {
+      const player = window.cloudinary.videoPlayer(videoRef.current, {
+        cloud_name: "cld-demo-ugc",
+        controls: true,
+      })
+      player.source(publicId)
+
+      return () => {
+        player.dispose()
+      }
+    }
+  }, [isScriptLoaded, publicId])
+
+  return (
+    <video 
+      ref={videoRef}
+      className="cld-video-player w-full"
+      controls
+    />
+  )
+}
+
diff --git a/app/config/cloudinary.ts b/app/config/cloudinary.ts
index c92378b..eff7a77 100644
--- a/app/config/cloudinary.ts
+++ b/app/config/cloudinary.ts
@@ -1,5 +1,5 @@
 export const CLOUDINARY_CONFIG = {
-    cloudName: 'MY_CLOUD_NAME',
-    uploadPreset: 'ugc-profile-photo',
+    cloudName: 'cld-demo-ugc',
+    uploadPreset: 'ugc-profile-photo-local',
     defaultImage: 'avatar-pic'
   } as const
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index 13d40b8..1dcb0fc 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,21 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
-  color: var(--foreground);
-  background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
 }
 
@@ -25,3 +11,68 @@ body {
     text-wrap: balance;
   }
 }
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 4f64db4..c37c70b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -22,8 +22,7 @@ export default function RootLayout({
         <UserProvider>
           <nav className="bg-gray-800 text-white p-4">
             <ul className="flex space-x-4">
-              <li><Link href="/" className="hover:text-gray-300">My Profile</Link></li>
-              <li><Link href="/posts" className="hover:text-gray-300">My Posts</Link></li>
+              <li><Link href="/" className="hover:text-gray-300">Bluetooth Adapter</Link></li>
             </ul>
           </nav>
           {children}
diff --git a/app/page.tsx b/app/page.tsx
index f6f91f8..b7e4a6c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,142 +1,37 @@
-'use client'
-
-import { useState } from 'react'
-import { useUser } from './context/UserContext'
-import { RotatingLines } from 'react-loader-spinner'
-import UploadWidget from './components/upload-widget'
-import cld from "./components/cld"
-import { AdvancedImage } from '@cloudinary/react'
-import { fill } from '@cloudinary/url-gen/actions/resize'
-import { enhance, generativeRestore, upscale } from "@cloudinary/url-gen/actions/effect"
-import { focusOn, autoGravity } from "@cloudinary/url-gen/qualifiers/gravity"
-import { face } from "@cloudinary/url-gen/qualifiers/focusOn"
-import { CLOUDINARY_CONFIG } from "./config/cloudinary"
-
-// The Profile page lets the user input their personal information and upload a profile picture.
-export default function MyProfile() {
-  const [isEditing, setIsEditing] = useState(false)
-  const [uploadError, setUploadError] = useState('')
-
-  const { 
-    setProfilePublicId,
-    profileImage, setProfileImage,
-    name, setName,
-    location, setLocation,
-    birthday, setBirthday,
-    setProfileIsPoorQuality
-  } = useUser()
-  const [loading, setLoading] = useState(false)
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    setIsEditing(false)
-  }
-
-  const handleUploadSuccess = (publicId: string, poorQuality: boolean) => {
-    setLoading(false)
-    setUploadError('')
-    setProfilePublicId(publicId)
-    setProfileIsPoorQuality(poorQuality)
-
-    // Create the delivery URL for the profile picture:
-    const profileImage = cld.image(publicId)
-
-    profileImage.resize(fill().width(300).height(300).gravity(
-      focusOn(face()).fallbackGravity(autoGravity())))
-      .format('auto').quality('auto')
-
-    if (poorQuality) {
-      profileImage.effect(enhance()).effect(generativeRestore()).effect(upscale())
-    }
-
-    setProfileImage(profileImage)
-  }
-
-  const handleUploadError = (error: string) => {
-    setLoading(false)
-    setUploadError(error)
-  }
-
-  const handleImageUpload = (e: React.MouseEvent) => {
-    e.preventDefault() // Prevent form submission
-    // The actual upload logic is handled in the UploadWidget component
-  }
+import Image from "next/image"
+import { Card, CardContent } from "@/components/ui/card"
+import { ProductReviews } from "./product-reviews"
 
+export default function ProductPage() {
   return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-4">My Profile</h1>
-      {isEditing ? (
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <input
-            type="text"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            placeholder="Name"
-            className="w-full p-2 border rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
-          />
-          <input
-            type="text"
-            value={location}
-            onChange={(e) => setLocation(e.target.value)}
-            placeholder="Location"
-            className="w-full p-2 border rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
-          />
-          <input
-            type="date"
-            value={birthday}
-            onChange={(e) => setBirthday(e.target.value)}
-            className="w-full p-2 border rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 [color-scheme:light] dark:[color-scheme:dark]"
-          />
-          <button type="submit" className="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded transition duration-300">
-          Save
-          </button>
-        </form>
-      ) : (
+    <div className="container mx-auto py-8">
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card>
+          <CardContent className="p-6">
+            <div className="aspect-square relative overflow-hidden rounded-lg">
+              <Image
+                src="https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/docs/bluetooth_dongle.jpg"
+                alt="Bluetooth Dongle"
+                fill
+                className="object-cover"
+                priority
+              />
+            </div>
+          </CardContent>
+        </Card>
         <div className="space-y-4">
-          <p><strong>Name:</strong> {name || 'Not set'}</p>
-          <p><strong>Location:</strong> {location || 'Not set'}</p>
-          <p><strong>Birthday:</strong> {birthday || 'Not set'}</p>
-          <button
-            onClick={() => setIsEditing(true)}
-            className="bg-green-500 hover:bg-green-600 text-white p-2 rounded transition duration-300"
-          >
-            Edit Profile
-          </button>
+          <h1 className="text-3xl font-bold">Bluetooth 5.0 USB Adapter</h1>
+          <p className="text-lg text-muted-foreground">
+            High-speed Bluetooth dongle compatible with Windows, Mac, and Linux. Perfect for connecting wireless devices to your computer.
+          </p>
+          <div className="flex items-center gap-2">
+            <div className="text-2xl font-bold">$29.99</div>
+            <div className="text-sm text-muted-foreground">Free shipping</div>
+          </div>
         </div>
-      )}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold mb-4">Profile Picture</h2>
-        <p>Upload an image for your profile picture.</p>
-        <p className="mb-6">We&apos;ll check that it&apos;s not offensive and doesn&apos;t contain malware.</p>
-        <div className="space-y-4">
-        {loading ? (
-          <RotatingLines
-          visible={true}
-          width="96"
-          strokeColor="#de5e14"
-          strokeWidth="5"
-          animationDuration="0.75"
-        />
-        ):
-        profileImage ? (
-          <AdvancedImage cldImg={profileImage} width={300} height={300} alt="Profile"/>
-
-        ) : (
-          <AdvancedImage cldImg={cld.image(CLOUDINARY_CONFIG.defaultImage)
-            .resize(fill().width(300).height(300).gravity(autoGravity()))
-            .format('auto')
-            .quality('auto')} width={300} height={300} alt="Profile" />
-        )}
-        <UploadWidget
-          onUploadSuccess={handleUploadSuccess}
-          onUploadError={handleUploadError}
-          setLoading={setLoading}
-          buttonText="Edit Profile Picture"
-          onClick={handleImageUpload}
-        />
-        </div>
-        {uploadError && <p className="text-red-500 mt-2">{uploadError}</p>}
       </div>
+      <ProductReviews />
     </div>
   )
-}
\ No newline at end of file
+}
+
diff --git a/app/page_profile.tsx b/app/page_profile.tsx
new file mode 100644
index 0000000..f6f91f8
--- /dev/null
+++ b/app/page_profile.tsx
@@ -0,0 +1,142 @@
+'use client'
+
+import { useState } from 'react'
+import { useUser } from './context/UserContext'
+import { RotatingLines } from 'react-loader-spinner'
+import UploadWidget from './components/upload-widget'
+import cld from "./components/cld"
+import { AdvancedImage } from '@cloudinary/react'
+import { fill } from '@cloudinary/url-gen/actions/resize'
+import { enhance, generativeRestore, upscale } from "@cloudinary/url-gen/actions/effect"
+import { focusOn, autoGravity } from "@cloudinary/url-gen/qualifiers/gravity"
+import { face } from "@cloudinary/url-gen/qualifiers/focusOn"
+import { CLOUDINARY_CONFIG } from "./config/cloudinary"
+
+// The Profile page lets the user input their personal information and upload a profile picture.
+export default function MyProfile() {
+  const [isEditing, setIsEditing] = useState(false)
+  const [uploadError, setUploadError] = useState('')
+
+  const { 
+    setProfilePublicId,
+    profileImage, setProfileImage,
+    name, setName,
+    location, setLocation,
+    birthday, setBirthday,
+    setProfileIsPoorQuality
+  } = useUser()
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsEditing(false)
+  }
+
+  const handleUploadSuccess = (publicId: string, poorQuality: boolean) => {
+    setLoading(false)
+    setUploadError('')
+    setProfilePublicId(publicId)
+    setProfileIsPoorQuality(poorQuality)
+
+    // Create the delivery URL for the profile picture:
+    const profileImage = cld.image(publicId)
+
+    profileImage.resize(fill().width(300).height(300).gravity(
+      focusOn(face()).fallbackGravity(autoGravity())))
+      .format('auto').quality('auto')
+
+    if (poorQuality) {
+      profileImage.effect(enhance()).effect(generativeRestore()).effect(upscale())
+    }
+
+    setProfileImage(profileImage)
+  }
+
+  const handleUploadError = (error: string) => {
+    setLoading(false)
+    setUploadError(error)
+  }
+
+  const handleImageUpload = (e: React.MouseEvent) => {
+    e.preventDefault() // Prevent form submission
+    // The actual upload logic is handled in the UploadWidget component
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="text-2xl font-bold mb-4">My Profile</h1>
+      {isEditing ? (
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Name"
+            className="w-full p-2 border rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
+          />
+          <input
+            type="text"
+            value={location}
+            onChange={(e) => setLocation(e.target.value)}
+            placeholder="Location"
+            className="w-full p-2 border rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
+          />
+          <input
+            type="date"
+            value={birthday}
+            onChange={(e) => setBirthday(e.target.value)}
+            className="w-full p-2 border rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 [color-scheme:light] dark:[color-scheme:dark]"
+          />
+          <button type="submit" className="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded transition duration-300">
+          Save
+          </button>
+        </form>
+      ) : (
+        <div className="space-y-4">
+          <p><strong>Name:</strong> {name || 'Not set'}</p>
+          <p><strong>Location:</strong> {location || 'Not set'}</p>
+          <p><strong>Birthday:</strong> {birthday || 'Not set'}</p>
+          <button
+            onClick={() => setIsEditing(true)}
+            className="bg-green-500 hover:bg-green-600 text-white p-2 rounded transition duration-300"
+          >
+            Edit Profile
+          </button>
+        </div>
+      )}
+      <div className="mt-8">
+        <h2 className="text-xl font-bold mb-4">Profile Picture</h2>
+        <p>Upload an image for your profile picture.</p>
+        <p className="mb-6">We&apos;ll check that it&apos;s not offensive and doesn&apos;t contain malware.</p>
+        <div className="space-y-4">
+        {loading ? (
+          <RotatingLines
+          visible={true}
+          width="96"
+          strokeColor="#de5e14"
+          strokeWidth="5"
+          animationDuration="0.75"
+        />
+        ):
+        profileImage ? (
+          <AdvancedImage cldImg={profileImage} width={300} height={300} alt="Profile"/>
+
+        ) : (
+          <AdvancedImage cldImg={cld.image(CLOUDINARY_CONFIG.defaultImage)
+            .resize(fill().width(300).height(300).gravity(autoGravity()))
+            .format('auto')
+            .quality('auto')} width={300} height={300} alt="Profile" />
+        )}
+        <UploadWidget
+          onUploadSuccess={handleUploadSuccess}
+          onUploadError={handleUploadError}
+          setLoading={setLoading}
+          buttonText="Edit Profile Picture"
+          onClick={handleImageUpload}
+        />
+        </div>
+        {uploadError && <p className="text-red-500 mt-2">{uploadError}</p>}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/product-reviews.tsx b/app/product-reviews.tsx
new file mode 100644
index 0000000..7544885
--- /dev/null
+++ b/app/product-reviews.tsx
@@ -0,0 +1,130 @@
+'use client'
+
+import { useState, useEffect, useCallback } from "react"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { CloudinaryVideoPlayer } from "./cloudinary-video-player"
+
+interface Review {
+  id: string
+  text: string
+  videoUrl?: string
+  date: string
+}
+
+export function ProductReviews() {
+  const [reviews, setReviews] = useState<Review[]>([])
+  const [newReview, setNewReview] = useState("")
+  const [uploadWidget, setUploadWidget] = useState<any>(null)
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && !window.cloudinary) {
+      const script = document.createElement("script")
+      script.src = "https://upload-widget.cloudinary.com/global/all.js"
+      script.async = true
+      script.onload = initializeUploadWidget
+      document.body.appendChild(script)
+
+      return () => {
+        document.body.removeChild(script)
+      }
+    } else if (window.cloudinary && !uploadWidget) {
+      initializeUploadWidget()
+    }
+  }, [])
+
+  const initializeUploadWidget = useCallback(() => {
+    if (window.cloudinary && !uploadWidget) {
+      const widget = window.cloudinary.createUploadWidget(
+        {
+          cloudName: "cld-demo-ugc",
+          uploadPreset: "ugc-video",
+          sources: ["local", "camera"],
+          resourceType: "video",
+        },
+        (error: any, result: any) => {
+          if (error) {
+            console.error("Error in upload widget:", error)
+            return
+          }
+          if (result && result.event === "success") {
+            const newReviewWithVideo = {
+              id: Date.now().toString(),
+              text: newReview,
+              videoUrl: result.info.public_id,
+              date: new Date().toLocaleDateString()
+            }
+            setReviews(prevReviews => [newReviewWithVideo, ...prevReviews])
+            setNewReview("")
+          }
+        }
+      )
+      setUploadWidget(widget)
+    }
+  }, [newReview])
+
+  const handleUploadVideo = () => {
+    if (uploadWidget) {
+      uploadWidget.open()
+    } else {
+      console.error("Upload widget is not initialized")
+    }
+  }
+
+  const handleSubmitTextReview = () => {
+    if (!newReview.trim()) return
+
+    const textOnlyReview = {
+      id: Date.now().toString(),
+      text: newReview,
+      date: new Date().toLocaleDateString()
+    }
+    setReviews(prevReviews => [textOnlyReview, ...prevReviews])
+    setNewReview("")
+  }
+
+  return (
+    <div className="mt-12 space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Write a Review</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Textarea
+            placeholder="Share your experience with this product..."
+            value={newReview}
+            onChange={(e) => setNewReview(e.target.value)}
+            className="min-h-[100px]"
+          />
+          <div className="flex gap-4">
+            <Button onClick={handleSubmitTextReview}>Submit Text Review</Button>
+            <Button variant="secondary" onClick={handleUploadVideo}>
+              Add Video Review
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="space-y-6">
+        <h2 className="text-2xl font-bold">Customer Reviews</h2>
+        {reviews.map((review) => (
+          <Card key={review.id}>
+            <CardContent className="p-6 space-y-4">
+              {review.videoUrl && (
+                <div className="aspect-video">
+                  <CloudinaryVideoPlayer publicId={review.videoUrl} />
+                </div>
+              )}
+              <p className="text-lg">{review.text}</p>
+              <div className="text-sm text-muted-foreground">
+                Posted on {review.date}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  )
+}
+
diff --git a/app/types/cloudinary.d.ts b/app/types/cloudinary.d.ts
new file mode 100644
index 0000000..0a08b67
--- /dev/null
+++ b/app/types/cloudinary.d.ts
@@ -0,0 +1,15 @@
+interface Window {
+    cloudinary: {
+      createUploadWidget: (options: any, callback: (error: any, result: any) => void) => {
+        open: () => void
+        close: () => void
+        destroy: () => void
+      }
+      videoPlayer: (element: HTMLVideoElement, options: any) => {
+        source: (publicId: string) => void
+        dispose: () => void
+      }
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..dea737b
--- /dev/null
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
new file mode 100644
index 0000000..65d4fcd
--- /dev/null
+++ b/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
new file mode 100644
index 0000000..cabfbfc
--- /dev/null
+++ b/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 0000000..e56b0af
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/lib/utils.ts b/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/package-lock.json b/package-lock.json
index 115f526..11cc588 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,12 +10,19 @@
       "dependencies": {
         "@cloudinary/react": "^1.13.0",
         "@cloudinary/url-gen": "^1.21.0",
+        "@radix-ui/react-slot": "^1.1.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.468.0",
         "next": "14.2.15",
         "react": "^18",
         "react-dom": "^18",
-        "react-loader-spinner": "^6.1.6"
+        "react-loader-spinner": "^6.1.6",
+        "tailwind-merge": "^2.5.5",
+        "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
+        "@shadcn/ui": "^0.0.4",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -30,7 +37,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -211,7 +217,6 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
       "dependencies": {
         "string-width": "^5.1.2",
         "string-width-cjs": "npm:string-width@^4.2.0",
@@ -228,7 +233,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -240,7 +244,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -255,7 +258,6 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -269,7 +271,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -278,7 +279,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -286,14 +286,12 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -452,7 +450,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -465,7 +462,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -474,7 +470,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -496,12 +491,44 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=14"
       }
     },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -514,6 +541,49 @@
       "integrity": "sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==",
       "dev": true
     },
+    "node_modules/@shadcn/ui": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@shadcn/ui/-/ui-0.0.4.tgz",
+      "integrity": "sha512-0dtu/5ApsOZ24qgaZwtif8jVwqol7a4m1x5AxPuM1k5wxhqU7t/qEfBGtaSki1R8VlbTQfCj5PAlO45NKCa7Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "5.2.0",
+        "commander": "^10.0.0",
+        "execa": "^7.0.0",
+        "fs-extra": "^11.1.0",
+        "node-fetch": "^3.3.0",
+        "ora": "^6.1.2",
+        "prompts": "^2.4.2",
+        "zod": "^3.20.2"
+      },
+      "bin": {
+        "ui": "dist/index.js"
+      }
+    },
+    "node_modules/@shadcn/ui/node_modules/chalk": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
+      "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@shadcn/ui/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -568,13 +638,13 @@
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
       "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.3.11",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz",
       "integrity": "sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -847,7 +917,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -856,7 +925,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -870,14 +938,12 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -889,8 +955,7 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -1099,14 +1164,33 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
     },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -1114,6 +1198,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bl": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-5.1.0.tgz",
+      "integrity": "sha512-tv1ZJHLfTDnXE6tMHv73YgSJaWR2AFuPwMntBe7XL/GBFHnT0CLnsHMogfk5+GzCDC5ZWarSCYaIGATZt9dNsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1128,7 +1224,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -1136,6 +1231,31 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -1179,7 +1299,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -1231,7 +1350,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -1255,7 +1373,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -1263,16 +1380,75 @@
         "node": ">= 6"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz",
+      "integrity": "sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-spinners": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
+      "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -1283,14 +1459,12 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -1305,7 +1479,6 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -1337,7 +1510,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -1356,6 +1528,16 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
@@ -1462,6 +1644,19 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clone": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -1499,14 +1694,12 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -1523,14 +1716,12 @@
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
     "node_modules/enhanced-resolve": {
       "version": "5.17.1",
@@ -2161,6 +2352,37 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/execa": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
+      "integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.1",
+        "human-signals": "^4.3.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^3.0.7",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || ^16.14.0 || >=18.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/execa/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2171,7 +2393,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -2187,7 +2408,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -2211,11 +2431,34 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -2232,7 +2475,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -2289,7 +2531,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
       "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
-      "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "signal-exit": "^4.0.1"
@@ -2301,6 +2542,34 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2311,7 +2580,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -2325,7 +2593,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2376,6 +2643,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-symbol-description": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
@@ -2409,7 +2689,6 @@
       "version": "10.3.10",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
       "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
-      "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^2.3.5",
@@ -2431,7 +2710,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -2443,7 +2721,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -2452,7 +2729,6 @@
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -2590,7 +2866,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -2598,6 +2873,37 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/human-signals": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
+      "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=14.18.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2726,7 +3032,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -2775,7 +3080,6 @@
       "version": "2.15.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
       "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.2"
       },
@@ -2820,7 +3124,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2841,7 +3144,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2865,7 +3167,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -2873,6 +3174,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-interactive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-2.0.0.tgz",
+      "integrity": "sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -2901,7 +3215,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -2973,10 +3286,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-string": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+    "node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
       "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
@@ -3018,6 +3344,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-unicode-supported": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz",
+      "integrity": "sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
@@ -3067,8 +3406,7 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
     "node_modules/iterator.prototype": {
       "version": "1.1.3",
@@ -3090,7 +3428,6 @@
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
       "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
-      "dev": true,
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
@@ -3108,7 +3445,6 @@
       "version": "1.21.6",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
       "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
-      "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -3160,6 +3496,19 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -3184,6 +3533,16 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.23",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
@@ -3219,7 +3578,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -3227,8 +3585,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -3261,6 +3618,36 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/log-symbols": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz",
+      "integrity": "sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^5.0.0",
+        "is-unicode-supported": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-symbols/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3275,14 +3662,28 @@
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
+    },
+    "node_modules/lucide-react": {
+      "version": "0.468.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.468.0.tgz",
+      "integrity": "sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -3291,7 +3692,6 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -3300,6 +3700,19 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3325,7 +3738,6 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -3340,7 +3752,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -3446,20 +3857,86 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "github",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.5.0"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/npm-run-path": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-path/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3468,7 +3945,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -3600,6 +4076,22 @@
         "wrappy": "1"
       }
     },
+    "node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3617,6 +4109,72 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/ora": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-6.3.1.tgz",
+      "integrity": "sha512-ERAyNnZOfqM+Ao3RAvIXkYh5joP220yf59gVe2X/cI6SiCxIdi4c9HZKZD8R6q/RDXEje1THBju6iExiSsgJaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^5.0.0",
+        "cli-cursor": "^4.0.0",
+        "cli-spinners": "^2.6.1",
+        "is-interactive": "^2.0.0",
+        "is-unicode-supported": "^1.1.0",
+        "log-symbols": "^5.1.0",
+        "stdin-discarder": "^0.1.0",
+        "strip-ansi": "^7.0.1",
+        "wcwidth": "^1.0.1"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ora/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ora/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/ora/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -3681,7 +4239,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3689,14 +4246,12 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
       "dependencies": {
         "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
@@ -3717,7 +4272,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -3729,7 +4283,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3738,7 +4291,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -3756,7 +4308,6 @@
       "version": "8.4.47",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
       "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3784,7 +4335,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -3801,7 +4351,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -3820,7 +4369,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3855,7 +4403,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
       "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -3867,7 +4414,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
       "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3892,7 +4438,6 @@
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -3915,6 +4460,20 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -3939,7 +4498,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4009,16 +4567,29 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -4069,7 +4640,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -4100,11 +4670,60 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/restore-cursor": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-4.0.0.tgz",
+      "integrity": "sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/restore-cursor/node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/restore-cursor/node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/restore-cursor/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -4151,7 +4770,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4188,6 +4806,27 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/safe-regex-test": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
@@ -4266,7 +4905,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -4278,7 +4916,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4305,7 +4942,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -4313,6 +4949,13 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -4321,6 +4964,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stdin-discarder": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.1.0.tgz",
+      "integrity": "sha512-xhV7w8S+bUwlPTb4bAOUQhv8/cSS5offJuX8GQGq32ONF0ZtDWKfkdomM3HMRA+LhX6um/FZ0COqlwsjD53LeQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^5.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
@@ -4341,11 +5000,20 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
       "dependencies": {
         "eastasianwidth": "^0.2.0",
         "emoji-regex": "^9.2.2",
@@ -4363,7 +5031,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -4376,14 +5043,12 @@
     "node_modules/string-width-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/string-width/node_modules/ansi-regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -4395,7 +5060,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -4509,7 +5173,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -4522,7 +5185,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -4539,6 +5201,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -4641,7 +5316,6 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -4675,7 +5349,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -4683,11 +5356,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz",
+      "integrity": "sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.14",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
       "integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==",
-      "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -4720,6 +5402,15 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -4739,7 +5430,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -4748,7 +5438,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -4760,7 +5449,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -4783,8 +5471,7 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -4934,6 +5621,16 @@
       "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
       "dev": true
     },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -4946,14 +5643,32 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
     },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -5056,7 +5771,6 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^6.1.0",
         "string-width": "^5.0.1",
@@ -5074,7 +5788,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -5090,14 +5803,12 @@
     "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/wrap-ansi-cjs/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -5111,7 +5822,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -5123,7 +5833,6 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -5135,7 +5844,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -5156,7 +5864,6 @@
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
       "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
-      "dev": true,
       "bin": {
         "yaml": "bin.mjs"
       },
@@ -5175,6 +5882,16 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 4f89f6b..6b38f5d 100644
--- a/package.json
+++ b/package.json
@@ -11,12 +11,19 @@
   "dependencies": {
     "@cloudinary/react": "^1.13.0",
     "@cloudinary/url-gen": "^1.21.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.468.0",
     "next": "14.2.15",
     "react": "^18",
     "react-dom": "^18",
-    "react-loader-spinner": "^6.1.6"
+    "react-loader-spinner": "^6.1.6",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@shadcn/ui": "^0.0.4",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d43da91..ebc9f38 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,19 +1,63 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
-  content: [
+    darkMode: ["class"],
+    content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
+  	extend: {
+  		colors: {
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		}
+  	}
   },
-  plugins: [],
+  plugins: [require("tailwindcss-animate")],
 };
 export default config;

From e91ccd4ec406036b0b4c5732ec9b4ef47b062249 Mon Sep 17 00:00:00 2001
From: carlevison <caroline.levison@cloudinary.com>
Date: Tue, 10 Dec 2024 11:52:25 +0000
Subject: [PATCH 2/8] Video Player updates

---
 app/api/moderate/route.ts       | 17 ++++++-----------
 app/cloudinary-video-player.tsx | 21 +++++++++++++++++----
 app/product-reviews.tsx         |  2 +-
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/app/api/moderate/route.ts b/app/api/moderate/route.ts
index a3f7119..2847b06 100644
--- a/app/api/moderate/route.ts
+++ b/app/api/moderate/route.ts
@@ -9,6 +9,8 @@ const moderationResults = new Map<string, { status: string, message: string }>()
 export async function POST(request: Request) {
 
   const data = await request.json()
+
+  console.log("data: ", data )
   
   // Check if this is a webhook from Cloudinary
   if (data.notification_type === 'moderation' || data.notification_type === 'moderation_summary') {
@@ -20,14 +22,14 @@ export async function POST(request: Request) {
     // Check the moderation status
     if (moderation_status === 'rejected') {
       status = 'rejected'
-      if (moderation_kind === 'aws_rek') {
-        message = 'Your image was rejected due to unsuitable content'
+      if (moderation_kind === 'aws_rek_video') {
+        message = 'Your video was rejected due to unsuitable content'
       } else if (moderation_kind === 'perception_point') {
-        message = 'Your image was rejected due to potential malware'
+        message = 'Your video was rejected due to potential malware'
       }
     } else if (moderation_status === 'approved') {
       status = 'approved'
-      message = 'Image approved'
+      message = 'Video approved'
     }
 
     // Store the result
@@ -51,15 +53,8 @@ export async function POST(request: Request) {
 
   if (moderationResult.status === 'approved') {
 
-    let poorQuality = false
-
-    if (data.tags && data.tags.includes('poor_quality')) {
-      poorQuality = true
-    }
- 
     return NextResponse.json({ 
       status: 'approved',
-      poorQuality: poorQuality, 
       publicId: public_id
     })
   } else {
diff --git a/app/cloudinary-video-player.tsx b/app/cloudinary-video-player.tsx
index f13fb01..8b52555 100644
--- a/app/cloudinary-video-player.tsx
+++ b/app/cloudinary-video-player.tsx
@@ -18,7 +18,7 @@ export function CloudinaryVideoPlayer({ publicId }: CloudinaryVideoPlayerProps)
       
       script.onload = () => {
         const videoPlayerScript = document.createElement("script")
-        videoPlayerScript.src = "https://unpkg.com/cloudinary-video-player@1.9.9/dist/cld-video-player.min.js"
+        videoPlayerScript.src = "https://unpkg.com/cloudinary-video-player@2.2.0/dist/cld-video-player.min.js"
         videoPlayerScript.async = true
         videoPlayerScript.onload = () => setIsScriptLoaded(true)
         videoPlayerScript.onerror = (error) => console.error("Error loading Cloudinary Video Player script:", error)
@@ -29,13 +29,13 @@ export function CloudinaryVideoPlayer({ publicId }: CloudinaryVideoPlayerProps)
       document.head.appendChild(script)
 
       const link = document.createElement("link")
-      link.href = "https://unpkg.com/cloudinary-video-player@1.9.9/dist/cld-video-player.min.css"
+      link.href = "https://unpkg.com/cloudinary-video-player@2.2.0/dist/cld-video-player.min.css"
       link.rel = "stylesheet"
       document.head.appendChild(link)
 
       return () => {
         document.head.removeChild(script)
-        const videoPlayerScript = document.querySelector('script[src="https://unpkg.com/cloudinary-video-player@1.9.9/dist/cld-video-player.min.js"]')
+        const videoPlayerScript = document.querySelector('script[src="https://unpkg.com/cloudinary-video-player@2.2.0/dist/cld-video-player.min.js"]')
         if (videoPlayerScript) {
           document.head.removeChild(videoPlayerScript)
         }
@@ -51,8 +51,21 @@ export function CloudinaryVideoPlayer({ publicId }: CloudinaryVideoPlayerProps)
       const player = window.cloudinary.videoPlayer(videoRef.current, {
         cloud_name: "cld-demo-ugc",
         controls: true,
+        chaptersButton: true
       })
-      player.source(publicId)
+      player.source({publicId,         
+        textTracks: {
+            subtitles: [{
+                default: true,
+                label: 'English',
+                language: 'en',
+                maxWords: 5,
+                wordHighlight: false
+            }
+        ]
+        },
+        chapters: true
+     })
 
       return () => {
         player.dispose()
diff --git a/app/product-reviews.tsx b/app/product-reviews.tsx
index 7544885..07d1d44 100644
--- a/app/product-reviews.tsx
+++ b/app/product-reviews.tsx
@@ -40,7 +40,7 @@ export function ProductReviews() {
         {
           cloudName: "cld-demo-ugc",
           uploadPreset: "ugc-video",
-          sources: ["local", "camera"],
+          sources: ["local"],
           resourceType: "video",
         },
         (error: any, result: any) => {

From 0437fff3887cd8bca1102e690ef7153ac496cfa4 Mon Sep 17 00:00:00 2001
From: carlevison <caroline.levison@cloudinary.com>
Date: Tue, 10 Dec 2024 20:48:37 +0000
Subject: [PATCH 3/8] More updates

---
 app/api/moderate/route.ts       | 122 ++++++++++++++++++++------------
 app/cloudinary-video-player.tsx |  46 ++++++------
 app/page.tsx                    |  38 ++++++----
 app/product-reviews.tsx         | 105 ++++++++++++++++++++++++---
 app/types/cloudinary.d.ts       |   2 +-
 components/ui/alert.tsx         |  59 +++++++++++++++
 6 files changed, 282 insertions(+), 90 deletions(-)
 create mode 100644 components/ui/alert.tsx

diff --git a/app/api/moderate/route.ts b/app/api/moderate/route.ts
index 2847b06..c057f0c 100644
--- a/app/api/moderate/route.ts
+++ b/app/api/moderate/route.ts
@@ -1,66 +1,96 @@
 import { NextResponse } from 'next/server'
 
-// This map will store the moderation results temporarily
-const moderationResults = new Map<string, { status: string, message: string }>()
+// This map will store the processing results temporarily
+const processingResults = new Map<string, {
+  moderation: { status: string, message: string },
+  autoChaptering: { status: string, message: string },
+  autoTranscription: { status: string, message: string },
+  eagerTransformation: { status: string, message: string }
+}>()
 
-// This endpoint is used to catch the webhook sent from Cloudinary when the moderation 
-// is complete.  It is also used by the frontend to find out the moderation result for
-// a particular uploaded asset.
 export async function POST(request: Request) {
-
   const data = await request.json()
+  console.log("Received webhook data:", data)
+
+  const { asset_id, public_id, notification_type } = data
+
+  if (!processingResults.has(asset_id)) {
+    processingResults.set(asset_id, {
+      moderation: { status: 'pending', message: '' },
+      autoChaptering: { status: 'pending', message: '' },
+      autoTranscription: { status: 'pending', message: '' },
+      eagerTransformation: { status: 'pending', message: '' }
+    })
+  }
 
-  console.log("data: ", data )
-  
-  // Check if this is a webhook from Cloudinary
-  if (data.notification_type === 'moderation' || data.notification_type === 'moderation_summary') {
-    const { moderation_status, moderation_kind, asset_id } = data
+  const result = processingResults.get(asset_id)!
+
+  if (notification_type === 'moderation' || notification_type === 'moderation_summary') {
+    const { moderation_status, moderation_kind } = data
 
-    let status = 'pending'
-    let message = ''
-    
-    // Check the moderation status
     if (moderation_status === 'rejected') {
-      status = 'rejected'
-      if (moderation_kind === 'aws_rek_video') {
-        message = 'Your video was rejected due to unsuitable content'
-      } else if (moderation_kind === 'perception_point') {
-        message = 'Your video was rejected due to potential malware'
+      result.moderation = { 
+        status: 'rejected', 
+        message: moderation_kind === 'aws_rek_video' 
+          ? 'Your video was rejected due to unsuitable content'
+          : 'Your video was rejected due to potential malware'
       }
     } else if (moderation_status === 'approved') {
-      status = 'approved'
-      message = 'Video approved'
+      result.moderation = { status: 'approved', message: 'Video approved' }
     }
+  } else if (notification_type === 'info') {
+    const { info_kind, info_status } = data
 
-    // Store the result
-    moderationResults.set(asset_id, { status, message })
-
-    return NextResponse.json({ success: true })
+    if (info_kind === 'auto_chaptering') {
+      result.autoChaptering = { 
+        status: info_status, 
+        message: info_status === 'failed' ? data.info_data : 'Chaptering completed'
+      }
+    } else if (info_kind === 'auto_transcription') {
+      result.autoTranscription = { 
+        status: info_status, 
+        message: info_status === 'failed' ? data.info_data : 'Transcription completed'
+      }
+    }
+  } else if (notification_type === 'eager') {
+    result.eagerTransformation = { status: 'complete', message: 'Eager transformation completed' }
   }
 
-  // If it's not a webhook, it's a request from our frontend
-  const { public_id, asset_id } = data
+  processingResults.set(asset_id, result)
 
-  // Check if we have a moderation result for this asset
-  const moderationResult = moderationResults.get(asset_id)
+  // If it's a request from our frontend
+  if (data.checkStatus) {
+    const processingResult = processingResults.get(asset_id)
 
-  if (!moderationResult) {
-    return NextResponse.json({ status: 'pending', message: 'Moderation in progress' })
-  }
+    if (!processingResult) {
+      return NextResponse.json({ status: 'pending', message: 'Processing in progress' })
+    }
 
-  // Clear the result from our temporary storage
-  moderationResults.delete(asset_id)
+    const { moderation, autoChaptering, autoTranscription, eagerTransformation } = processingResult
 
-  if (moderationResult.status === 'approved') {
+    if (moderation.status === 'rejected') {
+      return NextResponse.json({ status: 'rejected', message: moderation.message })
+    }
 
-    return NextResponse.json({ 
-      status: 'approved',
-      publicId: public_id
-    })
-  } else {
-    return NextResponse.json({ 
-      status: 'rejected', 
-      message: moderationResult.message
-    })
+    if (moderation.status === 'approved' && 
+        (autoChaptering.status === 'complete' || autoChaptering.status === 'failed') &&
+        (autoTranscription.status === 'complete' || autoTranscription.status === 'failed') &&
+        eagerTransformation.status === 'complete') {
+      // Clear the result from our temporary storage
+      processingResults.delete(asset_id)
+
+      return NextResponse.json({ 
+        status: 'approved',
+        publicId: public_id,
+        autoChaptering: autoChaptering.status === 'complete',
+        autoTranscription: autoTranscription.status === 'complete',
+        eagerTransformationComplete: true
+      })
+    }
+
+    return NextResponse.json({ status: 'pending', message: 'Processing in progress' })
   }
-}
\ No newline at end of file
+
+  return NextResponse.json({ success: true })
+}
+
diff --git a/app/cloudinary-video-player.tsx b/app/cloudinary-video-player.tsx
index 8b52555..18ab323 100644
--- a/app/cloudinary-video-player.tsx
+++ b/app/cloudinary-video-player.tsx
@@ -12,21 +12,21 @@ export function CloudinaryVideoPlayer({ publicId }: CloudinaryVideoPlayerProps)
 
   useEffect(() => {
     if (!window.cloudinary || !window.cloudinary.videoPlayer) {
-      const script = document.createElement("script")
-      script.src = "https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js"
-      script.async = true
+      const coreScript = document.createElement("script")
+      coreScript.src = "https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js"
+      coreScript.async = true
       
-      script.onload = () => {
+      coreScript.onload = () => {
         const videoPlayerScript = document.createElement("script")
         videoPlayerScript.src = "https://unpkg.com/cloudinary-video-player@2.2.0/dist/cld-video-player.min.js"
         videoPlayerScript.async = true
         videoPlayerScript.onload = () => setIsScriptLoaded(true)
-        videoPlayerScript.onerror = (error) => console.error("Error loading Cloudinary Video Player script:", error)
+        videoPlayerScript.onerror = (error) => console.error("Error loading Cloudinary Video Player 2.2.0 script:", error)
         document.head.appendChild(videoPlayerScript)
       }
       
-      script.onerror = (error) => console.error("Error loading Cloudinary Core script:", error)
-      document.head.appendChild(script)
+      coreScript.onerror = (error) => console.error("Error loading Cloudinary Core script:", error)
+      document.head.appendChild(coreScript)
 
       const link = document.createElement("link")
       link.href = "https://unpkg.com/cloudinary-video-player@2.2.0/dist/cld-video-player.min.css"
@@ -34,7 +34,7 @@ export function CloudinaryVideoPlayer({ publicId }: CloudinaryVideoPlayerProps)
       document.head.appendChild(link)
 
       return () => {
-        document.head.removeChild(script)
+        document.head.removeChild(coreScript)
         const videoPlayerScript = document.querySelector('script[src="https://unpkg.com/cloudinary-video-player@2.2.0/dist/cld-video-player.min.js"]')
         if (videoPlayerScript) {
           document.head.removeChild(videoPlayerScript)
@@ -51,21 +51,27 @@ export function CloudinaryVideoPlayer({ publicId }: CloudinaryVideoPlayerProps)
       const player = window.cloudinary.videoPlayer(videoRef.current, {
         cloud_name: "cld-demo-ugc",
         controls: true,
-        chaptersButton: true
+        chaptersButton: true,
+        width: 600,
+        posterOptions: {aspect_ratio: "16:9", crop: "fill", gravity: "auto", width: 600}
       })
-      player.source({publicId,         
+
+      player.source({
+        publicId,
+        transformation: [{aspect_ratio: "16:9", crop: "fill", gravity: "auto", width: 600}],
         textTracks: {
-            subtitles: [{
-                default: true,
-                label: 'English',
-                language: 'en',
-                maxWords: 5,
-                wordHighlight: false
-            }
-        ]
+          subtitles: [{
+            default: true,
+            label: 'English',
+            language: 'en',
+            maxWords: 5,
+            wordHighlight: false
+          }]
         },
         chapters: true
-     })
+      })
+
+      
 
       return () => {
         player.dispose()
@@ -76,7 +82,7 @@ export function CloudinaryVideoPlayer({ publicId }: CloudinaryVideoPlayerProps)
   return (
     <video 
       ref={videoRef}
-      className="cld-video-player w-full"
+      className="cld-video-player"
       controls
     />
   )
diff --git a/app/page.tsx b/app/page.tsx
index b7e4a6c..f6c57a6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,24 +1,38 @@
-import Image from "next/image"
 import { Card, CardContent } from "@/components/ui/card"
 import { ProductReviews } from "./product-reviews"
+import {Cloudinary, CloudinaryImage} from "@cloudinary/url-gen";
+import { fill } from '@cloudinary/url-gen/actions/resize'
+import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity"
+import { byRadius } from "@cloudinary/url-gen/actions/roundCorners"
 
 export default function ProductPage() {
+
+    const cld = new Cloudinary({
+        cloud: {
+          cloudName: 'demo'
+        }
+      });
+
+    const myImage = cld.image('docs/bluetooth_dongle').
+    resize(fill().width(450).height(450).gravity(autoGravity())).
+      roundCorners(byRadius(5)).format('auto').quality('auto')
+    let imgUrl = myImage.toURL()
+    console.log("imgeUrl: ", imgUrl)
+
   return (
+
     <div className="container mx-auto py-8">
-      <div className="grid gap-6 lg:grid-cols-2">
-        <Card>
-          <CardContent className="p-6">
-            <div className="aspect-square relative overflow-hidden rounded-lg">
-              <Image
-                src="https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/docs/bluetooth_dongle.jpg"
-                alt="Bluetooth Dongle"
-                fill
-                className="object-cover"
-                priority
-              />
+      <div className="grid gap-6 lg:grid-cols-2 h-500">
+      <Card className="flex items-center justify-center">
+          <CardContent className="p-5">
+            <div className="flex items-center justify-center w-full h-full">
+              <div className="aspect-square relative overflow-hidden rounded-lg">
+                <img src={imgUrl} width={450} height={450} alt="Bluetooth Dongle" className="object-contain w-full h-full"></img>
+              </div>
             </div>
           </CardContent>
         </Card>
+        
         <div className="space-y-4">
           <h1 className="text-3xl font-bold">Bluetooth 5.0 USB Adapter</h1>
           <p className="text-lg text-muted-foreground">
diff --git a/app/product-reviews.tsx b/app/product-reviews.tsx
index 07d1d44..b8bee72 100644
--- a/app/product-reviews.tsx
+++ b/app/product-reviews.tsx
@@ -4,6 +4,8 @@ import { useState, useEffect, useCallback } from "react"
 import { Button } from "@/components/ui/button"
 import { Textarea } from "@/components/ui/textarea"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { AlertCircle } from 'lucide-react'
 import { CloudinaryVideoPlayer } from "./cloudinary-video-player"
 
 interface Review {
@@ -11,29 +13,41 @@ interface Review {
   text: string
   videoUrl?: string
   date: string
+  status: 'processing' | 'approved' | 'rejected'
+  rejectionReason?: string
+  eagerTransformationComplete?: boolean
 }
 
 export function ProductReviews() {
   const [reviews, setReviews] = useState<Review[]>([])
   const [newReview, setNewReview] = useState("")
   const [uploadWidget, setUploadWidget] = useState<any>(null)
+  const [isCloudinaryLoaded, setIsCloudinaryLoaded] = useState(false)
 
   useEffect(() => {
     if (typeof window !== 'undefined' && !window.cloudinary) {
       const script = document.createElement("script")
       script.src = "https://upload-widget.cloudinary.com/global/all.js"
       script.async = true
-      script.onload = initializeUploadWidget
+      script.onload = () => {
+        setIsCloudinaryLoaded(true)
+      }
       document.body.appendChild(script)
 
       return () => {
         document.body.removeChild(script)
       }
-    } else if (window.cloudinary && !uploadWidget) {
-      initializeUploadWidget()
+    } else if (window.cloudinary) {
+      setIsCloudinaryLoaded(true)
     }
   }, [])
 
+  useEffect(() => {
+    if (isCloudinaryLoaded && !uploadWidget) {
+      initializeUploadWidget()
+    }
+  }, [isCloudinaryLoaded])
+
   const initializeUploadWidget = useCallback(() => {
     if (window.cloudinary && !uploadWidget) {
       const widget = window.cloudinary.createUploadWidget(
@@ -49,14 +63,16 @@ export function ProductReviews() {
             return
           }
           if (result && result.event === "success") {
-            const newReviewWithVideo = {
-              id: Date.now().toString(),
+            const newReviewWithVideo: Review = {
+              id: result.info.asset_id,
               text: newReview,
               videoUrl: result.info.public_id,
-              date: new Date().toLocaleDateString()
+              date: new Date().toLocaleDateString(),
+              status: 'processing'
             }
             setReviews(prevReviews => [newReviewWithVideo, ...prevReviews])
             setNewReview("")
+            checkVideoStatus(result.info.asset_id, result.info.public_id)
           }
         }
       )
@@ -64,6 +80,56 @@ export function ProductReviews() {
     }
   }, [newReview])
 
+  const checkVideoStatus = useCallback(async (assetId: string, publicId: string) => {
+    const startTime = Date.now()
+    const timeoutDuration = 360000 // 6 minutes in milliseconds
+
+    const checkStatus = async () => {
+      try {
+        const response = await fetch('/api/moderate', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ checkStatus: true, asset_id: assetId, public_id: publicId })
+        })
+        const data = await response.json()
+
+        if (data.status === 'approved') {
+          setReviews(prevReviews => 
+            prevReviews.map(review => 
+              review.id === assetId 
+                ? { ...review, status: 'approved', eagerTransformationComplete: data.eagerTransformationComplete }
+                : review
+            )
+          )
+        } else if (data.status === 'rejected') {
+          setReviews(prevReviews => 
+            prevReviews.map(review => 
+              review.id === assetId 
+                ? { ...review, status: 'rejected', rejectionReason: data.message }
+                : review
+            )
+          )
+        } else if (Date.now() - startTime < timeoutDuration) {
+          // If still processing and within timeout, check again after 5 seconds
+          setTimeout(() => checkStatus(), 5000)
+        } else {
+          // Timeout reached
+          setReviews(prevReviews => 
+            prevReviews.map(review => 
+              review.id === assetId 
+                ? { ...review, status: 'rejected', rejectionReason: 'Processing timeout reached' }
+                : review
+            )
+          )
+        }
+      } catch (error) {
+        console.error("Error checking video status:", error)
+      }
+    }
+
+    checkStatus()
+  }, [])
+
   const handleUploadVideo = () => {
     if (uploadWidget) {
       uploadWidget.open()
@@ -75,10 +141,11 @@ export function ProductReviews() {
   const handleSubmitTextReview = () => {
     if (!newReview.trim()) return
 
-    const textOnlyReview = {
+    const textOnlyReview: Review = {
       id: Date.now().toString(),
       text: newReview,
-      date: new Date().toLocaleDateString()
+      date: new Date().toLocaleDateString(),
+      status: 'approved'
     }
     setReviews(prevReviews => [textOnlyReview, ...prevReviews])
     setNewReview("")
@@ -99,7 +166,7 @@ export function ProductReviews() {
           />
           <div className="flex gap-4">
             <Button onClick={handleSubmitTextReview}>Submit Text Review</Button>
-            <Button variant="secondary" onClick={handleUploadVideo}>
+            <Button variant="secondary" onClick={handleUploadVideo} disabled={!isCloudinaryLoaded}>
               Add Video Review
             </Button>
           </div>
@@ -112,8 +179,24 @@ export function ProductReviews() {
           <Card key={review.id}>
             <CardContent className="p-6 space-y-4">
               {review.videoUrl && (
-                <div className="aspect-video">
-                  <CloudinaryVideoPlayer publicId={review.videoUrl} />
+                <div>
+                {review.status === 'processing' ? (
+                    <div className="flex items-center justify-center h-full bg-gray-200">
+                    <p>Processing video...</p>
+                    </div>
+                ) : review.status === 'approved' ? (
+                    <CloudinaryVideoPlayer 
+                    publicId={review.videoUrl} 
+                    />
+                ) : (
+                    <Alert variant="destructive">
+                    <AlertCircle className="h-4 w-4" />
+                    <AlertTitle>Video Rejected</AlertTitle>
+                    <AlertDescription>
+                        {review.rejectionReason || "The video was rejected during moderation."}
+                    </AlertDescription>
+                    </Alert>
+                )}
                 </div>
               )}
               <p className="text-lg">{review.text}</p>
diff --git a/app/types/cloudinary.d.ts b/app/types/cloudinary.d.ts
index 0a08b67..a424333 100644
--- a/app/types/cloudinary.d.ts
+++ b/app/types/cloudinary.d.ts
@@ -6,7 +6,7 @@ interface Window {
         destroy: () => void
       }
       videoPlayer: (element: HTMLVideoElement, options: any) => {
-        source: (publicId: string) => void
+        source: (publicId: string, options?: any) => void
         dispose: () => void
       }
     }
diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx
new file mode 100644
index 0000000..5afd41d
--- /dev/null
+++ b/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

From bcf848578a8e5bed53b3eee78870d49736d193e0 Mon Sep 17 00:00:00 2001
From: carlevison <caroline.levison@cloudinary.com>
Date: Wed, 11 Dec 2024 08:32:50 +0000
Subject: [PATCH 4/8] Update readme and config

---
 README.md                       | 21 ++++-----------------
 app/cloudinary-video-player.tsx |  3 ++-
 app/config/cloudinary.ts        |  3 +--
 app/product-reviews.tsx         |  5 +++--
 4 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index 75c651c..d613b54 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1,12 @@
-# UGC Sample App for Profile Pictures and Posts
+# UGC Sample App for Video Reviews
 
-This is a social media-style application that handles user-generated content (UGC) using Cloudinary's advanced capabilities. The app features a Profile page where users can manage their personal information and upload a profile picture, along with a Posts page where they can share thoughts and images.
+This is a mockup of a product page that handles user-generated content (UGC) using Cloudinary's advanced capabilities. People can upload a video review of the product, which is moderated for inappropriate content and malware, as well as being processed for video chapters and transcription for captions.  The video is displayed at 16:9 aspect ratio with automatic gravity and captions displayed. 
 
 It's a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app), built on Next.js 14 and the Next.js App Router.
 
 ## Overview
 
-The app serves as a demonstration platform for handling user-generated content in a social media context. It implements these main features:
-
-On the Profile page:
-
-* The uploaded image is moderated for appropriate content and checked for malware before being displayed on the page.
-* If the image is poor quality, then the quality is improved.
-* The image is displayed as a square, focusing on the face, if there is one, or the most interesting part of the image, if not.
-
-On the Posts page:
-
-* The post is displayed against the profile picture, which is resized and made circular with an outline.
-* The uploaded image, if there is one, is moderated for appropriate content and checked for malware before being displayed on the page.
-* The post image is displayed with padding, if required, to show the whole image in a dedicated space.
+The app serves as a demonstration platform for handling user-generated content in a product review context. 
 
 ## Run the app
 
@@ -27,9 +15,8 @@ To run the app yourself:
 1. Clone or fork this GitHub repo.
 1. In **app/config/cloudinary.ts**, replace **MY_CLOUD_NAME** with your Cloudinary product environment cloud name. You can find your **Cloud name** near the top of the Programmable Media [Dashboard](https://console.cloudinary.com/pm/developer-dashboard) of the Cloudinary Console. [Sign up for free](https://cloudinary.com/users/register_free) if you don't yet have a Cloudinary account.
 1. To try out your app locally, you need to set up a secure tunnel connecting the internet to your locally-running application so that the webhooks sent by Cloudinary on upload are caught and handled by the app. You can use a tool such as [Ngrok](https://ngrok.com/) to do this. Otherwise, you need to deploy the app using a service such as [Vercel](https://vercel.com/). Whichever method you choose, make a note of your app's domain (for example, `a-b-c-d.ngrok-free.app` or `a-b-c-d.vercel.app`). By default, the app runs on port 3000.
-1. Create an upload preset called **ugc-profile-photo**. (You can use a different name, but if you do, you also need update the `uploadPreset` value in **cloudinary.ts**.) See instructions on how to [configure your upload preset](https://cloudinary.com/documentation/profile_picture_sample_project#upload_preset_configuration).
+1. Create an upload preset called **ugc-video**. (You can use a different name, but if you do, you also need update the `uploadPreset` value in **cloudinary.ts**.) See instructions on how to [configure your upload preset](https://cloudinary.com/documentation/profile_picture_sample_project#upload_preset_configuration).
 1. Ensure that the **Notification URL** in your upload preset is set to:<br>`https://<your app's domain>/api/moderate`
-1. Upload an image to use as the default image (for example <a href="https://res.cloudinary.com/cld-demo-ugc/image/upload/v1729679379/avatar-pic.jpg" target=_blank>this image</a>), and set its public ID to `avatar-pic`. Alternatively, use an image that's already in your product environment, and change the value of `defaultImage` in **cloudinary.ts** to its public ID. 
 1. If running locally, run the development server:
    
       ```terminal
diff --git a/app/cloudinary-video-player.tsx b/app/cloudinary-video-player.tsx
index 18ab323..df7ec82 100644
--- a/app/cloudinary-video-player.tsx
+++ b/app/cloudinary-video-player.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useRef, useState } from "react"
+import { CLOUDINARY_CONFIG } from './config/cloudinary'
 
 interface CloudinaryVideoPlayerProps {
   publicId: string
@@ -49,7 +50,7 @@ export function CloudinaryVideoPlayer({ publicId }: CloudinaryVideoPlayerProps)
   useEffect(() => {
     if (isScriptLoaded && videoRef.current && window.cloudinary && window.cloudinary.videoPlayer) {
       const player = window.cloudinary.videoPlayer(videoRef.current, {
-        cloud_name: "cld-demo-ugc",
+        cloud_name: CLOUDINARY_CONFIG.cloudName,
         controls: true,
         chaptersButton: true,
         width: 600,
diff --git a/app/config/cloudinary.ts b/app/config/cloudinary.ts
index eff7a77..7930df4 100644
--- a/app/config/cloudinary.ts
+++ b/app/config/cloudinary.ts
@@ -1,5 +1,4 @@
 export const CLOUDINARY_CONFIG = {
     cloudName: 'cld-demo-ugc',
-    uploadPreset: 'ugc-profile-photo-local',
-    defaultImage: 'avatar-pic'
+    uploadPreset: 'ugc-video'
   } as const
\ No newline at end of file
diff --git a/app/product-reviews.tsx b/app/product-reviews.tsx
index b8bee72..6e2a52d 100644
--- a/app/product-reviews.tsx
+++ b/app/product-reviews.tsx
@@ -7,6 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { AlertCircle } from 'lucide-react'
 import { CloudinaryVideoPlayer } from "./cloudinary-video-player"
+import { CLOUDINARY_CONFIG } from "./config/cloudinary"
 
 interface Review {
   id: string
@@ -52,8 +53,8 @@ export function ProductReviews() {
     if (window.cloudinary && !uploadWidget) {
       const widget = window.cloudinary.createUploadWidget(
         {
-          cloudName: "cld-demo-ugc",
-          uploadPreset: "ugc-video",
+          cloudName: CLOUDINARY_CONFIG.cloudName,
+          uploadPreset: CLOUDINARY_CONFIG.uploadPreset,
           sources: ["local"],
           resourceType: "video",
         },

From 924ee9494fc82c9f65cf31c425d281a5e589921a Mon Sep 17 00:00:00 2001
From: carlevison <caroline.levison@cloudinary.com>
Date: Thu, 12 Dec 2024 16:09:09 +0000
Subject: [PATCH 5/8] Add language support

---
 app/cloudinary-video-player.tsx | 25 ++++++++++++++++++++-----
 app/config/cloudinary.ts        |  2 +-
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/cloudinary-video-player.tsx b/app/cloudinary-video-player.tsx
index df7ec82..767aadf 100644
--- a/app/cloudinary-video-player.tsx
+++ b/app/cloudinary-video-player.tsx
@@ -61,13 +61,28 @@ export function CloudinaryVideoPlayer({ publicId }: CloudinaryVideoPlayerProps)
         publicId,
         transformation: [{aspect_ratio: "16:9", crop: "fill", gravity: "auto", width: 600}],
         textTracks: {
-          subtitles: [{
+          captions: {
+            label: 'English(captions)',
             default: true,
-            label: 'English',
-            language: 'en',
             maxWords: 5,
-            wordHighlight: false
-          }]
+          },
+          subtitles: [
+            {
+              label: 'French',
+              language: 'fr-FR',
+              maxWords: 5,
+            },
+            {
+              label: 'Spanish',
+              language: 'es-ES',
+              maxWords: 5,
+            },
+            {
+              label: 'German',
+              language: 'de-DE',
+              maxWords: 5,
+            }
+          ]
         },
         chapters: true
       })
diff --git a/app/config/cloudinary.ts b/app/config/cloudinary.ts
index 7930df4..febe227 100644
--- a/app/config/cloudinary.ts
+++ b/app/config/cloudinary.ts
@@ -1,4 +1,4 @@
 export const CLOUDINARY_CONFIG = {
     cloudName: 'cld-demo-ugc',
-    uploadPreset: 'ugc-video'
+    uploadPreset: 'ugc-video-langs'
   } as const
\ No newline at end of file

From c4dbe0c63862f9f45c29f885253ee7e0093c9d17 Mon Sep 17 00:00:00 2001
From: carlevison <caroline.levison@cloudinary.com>
Date: Thu, 12 Dec 2024 16:59:34 +0000
Subject: [PATCH 6/8] Tidy up and restructure

---
 README.md                                     |   4 +-
 app/components/cld.ts                         |  11 --
 .../cloudinary-video-player.tsx               |   2 +-
 app/{ => components}/product-reviews.tsx      |   2 +-
 app/components/upload-widget.tsx              | 107 -------------
 app/context/UserContext.tsx                   |  64 --------
 app/layout.tsx                                |   7 +-
 app/page.tsx                                  |  23 ++-
 app/page_profile.tsx                          | 142 ------------------
 app/posts/page.tsx                            | 138 -----------------
 10 files changed, 17 insertions(+), 483 deletions(-)
 delete mode 100644 app/components/cld.ts
 rename app/{ => components}/cloudinary-video-player.tsx (98%)
 rename app/{ => components}/product-reviews.tsx (99%)
 delete mode 100644 app/components/upload-widget.tsx
 delete mode 100644 app/context/UserContext.tsx
 delete mode 100644 app/page_profile.tsx
 delete mode 100644 app/posts/page.tsx

diff --git a/README.md b/README.md
index d613b54..65e5d04 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ To run the app yourself:
 1. Clone or fork this GitHub repo.
 1. In **app/config/cloudinary.ts**, replace **MY_CLOUD_NAME** with your Cloudinary product environment cloud name. You can find your **Cloud name** near the top of the Programmable Media [Dashboard](https://console.cloudinary.com/pm/developer-dashboard) of the Cloudinary Console. [Sign up for free](https://cloudinary.com/users/register_free) if you don't yet have a Cloudinary account.
 1. To try out your app locally, you need to set up a secure tunnel connecting the internet to your locally-running application so that the webhooks sent by Cloudinary on upload are caught and handled by the app. You can use a tool such as [Ngrok](https://ngrok.com/) to do this. Otherwise, you need to deploy the app using a service such as [Vercel](https://vercel.com/). Whichever method you choose, make a note of your app's domain (for example, `a-b-c-d.ngrok-free.app` or `a-b-c-d.vercel.app`). By default, the app runs on port 3000.
-1. Create an upload preset called **ugc-video**. (You can use a different name, but if you do, you also need update the `uploadPreset` value in **cloudinary.ts**.) See instructions on how to [configure your upload preset](https://cloudinary.com/documentation/profile_picture_sample_project#upload_preset_configuration).
+1. Create an upload preset called **ugc-video-langs**. (You can use a different name, but if you do, you also need update the `uploadPreset` value in **cloudinary.ts**.) See instructions on how to [configure your upload preset](https://cloudinary.com/documentation/video_review_sample_project#upload_preset_configuration).
 1. Ensure that the **Notification URL** in your upload preset is set to:<br>`https://<your app's domain>/api/moderate`
 1. If running locally, run the development server:
    
@@ -33,7 +33,7 @@ To run the app yourself:
 
 ## Learn More
 
-Learn more about this app: [Cloudinary docs](https://cloudinary.com/documentation/profile_picture_sample_project).
+Learn more about this app: [Cloudinary docs](https://cloudinary.com/documentation/video_review_sample_project).
 
 To learn more about Next.js, take a look at the following resources:
 
diff --git a/app/components/cld.ts b/app/components/cld.ts
deleted file mode 100644
index abb177b..0000000
--- a/app/components/cld.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Cloudinary } from "@cloudinary/url-gen"
-import { CLOUDINARY_CONFIG } from "../config/cloudinary"
-
-// Create a Cloudinary instance for the product environment.
-const cld = new Cloudinary({
-  cloud: {
-    cloudName: CLOUDINARY_CONFIG.cloudName
-  }
-})
-
-export default cld
\ No newline at end of file
diff --git a/app/cloudinary-video-player.tsx b/app/components/cloudinary-video-player.tsx
similarity index 98%
rename from app/cloudinary-video-player.tsx
rename to app/components/cloudinary-video-player.tsx
index 767aadf..2e511eb 100644
--- a/app/cloudinary-video-player.tsx
+++ b/app/components/cloudinary-video-player.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useRef, useState } from "react"
-import { CLOUDINARY_CONFIG } from './config/cloudinary'
+import { CLOUDINARY_CONFIG } from '../config/cloudinary'
 
 interface CloudinaryVideoPlayerProps {
   publicId: string
diff --git a/app/product-reviews.tsx b/app/components/product-reviews.tsx
similarity index 99%
rename from app/product-reviews.tsx
rename to app/components/product-reviews.tsx
index 6e2a52d..c7bc978 100644
--- a/app/product-reviews.tsx
+++ b/app/components/product-reviews.tsx
@@ -7,7 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { AlertCircle } from 'lucide-react'
 import { CloudinaryVideoPlayer } from "./cloudinary-video-player"
-import { CLOUDINARY_CONFIG } from "./config/cloudinary"
+import { CLOUDINARY_CONFIG } from "../config/cloudinary"
 
 interface Review {
   id: string
diff --git a/app/components/upload-widget.tsx b/app/components/upload-widget.tsx
deleted file mode 100644
index e43d448..0000000
--- a/app/components/upload-widget.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-'use client'
-
-import { useState, useEffect, useCallback  } from 'react'
-import { CloudinaryWidget } from '../types'
-import { CLOUDINARY_CONFIG } from '../config/cloudinary'
-
-interface UploadWidgetProps {
-  onUploadSuccess: (publicId: string, poorQuality: boolean) => void
-  onUploadError: (error: string) => void
-  setLoading: (loading: boolean) => void
-  buttonText: string
-  onClick: (e: React.MouseEvent) => void
-}
-
-// The Upload widget component
-export default function UploadWidget({ onUploadSuccess, onUploadError, setLoading, buttonText, onClick }: UploadWidgetProps) {
-  const [uploadWidget, setUploadWidget] = useState<CloudinaryWidget | null>(null)
-
-  // Check if the moderation result from the uploaded asset has been received at the moderate endpoint.
-  // This check times out after a minute.
-  const checkModeration = useCallback(async (info: any, startTime: number) => {
-    if (Date.now() - startTime > 60000) {
-      onUploadError('Moderation check timed out. Please try again.')
-      return
-    }
-
-    // Once a second, check if the moderation result has been received at the moderate endpoint.
-    try {
-      const response = await fetch('/api/moderate', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(info),
-      })
-      const data = await response.json()
-      if (data.status === 'approved') {
-        onUploadSuccess(data.publicId, data.poorQuality)
-      } else if (data.status === 'rejected') {
-        onUploadError(data.message)
-      } else {
-        // If still pending, check again after a delay
-        setTimeout(() => checkModeration(info, startTime), 1000)
-      }
-    } catch (error) {
-      console.error('Error checking moderation status:', error)
-      onUploadError('An error occurred while processing your image.')
-    }
-  }, [onUploadSuccess, onUploadError])
-
-  useEffect(() => {
-    if (typeof window !== 'undefined' && window.cloudinary) {
-      const widget = window.cloudinary.createUploadWidget(
-        {
-          cloudName: CLOUDINARY_CONFIG.cloudName,
-          clientAllowedFormats: 'image',
-          uploadPreset: CLOUDINARY_CONFIG.uploadPreset,
-          sources: ['local'],
-          multiple: false,
-          maxFiles: 1,
-        },
-        async (error: any, result: any) => {
-          if (error) {
-            console.error('Upload error:', error)
-            onUploadError(`Upload failed: ${error.statusText || 'Unknown error'}`)
-            return
-          }
-
-          if (result && result.event === 'success') {
-            onUploadError('')
-            setLoading(true)
-            const startTime = Date.now()
-            checkModeration(result.info, startTime)
-          } else if (result && result.event === 'close') {
-            if (!result.info) {
-              onUploadError('Upload cancelled or failed. Please try again.')
-            }
-          }
-        }
-      )
-      setUploadWidget(widget)
-    }
-
-    return () => {
-      if (uploadWidget) {
-        uploadWidget.destroy()
-      }
-    }
-  }, [checkModeration, onUploadError, setLoading])
-
-  const openUploadWidget = (e: React.MouseEvent) => {
-    onClick(e)
-    if (uploadWidget) {
-      uploadWidget.open()
-    }
-  }
-
-  // Return the button that opens the Upload widget
-  return (
-    <button
-      onClick={openUploadWidget}
-      className="bg-green-500 hover:bg-green-600 text-white p-2 rounded transition duration-300"
-    >
-      {buttonText}
-    </button>
-  )
-}
\ No newline at end of file
diff --git a/app/context/UserContext.tsx b/app/context/UserContext.tsx
deleted file mode 100644
index 3d654e6..0000000
--- a/app/context/UserContext.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-'use client'
-
-import { CloudinaryImage } from '@cloudinary/url-gen/index'
-import React, { createContext, useState, useContext } from 'react'
-
-interface Post {
-  id: number
-  content: string
-  image?: string
-}
-
-
-interface UserContextType {
-  profilePublicId: string
-  setProfilePublicId: (publicId: string) => void
-  profileImage: CloudinaryImage | undefined;
-  setProfileImage: React.Dispatch<React.SetStateAction<CloudinaryImage | undefined>>;  // And this line
-  name: string
-  setName: (name: string) => void
-  location: string
-  setLocation: (location: string) => void
-  birthday: string
-  setBirthday: (birthday: string) => void
-  posts: Post[]
-  setPosts: React.Dispatch<React.SetStateAction<Post[]>>
-  profileIsPoorQuality: boolean;
-  setProfileIsPoorQuality: (isPoorQuality: boolean) => void;
-}
-
-// The UserContext ensures the user information persists when switching pages
-const UserContext = createContext<UserContextType | undefined>(undefined)
-
-export function UserProvider({ children }: { children: React.ReactNode }) {
-  const [profilePublicId, setProfilePublicId] = useState('')
-  const [profileImage, setProfileImage] = useState<CloudinaryImage | undefined>(undefined)
-  const [name, setName] = useState('')
-  const [location, setLocation] = useState('')
-  const [birthday, setBirthday] = useState('')
-  const [posts, setPosts] = useState<Post[]>([])
-  const [profileIsPoorQuality, setProfileIsPoorQuality] = useState(false)
-
-
-  return (
-    <UserContext.Provider value={{ 
-      profilePublicId, setProfilePublicId,
-      profileImage, setProfileImage,
-      name, setName,
-      location, setLocation,
-      birthday, setBirthday,
-      posts, setPosts,
-      profileIsPoorQuality, setProfileIsPoorQuality
-    }}>
-      {children}
-    </UserContext.Provider>
-  )
-}
-
-export function useUser() {
-  const context = useContext(UserContext)
-  if (context === undefined) {
-    throw new Error('useUser must be used within a UserProvider')
-  }
-  return context
-}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index c37c70b..e560a53 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,14 +1,13 @@
 import './globals.css'
 import { Inter } from 'next/font/google'
 import Script from 'next/script'
-import { UserProvider } from './context/UserContext'
 import Link from 'next/link'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
-  title: 'My App',
-  description: 'A full-stack app with profile and posts',
+  title: 'Product Review Demo App',
+  description: 'A full-stack app to demonstrate a video review UGC use case',
 }
 
 export default function RootLayout({
@@ -19,14 +18,12 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <UserProvider>
           <nav className="bg-gray-800 text-white p-4">
             <ul className="flex space-x-4">
               <li><Link href="/" className="hover:text-gray-300">Bluetooth Adapter</Link></li>
             </ul>
           </nav>
           {children}
-        </UserProvider>
         <Script src="https://upload-widget.cloudinary.com/global/all.js" strategy="beforeInteractive" />
       </body>
     </html>
diff --git a/app/page.tsx b/app/page.tsx
index f6c57a6..c6dbba3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,23 +1,22 @@
 import { Card, CardContent } from "@/components/ui/card"
-import { ProductReviews } from "./product-reviews"
-import {Cloudinary, CloudinaryImage} from "@cloudinary/url-gen";
+import { ProductReviews } from "./components/product-reviews"
+import { Cloudinary } from "@cloudinary/url-gen";
 import { fill } from '@cloudinary/url-gen/actions/resize'
 import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity"
 import { byRadius } from "@cloudinary/url-gen/actions/roundCorners"
 
 export default function ProductPage() {
 
-    const cld = new Cloudinary({
-        cloud: {
-          cloudName: 'demo'
-        }
-      });
+  const cld = new Cloudinary({
+    cloud: {
+      cloudName: 'demo'
+    }
+  });
 
-    const myImage = cld.image('docs/bluetooth_dongle').
-    resize(fill().width(450).height(450).gravity(autoGravity())).
-      roundCorners(byRadius(5)).format('auto').quality('auto')
-    let imgUrl = myImage.toURL()
-    console.log("imgeUrl: ", imgUrl)
+  const myImage = cld.image('docs/bluetooth_dongle').
+  resize(fill().width(450).height(450).gravity(autoGravity())).
+    roundCorners(byRadius(5)).format('auto').quality('auto')
+  let imgUrl = myImage.toURL()
 
   return (
 
diff --git a/app/page_profile.tsx b/app/page_profile.tsx
deleted file mode 100644
index f6f91f8..0000000
--- a/app/page_profile.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { useUser } from './context/UserContext'
-import { RotatingLines } from 'react-loader-spinner'
-import UploadWidget from './components/upload-widget'
-import cld from "./components/cld"
-import { AdvancedImage } from '@cloudinary/react'
-import { fill } from '@cloudinary/url-gen/actions/resize'
-import { enhance, generativeRestore, upscale } from "@cloudinary/url-gen/actions/effect"
-import { focusOn, autoGravity } from "@cloudinary/url-gen/qualifiers/gravity"
-import { face } from "@cloudinary/url-gen/qualifiers/focusOn"
-import { CLOUDINARY_CONFIG } from "./config/cloudinary"
-
-// The Profile page lets the user input their personal information and upload a profile picture.
-export default function MyProfile() {
-  const [isEditing, setIsEditing] = useState(false)
-  const [uploadError, setUploadError] = useState('')
-
-  const { 
-    setProfilePublicId,
-    profileImage, setProfileImage,
-    name, setName,
-    location, setLocation,
-    birthday, setBirthday,
-    setProfileIsPoorQuality
-  } = useUser()
-  const [loading, setLoading] = useState(false)
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    setIsEditing(false)
-  }
-
-  const handleUploadSuccess = (publicId: string, poorQuality: boolean) => {
-    setLoading(false)
-    setUploadError('')
-    setProfilePublicId(publicId)
-    setProfileIsPoorQuality(poorQuality)
-
-    // Create the delivery URL for the profile picture:
-    const profileImage = cld.image(publicId)
-
-    profileImage.resize(fill().width(300).height(300).gravity(
-      focusOn(face()).fallbackGravity(autoGravity())))
-      .format('auto').quality('auto')
-
-    if (poorQuality) {
-      profileImage.effect(enhance()).effect(generativeRestore()).effect(upscale())
-    }
-
-    setProfileImage(profileImage)
-  }
-
-  const handleUploadError = (error: string) => {
-    setLoading(false)
-    setUploadError(error)
-  }
-
-  const handleImageUpload = (e: React.MouseEvent) => {
-    e.preventDefault() // Prevent form submission
-    // The actual upload logic is handled in the UploadWidget component
-  }
-
-  return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-4">My Profile</h1>
-      {isEditing ? (
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <input
-            type="text"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            placeholder="Name"
-            className="w-full p-2 border rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
-          />
-          <input
-            type="text"
-            value={location}
-            onChange={(e) => setLocation(e.target.value)}
-            placeholder="Location"
-            className="w-full p-2 border rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
-          />
-          <input
-            type="date"
-            value={birthday}
-            onChange={(e) => setBirthday(e.target.value)}
-            className="w-full p-2 border rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 [color-scheme:light] dark:[color-scheme:dark]"
-          />
-          <button type="submit" className="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded transition duration-300">
-          Save
-          </button>
-        </form>
-      ) : (
-        <div className="space-y-4">
-          <p><strong>Name:</strong> {name || 'Not set'}</p>
-          <p><strong>Location:</strong> {location || 'Not set'}</p>
-          <p><strong>Birthday:</strong> {birthday || 'Not set'}</p>
-          <button
-            onClick={() => setIsEditing(true)}
-            className="bg-green-500 hover:bg-green-600 text-white p-2 rounded transition duration-300"
-          >
-            Edit Profile
-          </button>
-        </div>
-      )}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold mb-4">Profile Picture</h2>
-        <p>Upload an image for your profile picture.</p>
-        <p className="mb-6">We&apos;ll check that it&apos;s not offensive and doesn&apos;t contain malware.</p>
-        <div className="space-y-4">
-        {loading ? (
-          <RotatingLines
-          visible={true}
-          width="96"
-          strokeColor="#de5e14"
-          strokeWidth="5"
-          animationDuration="0.75"
-        />
-        ):
-        profileImage ? (
-          <AdvancedImage cldImg={profileImage} width={300} height={300} alt="Profile"/>
-
-        ) : (
-          <AdvancedImage cldImg={cld.image(CLOUDINARY_CONFIG.defaultImage)
-            .resize(fill().width(300).height(300).gravity(autoGravity()))
-            .format('auto')
-            .quality('auto')} width={300} height={300} alt="Profile" />
-        )}
-        <UploadWidget
-          onUploadSuccess={handleUploadSuccess}
-          onUploadError={handleUploadError}
-          setLoading={setLoading}
-          buttonText="Edit Profile Picture"
-          onClick={handleImageUpload}
-        />
-        </div>
-        {uploadError && <p className="text-red-500 mt-2">{uploadError}</p>}
-      </div>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/app/posts/page.tsx b/app/posts/page.tsx
deleted file mode 100644
index 3bda7a7..0000000
--- a/app/posts/page.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { useUser } from '../context/UserContext'
-import { RotatingLines } from 'react-loader-spinner'
-import UploadWidget from '../components/upload-widget'
-import cld from "../components/cld"
-import { AdvancedImage } from '@cloudinary/react'
-import { fill, pad } from '@cloudinary/url-gen/actions/resize'
-import { focusOn, autoGravity } from "@cloudinary/url-gen/qualifiers/gravity"
-import { face } from "@cloudinary/url-gen/qualifiers/focusOn"
-import { max, byRadius } from "@cloudinary/url-gen/actions/roundCorners"
-import { outline,enhance, generativeRestore, upscale  } from "@cloudinary/url-gen/actions/effect"
-import { color } from "@cloudinary/url-gen/qualifiers/background"
-import { CLOUDINARY_CONFIG } from "../config/cloudinary"
-
-interface Post {
-  id: number
-  content: string
-  image?: string
-}
-
-// The Posts page lets users write a post and optionally upload an image.
-export default function MyPosts() {
-  const [newPost, setNewPost] = useState('')
-  const [newImage, setNewImage] = useState('')
-  const [uploadError, setUploadError] = useState('')
-  const [loading, setLoading] = useState(false)
-  const { profilePublicId, posts, setPosts, profileIsPoorQuality } = useUser()
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    if (newPost.trim() !== '') {
-      setPosts(prevPosts => [
-        { id: Date.now(), content: newPost, image: newImage },
-        ...prevPosts,
-      ])
-      setNewPost('')
-      setNewImage('')
-      setUploadError('')
-    }
-  }
-
-  const handleUploadSuccess = (publicId: string) => {
-    setLoading(false)
-    setNewImage(publicId)
-    setUploadError('')
-  }
-
-  const handleUploadError = (error: string) => {
-    setLoading(false)
-    setUploadError(error)
-  }
-
-  const handleImageUpload = (e: React.MouseEvent) => {
-    e.preventDefault() // Prevent form submission
-    // The actual upload logic is handled in the UploadWidget component
-  }
-
-  return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-4">My Posts</h1>
-      <p>Write a message in the text field and optionally upload an image before posting.</p>
-      <p className="mb-6">We&apos;ll check that the image is not offensive and doesn&apos;t contain malware.</p>
-      <form onSubmit={handleSubmit} className="mb-4 space-y-2">
-        <textarea
-          value={newPost}
-          onChange={(e) => setNewPost(e.target.value)}
-          placeholder="What's on your mind?"
-          className="w-full p-2 border rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
-        />
-        {loading ? (
-          <RotatingLines
-          visible={true}
-          width="96"
-          strokeColor="#de5e14"
-          strokeWidth="5"
-          animationDuration="0.75"
-        />
-        ):
-        newImage && (
-             <AdvancedImage cldImg={cld.image(newImage).
-              resize(pad().width(300).height(200).background(color("gray"))).
-                roundCorners(byRadius(5)).format('auto').quality('auto')
-            } width={300} height={200} alt="New post"/>
-        )}
-        <div className="flex space-x-2">
-          <UploadWidget
-            onUploadSuccess={handleUploadSuccess}
-            onUploadError={handleUploadError}
-            setLoading={setLoading}
-            buttonText="Upload Image"
-            onClick={handleImageUpload}
-          />
-          <button type="submit" className="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded transition duration-300">
-            Post
-          </button>
-        </div>
-        {uploadError && <p className="text-red-500 mt-2">{uploadError}</p>}
-      </form>
-      <div className="space-y-4">
-        {posts.map((post: Post) => (
-          <div key={post.id} className="border p-4 rounded flex items-start dark:border-gray-700">
-            <div className="flex-shrink-0 w-[75px] h-[75px] mr-4">
-            <AdvancedImage cldImg={(() => {
-              const img = cld.image(profilePublicId || CLOUDINARY_CONFIG.defaultImage)
-              if (profileIsPoorQuality) {
-                img.effect(enhance())
-                .effect(generativeRestore())
-                .effect(upscale())
-              }
-              img.resize(fill().width(75).height(75).gravity(
-                focusOn(face()).fallbackGravity(autoGravity())))
-              .roundCorners(max())
-              .effect(outline().color("pink"))
-              .format('auto')
-              .quality('auto')
-          
-              return img
-            })()} width={75} height={75} alt="Profile"/>
-            </div>
-            <div>
-            <p className="text-gray-900 dark:text-gray-100">{post.content}</p>
-              {post.image && (
-                <AdvancedImage cldImg={cld.image(post.image).
-                  resize(pad().width(300).height(200).background(color("gray")))
-                    .roundCorners(byRadius(5))
-                    .format('auto')
-                    .quality('auto')
-                } width={300} height={200} alt="Post" className="mt-2"/>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
\ No newline at end of file

From d331a10fae9cf16164d9d6a1dfcbdd664d67f579 Mon Sep 17 00:00:00 2001
From: carlevison <caroline.levison@cloudinary.com>
Date: Thu, 12 Dec 2024 17:35:24 +0000
Subject: [PATCH 7/8] Add sourceTypes

---
 app/components/cloudinary-video-player.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/cloudinary-video-player.tsx b/app/components/cloudinary-video-player.tsx
index 2e511eb..c88845e 100644
--- a/app/components/cloudinary-video-player.tsx
+++ b/app/components/cloudinary-video-player.tsx
@@ -54,6 +54,7 @@ export function CloudinaryVideoPlayer({ publicId }: CloudinaryVideoPlayerProps)
         controls: true,
         chaptersButton: true,
         width: 600,
+        sourceTypes: ['webm','mp4'],
         posterOptions: {aspect_ratio: "16:9", crop: "fill", gravity: "auto", width: 600}
       })
 

From fc0ee42f1f44eb53d03f6cdb230ac4a6ab589251 Mon Sep 17 00:00:00 2001
From: carlevison <caroline.levison@cloudinary.com>
Date: Fri, 13 Dec 2024 10:48:01 +0000
Subject: [PATCH 8/8] Prepare for cloudinary-devs

---
 app/config/cloudinary.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/config/cloudinary.ts b/app/config/cloudinary.ts
index febe227..2fb521e 100644
--- a/app/config/cloudinary.ts
+++ b/app/config/cloudinary.ts
@@ -1,4 +1,4 @@
 export const CLOUDINARY_CONFIG = {
-    cloudName: 'cld-demo-ugc',
+    cloudName: 'MY_CLOUD_NAME',
     uploadPreset: 'ugc-video-langs'
   } as const
\ No newline at end of file