├── app
    ├── favicon.ico
    ├── layout.tsx
    ├── api
    │   └── recommendations
    │   │   └── route.ts
    ├── globals.css
    └── page.tsx
├── postcss.config.mjs
├── public
    ├── vercel.svg
    ├── window.svg
    ├── file.svg
    ├── globe.svg
    └── next.svg
├── next.config.ts
├── lib
    └── utils.ts
├── components.json
├── .gitignore
├── tsconfig.json
├── components
    └── ui
    │   ├── label.tsx
    │   ├── input.tsx
    │   ├── tabs.tsx
    │   ├── button.tsx
    │   └── card.tsx
├── biome.json
├── README.md
└── package.json


/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dapoadedire/movie-and-book-recommender/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 |   plugins: ["@tailwindcss/postcss"],
3 | };
4 | 
5 | export default config;
6 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 | 
3 | const nextConfig: NextConfig = {
4 |   /* config options here */
5 | };
6 | 
7 | export default nextConfig;
8 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/public/window.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>


--------------------------------------------------------------------------------
/public/file.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "iconLibrary": "lucide",
14 |   "aliases": {
15 |     "components": "@/components",
16 |     "utils": "@/lib/utils",
17 |     "ui": "@/components/ui",
18 |     "lib": "@/lib",
19 |     "hooks": "@/hooks"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Label({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof LabelPrimitive.Root>) {
12 |   return (
13 |     <LabelPrimitive.Root
14 |       data-slot="label"
15 |       className={cn(
16 |         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
17 |         className
18 |       )}
19 |       {...props}
20 |     />
21 |   )
22 | }
23 | 
24 | export { Label }
25 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Geist, Geist_Mono } from "next/font/google";
 3 | import "./globals.css";
 4 | 
 5 | const geistSans = Geist({
 6 |   variable: "--font-geist-sans",
 7 |   subsets: ["latin"],
 8 | });
 9 | 
10 | const geistMono = Geist_Mono({
11 |   variable: "--font-geist-mono",
12 |   subsets: ["latin"],
13 | });
14 | 
15 | export const metadata: Metadata = {
16 |   title: "Create Next App",
17 |   description: "Generated by create next app",
18 | };
19 | 
20 | export default function RootLayout({
21 |   children,
22 | }: Readonly<{
23 |   children: React.ReactNode;
24 | }>) {
25 |   return (
26 |     <html lang="en">
27 |       <body
28 |         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
29 |       >
30 |         {children}
31 |       </body>
32 |     </html>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/biome.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://biomejs.dev/schemas/2.2.0/schema.json",
 3 |   "vcs": {
 4 |     "enabled": true,
 5 |     "clientKind": "git",
 6 |     "useIgnoreFile": true
 7 |   },
 8 |   "files": {
 9 |     "ignoreUnknown": true,
10 |     "includes": ["**", "!node_modules", "!.next", "!dist", "!build"]
11 |   },
12 |   "formatter": {
13 |     "enabled": true,
14 |     "indentStyle": "space",
15 |     "indentWidth": 2
16 |   },
17 |   "linter": {
18 |     "enabled": true,
19 |     "rules": {
20 |       "recommended": true,
21 |       "suspicious": {
22 |         "noUnknownAtRules": "off"
23 |       }
24 |     },
25 |     "domains": {
26 |       "next": "recommended",
27 |       "react": "recommended"
28 |     }
29 |   },
30 |   "assist": {
31 |     "actions": {
32 |       "source": {
33 |         "organizeImports": "on"
34 |       }
35 |     }
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/public/globe.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       data-slot="input"
10 |       className={cn(
11 |         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13 |         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14 |         className
15 |       )}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | export { Input }
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Movie & Book Recommender
 2 | 
 3 | A simple web application that recommends movies and books based on your favorites.
 4 | 
 5 | ## Features
 6 | 
 7 | - Get personalized movie recommendations
 8 | - Get personalized book recommendations
 9 | - Clean, modern interface with tabs
10 | - Responsive design
11 | 
12 | ## Tech Stack
13 | 
14 | - **Framework:** Next.js 15
15 | - **Language:** TypeScript
16 | - **Styling:** Tailwind CSS
17 | - **UI Components:** shadcn/ui
18 | - **AI:** Vercel AI SDK with OpenAI
19 | 
20 | ## Getting Started
21 | 
22 | 1. Install dependencies:
23 | 
24 | ```bash
25 | npm install
26 | ```
27 | 
28 | 2. Run the development server:
29 | 
30 | ```bash
31 | npm run dev
32 | ```
33 | 
34 | 3. Open [http://localhost:3000](http://localhost:3000) in your browser.
35 | 
36 | ## Usage
37 | 
38 | 1. Choose between Books or Movies tab
39 | 2. Enter your favorite books/movies (comma-separated)
40 | 3. Specify how many recommendations you want (1-10)
41 | 4. Click "Generate Recommendations"
42 | 5. Browse your personalized suggestions
43 | 
44 | ## Contributing
45 | 
46 | Feel free to submit issues and enhancement requests.
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "movie-and-book-recommender",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack",
 7 |     "build": "next build --turbopack",
 8 |     "start": "next start",
 9 |     "lint": "biome check",
10 |     "format": "biome format --write"
11 |   },
12 |   "dependencies": {
13 |     "@ai-sdk/openai": "^2.0.22",
14 |     "@hookform/resolvers": "^5.2.1",
15 |     "@radix-ui/react-label": "^2.1.7",
16 |     "@radix-ui/react-slot": "^1.2.3",
17 |     "@radix-ui/react-tabs": "^1.1.13",
18 |     "ai": "^5.0.27",
19 |     "class-variance-authority": "^0.7.1",
20 |     "clsx": "^2.1.1",
21 |     "lucide-react": "^0.542.0",
22 |     "next": "15.5.2",
23 |     "react": "19.1.0",
24 |     "react-dom": "19.1.0",
25 |     "react-hook-form": "^7.62.0",
26 |     "tailwind-merge": "^3.3.1",
27 |     "zod": "^4.1.4"
28 |   },
29 |   "devDependencies": {
30 |     "@biomejs/biome": "2.2.0",
31 |     "@tailwindcss/postcss": "^4",
32 |     "@types/node": "^20",
33 |     "@types/react": "^19",
34 |     "@types/react-dom": "^19",
35 |     "tailwindcss": "^4",
36 |     "tw-animate-css": "^1.3.7",
37 |     "typescript": "^5"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Tabs({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof TabsPrimitive.Root>) {
12 |   return (
13 |     <TabsPrimitive.Root
14 |       data-slot="tabs"
15 |       className={cn("flex flex-col gap-2", className)}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | function TabsList({
22 |   className,
23 |   ...props
24 | }: React.ComponentProps<typeof TabsPrimitive.List>) {
25 |   return (
26 |     <TabsPrimitive.List
27 |       data-slot="tabs-list"
28 |       className={cn(
29 |         "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
30 |         className
31 |       )}
32 |       {...props}
33 |     />
34 |   )
35 | }
36 | 
37 | function TabsTrigger({
38 |   className,
39 |   ...props
40 | }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
41 |   return (
42 |     <TabsPrimitive.Trigger
43 |       data-slot="tabs-trigger"
44 |       className={cn(
45 |         "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
46 |         className
47 |       )}
48 |       {...props}
49 |     />
50 |   )
51 | }
52 | 
53 | function TabsContent({
54 |   className,
55 |   ...props
56 | }: React.ComponentProps<typeof TabsPrimitive.Content>) {
57 |   return (
58 |     <TabsPrimitive.Content
59 |       data-slot="tabs-content"
60 |       className={cn("flex-1 outline-none", className)}
61 |       {...props}
62 |     />
63 |   )
64 | }
65 | 
66 | export { Tabs, TabsList, TabsTrigger, TabsContent }
67 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
16 |         outline:
17 |           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 |         ghost:
21 |           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
22 |         link: "text-primary underline-offset-4 hover:underline",
23 |       },
24 |       size: {
25 |         default: "h-9 px-4 py-2 has-[>svg]:px-3",
26 |         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27 |         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28 |         icon: "size-9",
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: "default",
33 |       size: "default",
34 |     },
35 |   }
36 | )
37 | 
38 | function Button({
39 |   className,
40 |   variant,
41 |   size,
42 |   asChild = false,
43 |   ...props
44 | }: React.ComponentProps<"button"> &
45 |   VariantProps<typeof buttonVariants> & {
46 |     asChild?: boolean
47 |   }) {
48 |   const Comp = asChild ? Slot : "button"
49 | 
50 |   return (
51 |     <Comp
52 |       data-slot="button"
53 |       className={cn(buttonVariants({ variant, size, className }))}
54 |       {...props}
55 |     />
56 |   )
57 | }
58 | 
59 | export { Button, buttonVariants }
60 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Card({ className, ...props }: React.ComponentProps<"div">) {
 6 |   return (
 7 |     <div
 8 |       data-slot="card"
 9 |       className={cn(
10 |         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11 |         className
12 |       )}
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19 |   return (
20 |     <div
21 |       data-slot="card-header"
22 |       className={cn(
23 |         "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24 |         className
25 |       )}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32 |   return (
33 |     <div
34 |       data-slot="card-title"
35 |       className={cn("leading-none font-semibold", className)}
36 |       {...props}
37 |     />
38 |   )
39 | }
40 | 
41 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42 |   return (
43 |     <div
44 |       data-slot="card-description"
45 |       className={cn("text-muted-foreground text-sm", className)}
46 |       {...props}
47 |     />
48 |   )
49 | }
50 | 
51 | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52 |   return (
53 |     <div
54 |       data-slot="card-action"
55 |       className={cn(
56 |         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57 |         className
58 |       )}
59 |       {...props}
60 |     />
61 |   )
62 | }
63 | 
64 | function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65 |   return (
66 |     <div
67 |       data-slot="card-content"
68 |       className={cn("px-6", className)}
69 |       {...props}
70 |     />
71 |   )
72 | }
73 | 
74 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75 |   return (
76 |     <div
77 |       data-slot="card-footer"
78 |       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79 |       {...props}
80 |     />
81 |   )
82 | }
83 | 
84 | export {
85 |   Card,
86 |   CardHeader,
87 |   CardFooter,
88 |   CardTitle,
89 |   CardAction,
90 |   CardDescription,
91 |   CardContent,
92 | }
93 | 


--------------------------------------------------------------------------------
/app/api/recommendations/route.ts:
--------------------------------------------------------------------------------
  1 | // app/api/recommendations/route.ts (for App Router)
  2 | // OR pages/api/recommendations.ts (for Pages Router)
  3 | 
  4 | import { openai } from "@ai-sdk/openai";
  5 | import { generateObject } from "ai";
  6 | import { z } from "zod";
  7 | import { NextRequest, NextResponse } from "next/server";
  8 | 
  9 | // Response schemas - individual items
 10 | const bookSchema = z.object({
 11 |   name: z.string(),
 12 |   author: z.string(),
 13 |   genre: z.string(),
 14 |   summary: z.string(),
 15 |   link: z.string(),
 16 | });
 17 | 
 18 | const movieSchema = z.object({
 19 |   title: z.string(),
 20 |   director: z.string(),
 21 |   genre: z.string(),
 22 |   summary: z.string(),
 23 |   link: z.string(),
 24 | });
 25 | 
 26 | // Single recommendation schemas (wrapped in object)
 27 | const singleBookRecommendationSchema = z.object({
 28 |   book: bookSchema,
 29 | });
 30 | 
 31 | const singleMovieRecommendationSchema = z.object({
 32 |   movie: movieSchema,
 33 | });
 34 | 
 35 | // Multiple recommendations schemas (wrapped in object with array)
 36 | const multipleBooksRecommendationSchema = z.object({
 37 |   books: z.array(bookSchema),
 38 | });
 39 | 
 40 | const multipleMoviesRecommendationSchema = z.object({
 41 |   movies: z.array(movieSchema),
 42 | });
 43 | 
 44 | // Request body validation schema
 45 | const requestSchema = z.object({
 46 |   favorites: z.array(z.string()),
 47 |   count: z.coerce.number().int().min(1).max(10),
 48 |   type: z.enum(["movie", "book"]),
 49 | });
 50 | 
 51 | export async function POST(req: NextRequest) {
 52 |   try {
 53 |     // Parse and validate request body
 54 |     const body = await req.json();
 55 |     const { favorites, count, type } = requestSchema.parse(body);
 56 | 
 57 |     // Check for API key
 58 |     if (!process.env.OPENAI_API_KEY) {
 59 |       return NextResponse.json(
 60 |         { error: "OpenAI API key is not configured" },
 61 |         { status: 500 }
 62 |       );
 63 |     }
 64 | 
 65 |     // Generate the prompt based on user input
 66 |     const prompt = `Generate ${count} ${type} recommendation${
 67 |       count > 1 ? "s" : ""
 68 |     } based on the following favorite ${type}${
 69 |       favorites.length > 1 ? "s" : ""
 70 |     }: ${favorites.join(", ")}.
 71 | 
 72 | For each recommendation, include:
 73 | - ${
 74 |       type === "book"
 75 |         ? "name, author, genre, summary"
 76 |         : "title, director, genre, summary"
 77 |     }
 78 | - link: A valid URL to the ${type} on ${
 79 |       type === "book" ? "Goodreads or Amazon" : "IMDb or TMDB"
 80 |     }
 81 | 
 82 | Please provide detailed and accurate information for each recommendation.`;
 83 | 
 84 |     let recommendations;
 85 | 
 86 |     if (type === "book") {
 87 |       if (count === 1) {
 88 |         const { object: bookRec } = await generateObject({
 89 |           model: openai("gpt-4o"),
 90 |           schema: singleBookRecommendationSchema,
 91 |           prompt,
 92 |         });
 93 |         recommendations = [{ book: bookRec.book }];
 94 |       } else {
 95 |         const { object: bookRecs } = await generateObject({
 96 |           model: openai("gpt-4o"),
 97 |           schema: multipleBooksRecommendationSchema,
 98 |           prompt,
 99 |         });
100 |         recommendations = bookRecs.books.map((book) => ({ book }));
101 |       }
102 |     } else {
103 |       if (count === 1) {
104 |         const { object: movieRec } = await generateObject({
105 |           model: openai("gpt-4o"),
106 |           schema: singleMovieRecommendationSchema,
107 |           prompt,
108 |         });
109 |         recommendations = [{ movie: movieRec.movie }];
110 |       } else {
111 |         const { object: movieRecs } = await generateObject({
112 |           model: openai("gpt-4o"),
113 |           schema: multipleMoviesRecommendationSchema,
114 |           prompt,
115 |         });
116 |         recommendations = movieRecs.movies.map((movie) => ({ movie }));
117 |       }
118 |     }
119 | 
120 |     return NextResponse.json({ recommendations });
121 |   } catch (error) {
122 |     console.error("Error generating recommendations:", error);
123 | 
124 |     if (error instanceof z.ZodError) {
125 |       return NextResponse.json(
126 |         { error: "Invalid request data", details: error.message },
127 |         { status: 400 }
128 |       );
129 |     }
130 | 
131 |     return NextResponse.json(
132 |       { error: "Failed to generate recommendations" },
133 |       { status: 500 }
134 |     );
135 |   }
136 | }
137 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | @import "tw-animate-css";
  3 | 
  4 | @custom-variant dark (&:is(.dark *));
  5 | 
  6 | /* :root {
  7 |   --background: #ffffff;
  8 |   --foreground: #171717;
  9 | } */
 10 | 
 11 | @theme inline {
 12 |   --font-sans: var(--font-geist-sans);
 13 |   --font-mono: var(--font-geist-mono);
 14 |   --color-sidebar-ring: var(--sidebar-ring);
 15 |   --color-sidebar-border: var(--sidebar-border);
 16 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 17 |   --color-sidebar-accent: var(--sidebar-accent);
 18 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 19 |   --color-sidebar-primary: var(--sidebar-primary);
 20 |   --color-sidebar-foreground: var(--sidebar-foreground);
 21 |   --color-sidebar: var(--sidebar);
 22 |   --color-chart-5: var(--chart-5);
 23 |   --color-chart-4: var(--chart-4);
 24 |   --color-chart-3: var(--chart-3);
 25 |   --color-chart-2: var(--chart-2);
 26 |   --color-chart-1: var(--chart-1);
 27 |   --color-ring: var(--ring);
 28 |   --color-input: var(--input);
 29 |   --color-border: var(--border);
 30 |   --color-destructive: var(--destructive);
 31 |   --color-accent-foreground: var(--accent-foreground);
 32 |   --color-accent: var(--accent);
 33 |   --color-muted-foreground: var(--muted-foreground);
 34 |   --color-muted: var(--muted);
 35 |   --color-secondary-foreground: var(--secondary-foreground);
 36 |   --color-secondary: var(--secondary);
 37 |   --color-primary-foreground: var(--primary-foreground);
 38 |   --color-primary: var(--primary);
 39 |   --color-popover-foreground: var(--popover-foreground);
 40 |   --color-popover: var(--popover);
 41 |   --color-card-foreground: var(--card-foreground);
 42 |   --color-card: var(--card);
 43 |   --color-foreground: var(--foreground);
 44 |   --color-background: var(--background);
 45 |   --radius-sm: calc(var(--radius) - 4px);
 46 |   --radius-md: calc(var(--radius) - 2px);
 47 |   --radius-lg: var(--radius);
 48 |   --radius-xl: calc(var(--radius) + 4px);
 49 | }
 50 | 
 51 | :root {
 52 |   --radius: 0.625rem;
 53 |   --background: oklch(1 0 0);
 54 |   --foreground: oklch(0.145 0 0);
 55 |   --card: oklch(1 0 0);
 56 |   --card-foreground: oklch(0.145 0 0);
 57 |   --popover: oklch(1 0 0);
 58 |   --popover-foreground: oklch(0.145 0 0);
 59 |   --primary: oklch(0.205 0 0);
 60 |   --primary-foreground: oklch(0.985 0 0);
 61 |   --secondary: oklch(0.97 0 0);
 62 |   --secondary-foreground: oklch(0.205 0 0);
 63 |   --muted: oklch(0.97 0 0);
 64 |   --muted-foreground: oklch(0.556 0 0);
 65 |   --accent: oklch(0.97 0 0);
 66 |   --accent-foreground: oklch(0.205 0 0);
 67 |   --destructive: oklch(0.577 0.245 27.325);
 68 |   --border: oklch(0.922 0 0);
 69 |   --input: oklch(0.922 0 0);
 70 |   --ring: oklch(0.708 0 0);
 71 |   --chart-1: oklch(0.646 0.222 41.116);
 72 |   --chart-2: oklch(0.6 0.118 184.704);
 73 |   --chart-3: oklch(0.398 0.07 227.392);
 74 |   --chart-4: oklch(0.828 0.189 84.429);
 75 |   --chart-5: oklch(0.769 0.188 70.08);
 76 |   --sidebar: oklch(0.985 0 0);
 77 |   --sidebar-foreground: oklch(0.145 0 0);
 78 |   --sidebar-primary: oklch(0.205 0 0);
 79 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 80 |   --sidebar-accent: oklch(0.97 0 0);
 81 |   --sidebar-accent-foreground: oklch(0.205 0 0);
 82 |   --sidebar-border: oklch(0.922 0 0);
 83 |   --sidebar-ring: oklch(0.708 0 0);
 84 | }
 85 | 
 86 | .dark {
 87 |   --background: oklch(0.145 0 0);
 88 |   --foreground: oklch(0.985 0 0);
 89 |   --card: oklch(0.205 0 0);
 90 |   --card-foreground: oklch(0.985 0 0);
 91 |   --popover: oklch(0.205 0 0);
 92 |   --popover-foreground: oklch(0.985 0 0);
 93 |   --primary: oklch(0.922 0 0);
 94 |   --primary-foreground: oklch(0.205 0 0);
 95 |   --secondary: oklch(0.269 0 0);
 96 |   --secondary-foreground: oklch(0.985 0 0);
 97 |   --muted: oklch(0.269 0 0);
 98 |   --muted-foreground: oklch(0.708 0 0);
 99 |   --accent: oklch(0.269 0 0);
100 |   --accent-foreground: oklch(0.985 0 0);
101 |   --destructive: oklch(0.704 0.191 22.216);
102 |   --border: oklch(1 0 0 / 10%);
103 |   --input: oklch(1 0 0 / 15%);
104 |   --ring: oklch(0.556 0 0);
105 |   --chart-1: oklch(0.488 0.243 264.376);
106 |   --chart-2: oklch(0.696 0.17 162.48);
107 |   --chart-3: oklch(0.769 0.188 70.08);
108 |   --chart-4: oklch(0.627 0.265 303.9);
109 |   --chart-5: oklch(0.645 0.246 16.439);
110 |   --sidebar: oklch(0.205 0 0);
111 |   --sidebar-foreground: oklch(0.985 0 0);
112 |   --sidebar-primary: oklch(0.488 0.243 264.376);
113 |   --sidebar-primary-foreground: oklch(0.985 0 0);
114 |   --sidebar-accent: oklch(0.269 0 0);
115 |   --sidebar-accent-foreground: oklch(0.985 0 0);
116 |   --sidebar-border: oklch(1 0 0 / 10%);
117 |   --sidebar-ring: oklch(0.556 0 0);
118 | }
119 | 
120 | @layer base {
121 |   * {
122 |     @apply border-border outline-ring/50;
123 |   }
124 |   body {
125 |     @apply bg-background text-foreground;
126 |   }
127 | }


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
  3 | import { Button } from "@/components/ui/button";
  4 | import {
  5 |   Card,
  6 |   CardContent,
  7 |   CardDescription,
  8 |   CardFooter,
  9 |   CardHeader,
 10 |   CardTitle,
 11 | } from "@/components/ui/card";
 12 | import { Input } from "@/components/ui/input";
 13 | import { Label } from "@/components/ui/label";
 14 | import { useState } from "react";
 15 | 
 16 | interface BookRecommendation {
 17 |   name: string;
 18 |   author: string;
 19 |   genre: string;
 20 |   summary: string;
 21 |   link: string;
 22 | }
 23 | 
 24 | interface MovieRecommendation {
 25 |   title: string;
 26 |   director: string;
 27 |   genre: string;
 28 |   summary: string;
 29 |   link: string;
 30 | }
 31 | 
 32 | interface Recommendation {
 33 |   book?: BookRecommendation;
 34 |   movie?: MovieRecommendation;
 35 | }
 36 | 
 37 | export default function New() {
 38 |   const [favorites, setFavorites] = useState("");
 39 |   const [count, setCount] = useState("3");
 40 |   const [recommendations, setRecommendations] = useState<Recommendation[]>([]);
 41 |   const [loading, setLoading] = useState(false);
 42 |   const [activeTab, setActiveTab] = useState("books");
 43 |   const [error, setError] = useState<string | null>(null);
 44 | 
 45 |   const handleSubmit = async (e: React.FormEvent, type: "book" | "movie") => {
 46 |     e.preventDefault();
 47 |     setLoading(true);
 48 |     setError(null);
 49 | 
 50 |     try {
 51 |       const response = await fetch("/api/recommendations", {
 52 |         method: "POST",
 53 |         headers: {
 54 |           "Content-Type": "application/json",
 55 |         },
 56 |         body: JSON.stringify({
 57 |           favorites: favorites
 58 |             .split(",")
 59 |             .map((f) => f.trim())
 60 |             .filter((f) => f),
 61 |           count: parseInt(count),
 62 |           type,
 63 |         }),
 64 |       });
 65 | 
 66 |       const data = await response.json();
 67 |       if (response.ok) {
 68 |         setRecommendations(data.recommendations);
 69 |       } else {
 70 |         setError(data.error || "Failed to get recommendations");
 71 |       }
 72 |     } catch (error) {
 73 |       setError("Network error. Please try again.");
 74 |       console.error("Error:", error);
 75 |     } finally {
 76 |       setLoading(false);
 77 |     }
 78 |   };
 79 | 
 80 |   const clearRecommendations = () => {
 81 |     setRecommendations([]);
 82 |     setError(null);
 83 |   };
 84 | 
 85 |   const handleTabChange = (value: string) => {
 86 |     setActiveTab(value);
 87 |     setRecommendations([]);
 88 |     setError(null);
 89 |   };
 90 | 
 91 |   const RecommendationCard = ({ rec }: { rec: Recommendation }) => {
 92 |     if (rec.book) {
 93 |       const { name, author, genre, summary, link } = rec.book;
 94 |       return (
 95 |         <Card className="w-full hover:shadow-lg transition-shadow duration-300">
 96 |           <CardHeader className="pb-3">
 97 |             <div className="flex items-start justify-between">
 98 |               <div className="flex-1">
 99 |                 <CardTitle className="text-lg font-semibold text-gray-900 mb-1">
100 |                   {name}
101 |                 </CardTitle>
102 |                 <CardDescription className="text-sm text-gray-600">
103 |                   by {author}
104 |                 </CardDescription>
105 |               </div>
106 |               <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full font-medium">
107 |                 {genre}
108 |               </span>
109 |             </div>
110 |           </CardHeader>
111 |           <CardContent className="pt-0">
112 |             <p className="text-sm text-gray-700 leading-relaxed">{summary}</p>
113 |           </CardContent>
114 |           <CardFooter className="pt-4">
115 |             <Button
116 |               variant="outline"
117 |               size="sm"
118 |               asChild
119 |               className="w-full hover:bg-blue-50"
120 |             >
121 |               <a
122 |                 href={link}
123 |                 target="_blank"
124 |                 rel="noopener noreferrer"
125 |                 className="flex items-center justify-center gap-2"
126 |               >
127 |                 📖 View Book
128 |               </a>
129 |             </Button>
130 |           </CardFooter>
131 |         </Card>
132 |       );
133 |     }
134 | 
135 |     if (rec.movie) {
136 |       const { title, director, genre, summary, link } = rec.movie;
137 |       return (
138 |         <Card className="w-full hover:shadow-lg transition-shadow duration-300">
139 |           <CardHeader className="pb-3">
140 |             <div className="flex items-start justify-between">
141 |               <div className="flex-1">
142 |                 <CardTitle className="text-lg font-semibold text-gray-900 mb-1">
143 |                   {title}
144 |                 </CardTitle>
145 |                 <CardDescription className="text-sm text-gray-600">
146 |                   directed by {director}
147 |                 </CardDescription>
148 |               </div>
149 |               <span className="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full font-medium">
150 |                 {genre}
151 |               </span>
152 |             </div>
153 |           </CardHeader>
154 |           <CardContent className="pt-0">
155 |             <p className="text-sm text-gray-700 leading-relaxed">{summary}</p>
156 |           </CardContent>
157 |           <CardFooter className="pt-4">
158 |             <Button
159 |               variant="outline"
160 |               size="sm"
161 |               asChild
162 |               className="w-full hover:bg-red-50"
163 |             >
164 |               <a
165 |                 href={link}
166 |                 target="_blank"
167 |                 rel="noopener noreferrer"
168 |                 className="flex items-center justify-center gap-2"
169 |               >
170 |                 🎬 View Movie
171 |               </a>
172 |             </Button>
173 |           </CardFooter>
174 |         </Card>
175 |       );
176 |     }
177 | 
178 |     return null;
179 |   };
180 | 
181 |   return (
182 |     <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-red-50">
183 |       <div className="container mx-auto py-8 px-4">
184 |         <div className="max-w-6xl mx-auto">
185 |           <div className="text-center mb-8">
186 |             <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-red-600 bg-clip-text text-transparent mb-2">
187 |               Movie & Book Recommender
188 |             </h1>
189 |             <p className="text-gray-600 text-lg">
190 |               Discover your next favorite book or movie based on what you love
191 |             </p>
192 |           </div>
193 | 
194 |           <Tabs
195 |             value={activeTab}
196 |             onValueChange={handleTabChange}
197 |             className="w-full"
198 |           >
199 |             <div className="flex justify-center mb-6">
200 |               <TabsList className="grid w-full max-w-md grid-cols-2 bg-white shadow-lg border-0 p-1 rounded-xl">
201 |                 <TabsTrigger
202 |                   value="books"
203 |                   className="rounded-lg data-[state=active]:bg-blue-500 data-[state=active]:text-white transition-all duration-200 flex items-center gap-2"
204 |                 >
205 |                   📚 Books
206 |                 </TabsTrigger>
207 |                 <TabsTrigger
208 |                   value="movies"
209 |                   className="rounded-lg data-[state=active]:bg-red-500 data-[state=active]:text-white transition-all duration-200 flex items-center gap-2"
210 |                 >
211 |                   🎬 Movies
212 |                 </TabsTrigger>
213 |               </TabsList>
214 |             </div>
215 | 
216 |             <TabsContent value="books" className="space-y-6">
217 |               <div className="flex justify-center">
218 |                 <Card className="w-full max-w-lg shadow-xl border-0 bg-white/80 backdrop-blur-sm">
219 |                   <CardHeader className="text-center pb-4">
220 |                     <CardTitle className="text-2xl text-blue-700">
221 |                       📚 Book Recommendations
222 |                     </CardTitle>
223 |                     <CardDescription className="text-gray-600">
224 |                       Tell us about your favorite books and we'll suggest
225 |                       similar ones
226 |                     </CardDescription>
227 |                   </CardHeader>
228 |                   <CardContent>
229 |                     <form
230 |                       onSubmit={(e) => handleSubmit(e, "book")}
231 |                       className="space-y-4"
232 |                     >
233 |                       <div className="space-y-2">
234 |                         <Label
235 |                           htmlFor="books-favorites"
236 |                           className="text-sm font-medium"
237 |                         >
238 |                           Your favorite books
239 |                         </Label>
240 |                         <Input
241 |                           id="books-favorites"
242 |                           type="text"
243 |                           placeholder="e.g., The Great Gatsby, 1984, To Kill a Mockingbird"
244 |                           value={favorites}
245 |                           onChange={(e) => setFavorites(e.target.value)}
246 |                           required
247 |                           className="transition-all duration-200 focus:ring-2 focus:ring-blue-500"
248 |                         />
249 |                         <p className="text-xs text-gray-500">
250 |                           Separate multiple books with commas
251 |                         </p>
252 |                       </div>
253 |                       <div className="space-y-2">
254 |                         <Label
255 |                           htmlFor="books-count"
256 |                           className="text-sm font-medium"
257 |                         >
258 |                           Number of recommendations
259 |                         </Label>
260 |                         <Input
261 |                           id="books-count"
262 |                           type="number"
263 |                           min="1"
264 |                           max="10"
265 |                           value={count}
266 |                           onChange={(e) => setCount(e.target.value)}
267 |                           required
268 |                           className="transition-all duration-200 focus:ring-2 focus:ring-blue-500"
269 |                         />
270 |                       </div>
271 |                       <Button
272 |                         type="submit"
273 |                         className="w-full bg-blue-600 hover:bg-blue-700 transition-colors duration-200"
274 |                         disabled={loading}
275 |                       >
276 |                         {loading ? (
277 |                           <div className="flex items-center gap-2">
278 |                             <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
279 |                             Generating...
280 |                           </div>
281 |                         ) : (
282 |                           "Get Book Recommendations"
283 |                         )}
284 |                       </Button>
285 |                     </form>
286 |                   </CardContent>
287 |                 </Card>
288 |               </div>
289 | 
290 |               {error && (
291 |                 <div className="flex justify-center">
292 |                   <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg max-w-lg">
293 |                     <div className="flex items-center gap-2">
294 |                       <span className="text-red-500">⚠️</span>
295 |                       <p className="text-sm">{error}</p>
296 |                     </div>
297 |                   </div>
298 |                 </div>
299 |               )}
300 | 
301 |               {recommendations.length > 0 && (
302 |                 <div className="space-y-6">
303 |                   <div className="text-center">
304 |                     <h2 className="text-2xl font-semibold text-blue-700 mb-2">
305 |                       Your Book Recommendations
306 |                     </h2>
307 |                     <p className="text-gray-600 mb-4">
308 |                       Based on your favorite books
309 |                     </p>
310 |                     <Button
311 |                       variant="outline"
312 |                       onClick={clearRecommendations}
313 |                       className="hover:bg-blue-50"
314 |                     >
315 |                       Clear Results
316 |                     </Button>
317 |                   </div>
318 |                   <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
319 |                     {recommendations.map((rec, index) => (
320 |                       <RecommendationCard key={index} rec={rec} />
321 |                     ))}
322 |                   </div>
323 |                 </div>
324 |               )}
325 |             </TabsContent>
326 | 
327 |             <TabsContent value="movies" className="space-y-6">
328 |               <div className="flex justify-center">
329 |                 <Card className="w-full max-w-lg shadow-xl border-0 bg-white/80 backdrop-blur-sm">
330 |                   <CardHeader className="text-center pb-4">
331 |                     <CardTitle className="text-2xl text-red-700">
332 |                       🎬 Movie Recommendations
333 |                     </CardTitle>
334 |                     <CardDescription className="text-gray-600">
335 |                       Tell us about your favorite movies and we'll suggest
336 |                       similar ones
337 |                     </CardDescription>
338 |                   </CardHeader>
339 |                   <CardContent>
340 |                     <form
341 |                       onSubmit={(e) => handleSubmit(e, "movie")}
342 |                       className="space-y-4"
343 |                     >
344 |                       <div className="space-y-2">
345 |                         <Label
346 |                           htmlFor="movies-favorites"
347 |                           className="text-sm font-medium"
348 |                         >
349 |                           Your favorite movies
350 |                         </Label>
351 |                         <Input
352 |                           id="movies-favorites"
353 |                           type="text"
354 |                           placeholder="e.g., Inception, The Matrix, Interstellar"
355 |                           value={favorites}
356 |                           onChange={(e) => setFavorites(e.target.value)}
357 |                           required
358 |                           className="transition-all duration-200 focus:ring-2 focus:ring-red-500"
359 |                         />
360 |                         <p className="text-xs text-gray-500">
361 |                           Separate multiple movies with commas
362 |                         </p>
363 |                       </div>
364 |                       <div className="space-y-2">
365 |                         <Label
366 |                           htmlFor="movies-count"
367 |                           className="text-sm font-medium"
368 |                         >
369 |                           Number of recommendations
370 |                         </Label>
371 |                         <Input
372 |                           id="movies-count"
373 |                           type="number"
374 |                           min="1"
375 |                           max="10"
376 |                           value={count}
377 |                           onChange={(e) => setCount(e.target.value)}
378 |                           required
379 |                           className="transition-all duration-200 focus:ring-2 focus:ring-red-500"
380 |                         />
381 |                       </div>
382 |                       <Button
383 |                         type="submit"
384 |                         className="w-full bg-red-600 hover:bg-red-700 transition-colors duration-200"
385 |                         disabled={loading}
386 |                       >
387 |                         {loading ? (
388 |                           <div className="flex items-center gap-2">
389 |                             <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
390 |                             Generating...
391 |                           </div>
392 |                         ) : (
393 |                           "Get Movie Recommendations"
394 |                         )}
395 |                       </Button>
396 |                     </form>
397 |                   </CardContent>
398 |                 </Card>
399 |               </div>
400 | 
401 |               {error && (
402 |                 <div className="flex justify-center">
403 |                   <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg max-w-lg">
404 |                     <div className="flex items-center gap-2">
405 |                       <span className="text-red-500">⚠️</span>
406 |                       <p className="text-sm">{error}</p>
407 |                     </div>
408 |                   </div>
409 |                 </div>
410 |               )}
411 | 
412 |               {recommendations.length > 0 && (
413 |                 <div className="space-y-6">
414 |                   <div className="text-center">
415 |                     <h2 className="text-2xl font-semibold text-red-700 mb-2">
416 |                       Your Movie Recommendations
417 |                     </h2>
418 |                     <p className="text-gray-600 mb-4">
419 |                       Based on your favorite movies
420 |                     </p>
421 |                     <Button
422 |                       variant="outline"
423 |                       onClick={clearRecommendations}
424 |                       className="hover:bg-red-50"
425 |                     >
426 |                       Clear Results
427 |                     </Button>
428 |                   </div>
429 |                   <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
430 |                     {recommendations.map((rec, index) => (
431 |                       <RecommendationCard key={index} rec={rec} />
432 |                     ))}
433 |                   </div>
434 |                 </div>
435 |               )}
436 |             </TabsContent>
437 |           </Tabs>
438 |         </div>
439 |       </div>
440 |     </div>
441 |   );
442 | }
443 | 


--------------------------------------------------------------------------------