mirror of
https://github.com/kikootwo/ReadMeABook.git
synced 2026-06-03 21:00:09 +00:00
Initial commit
This commit is contained in:
kikootwo
@@ -0,0 +1,83 @@
|
||||
/**
|
||||
* Component: BookDate Loading Screen
|
||||
* Documentation: documentation/features/bookdate-prd.md
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { Header } from '@/components/layout/Header';
|
||||
|
||||
export function LoadingScreen() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
<Header />
|
||||
|
||||
<div className="flex flex-col items-center justify-center min-h-[calc(100vh-80px)] px-4">
|
||||
{/* Animated book cards */}
|
||||
<div className="relative w-64 h-96 mb-8">
|
||||
{/* Card 1 */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-2xl shadow-2xl animate-pulse"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
animationDelay: '0s',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Card 2 */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-2xl shadow-2xl animate-bounce"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
|
||||
animationDelay: '0.2s',
|
||||
opacity: 0.8,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Card 3 */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-2xl shadow-2xl animate-ping"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
||||
animationDelay: '0.4s',
|
||||
opacity: 0.6,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Book icon */}
|
||||
<div className="absolute inset-0 flex items-center justify-center z-10">
|
||||
<span className="text-6xl animate-pulse" style={{ animationDuration: '2s' }}>
|
||||
📚
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading text */}
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
Finding your next great listen...
|
||||
</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Our AI is analyzing your preferences
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Loading dots */}
|
||||
<div className="flex gap-2 mt-6">
|
||||
<div
|
||||
className="w-3 h-3 bg-blue-500 rounded-full animate-bounce"
|
||||
style={{ animationDelay: '0s' }}
|
||||
/>
|
||||
<div
|
||||
className="w-3 h-3 bg-blue-500 rounded-full animate-bounce"
|
||||
style={{ animationDelay: '0.1s' }}
|
||||
/>
|
||||
<div
|
||||
className="w-3 h-3 bg-blue-500 rounded-full animate-bounce"
|
||||
style={{ animationDelay: '0.2s' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,248 @@
|
||||
/**
|
||||
* Component: BookDate Recommendation Card
|
||||
* Documentation: documentation/features/bookdate-prd.md
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import { useSwipeable } from 'react-swipeable';
|
||||
|
||||
interface RecommendationCardProps {
|
||||
recommendation: any;
|
||||
onSwipe: (action: 'left' | 'right' | 'up', markedAsKnown?: boolean) => void;
|
||||
}
|
||||
|
||||
export function RecommendationCard({
|
||||
recommendation,
|
||||
onSwipe,
|
||||
}: RecommendationCardProps) {
|
||||
const [showToast, setShowToast] = useState(false);
|
||||
const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
|
||||
|
||||
const handleSwipeRight = () => {
|
||||
setShowToast(true);
|
||||
};
|
||||
|
||||
const handleToastAction = (action: 'request' | 'known' | 'cancel') => {
|
||||
setShowToast(false);
|
||||
if (action === 'request') {
|
||||
onSwipe('right', false);
|
||||
} else if (action === 'known') {
|
||||
onSwipe('right', true);
|
||||
}
|
||||
};
|
||||
|
||||
const swipeHandlers = useSwipeable({
|
||||
onSwiping: (eventData) => {
|
||||
setDragOffset({ x: eventData.deltaX, y: eventData.deltaY });
|
||||
},
|
||||
onSwiped: (eventData) => {
|
||||
// Check final position when user releases - must be at 100px threshold
|
||||
const finalX = eventData.deltaX;
|
||||
const finalY = eventData.deltaY;
|
||||
const threshold = 100;
|
||||
|
||||
// Determine which direction had the strongest swipe at release
|
||||
if (Math.abs(finalX) > Math.abs(finalY)) {
|
||||
// Horizontal swipe
|
||||
if (finalX > threshold) {
|
||||
handleSwipeRight();
|
||||
} else if (finalX < -threshold) {
|
||||
onSwipe('left');
|
||||
}
|
||||
} else {
|
||||
// Vertical swipe
|
||||
if (finalY < -threshold) {
|
||||
onSwipe('up');
|
||||
}
|
||||
}
|
||||
|
||||
// Reset drag offset
|
||||
setDragOffset({ x: 0, y: 0 });
|
||||
},
|
||||
trackMouse: true,
|
||||
preventScrollOnSwipe: true,
|
||||
// Don't use built-in delta threshold - we'll check manually in onSwiped
|
||||
delta: 0,
|
||||
});
|
||||
|
||||
const getOverlayOpacity = (threshold: number, value: number) => {
|
||||
return Math.min(Math.abs(value) / threshold, 1);
|
||||
};
|
||||
|
||||
// Determine which overlay to show based on dominant direction
|
||||
const getDominantDirection = () => {
|
||||
const absX = Math.abs(dragOffset.x);
|
||||
const absY = Math.abs(dragOffset.y);
|
||||
|
||||
if (absX < 50 && absY < 50) return null; // No overlay if not dragged enough
|
||||
|
||||
if (absX > absY) {
|
||||
return dragOffset.x > 0 ? 'right' : 'left';
|
||||
} else {
|
||||
return dragOffset.y < 0 ? 'up' : null; // Only up swipe for vertical
|
||||
}
|
||||
};
|
||||
|
||||
const dominantDirection = getDominantDirection();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
{...swipeHandlers}
|
||||
className="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden select-none max-h-[80vh] md:max-h-[85vh] flex flex-col"
|
||||
style={{
|
||||
transform: `translate(${dragOffset.x}px, ${dragOffset.y}px) rotate(${dragOffset.x * 0.05}deg)`,
|
||||
transition: dragOffset.x === 0 && dragOffset.y === 0 ? 'transform 0.3s ease-out' : 'none',
|
||||
}}
|
||||
>
|
||||
{/* Drag overlay indicators - show only dominant direction */}
|
||||
{dominantDirection === 'right' && (
|
||||
<div
|
||||
className="absolute inset-0 bg-green-500 flex items-center justify-center pointer-events-none z-10"
|
||||
style={{ opacity: getOverlayOpacity(100, dragOffset.x) * 0.4 }}
|
||||
>
|
||||
<div className="bg-white rounded-full p-6 shadow-lg flex flex-col items-center gap-2">
|
||||
<span className="text-6xl">✅</span>
|
||||
<span className="text-xl font-bold text-green-600">Request</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{dominantDirection === 'left' && (
|
||||
<div
|
||||
className="absolute inset-0 bg-red-500 flex items-center justify-center pointer-events-none z-10"
|
||||
style={{ opacity: getOverlayOpacity(100, dragOffset.x) * 0.4 }}
|
||||
>
|
||||
<div className="bg-white rounded-full p-6 shadow-lg flex flex-col items-center gap-2">
|
||||
<span className="text-6xl">❌</span>
|
||||
<span className="text-xl font-bold text-red-600">Dislike</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{dominantDirection === 'up' && (
|
||||
<div
|
||||
className="absolute inset-0 bg-blue-500 flex items-center justify-center pointer-events-none z-10"
|
||||
style={{ opacity: getOverlayOpacity(100, dragOffset.y) * 0.4 }}
|
||||
>
|
||||
<div className="bg-white rounded-full p-6 shadow-lg flex flex-col items-center gap-2">
|
||||
<span className="text-6xl">⬆️</span>
|
||||
<span className="text-xl font-bold text-blue-600">Dismiss</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Cover image - smaller on mobile to fit all content */}
|
||||
<div className="w-full relative bg-gray-200 dark:bg-gray-700 flex-shrink-0" style={{ maxHeight: 'min(25vh, 300px)' }}>
|
||||
{recommendation.coverUrl ? (
|
||||
<Image
|
||||
src={recommendation.coverUrl}
|
||||
alt={recommendation.title}
|
||||
width={400}
|
||||
height={400}
|
||||
className="object-contain w-full h-auto"
|
||||
style={{ maxHeight: 'min(25vh, 300px)' }}
|
||||
unoptimized
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-48 flex items-center justify-center">
|
||||
<span className="text-6xl">📚</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Book info - reduced padding on mobile */}
|
||||
<div className="p-4 md:p-6 overflow-y-auto flex-1">
|
||||
<h3 className="text-xl md:text-2xl font-bold mb-2 text-gray-900 dark:text-white line-clamp-2">
|
||||
{recommendation.title}
|
||||
</h3>
|
||||
<p className="text-base md:text-lg text-gray-600 dark:text-gray-400 mb-1">
|
||||
{recommendation.author}
|
||||
</p>
|
||||
{recommendation.narrator && (
|
||||
<p className="text-xs md:text-sm text-gray-500 dark:text-gray-500 mb-2">
|
||||
Narrated by {recommendation.narrator}
|
||||
</p>
|
||||
)}
|
||||
{recommendation.rating && (
|
||||
<div className="flex items-center mb-2">
|
||||
<span className="text-yellow-500 text-lg md:text-xl">⭐</span>
|
||||
<span className="ml-2 text-base md:text-lg font-semibold text-gray-700 dark:text-gray-300">
|
||||
{Number(recommendation.rating).toFixed(1)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{recommendation.description && (
|
||||
<p className="text-xs md:text-sm text-gray-700 dark:text-gray-300 line-clamp-3 md:line-clamp-4 mb-2">
|
||||
{recommendation.description}
|
||||
</p>
|
||||
)}
|
||||
{recommendation.aiReason && (
|
||||
<div className="mt-2 md:mt-4 p-2 md:p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
|
||||
<p className="text-xs text-blue-700 dark:text-blue-300 italic line-clamp-3">
|
||||
💡 {recommendation.aiReason}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Desktop buttons */}
|
||||
<div className="hidden md:flex justify-center gap-4 p-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
onClick={() => onSwipe('left')}
|
||||
className="px-6 py-3 bg-red-500 hover:bg-red-600 text-white rounded-full font-medium transition-colors shadow-lg"
|
||||
>
|
||||
❌ Not Interested
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onSwipe('up')}
|
||||
className="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-full font-medium transition-colors shadow-lg"
|
||||
>
|
||||
⬆️ Dismiss
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSwipeRight}
|
||||
className="px-6 py-3 bg-green-500 hover:bg-green-600 text-white rounded-full font-medium transition-colors shadow-lg"
|
||||
>
|
||||
✅ Request
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Confirmation Toast */}
|
||||
{showToast && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full shadow-2xl">
|
||||
<h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
|
||||
Request "{recommendation.title}"?
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
||||
Do you want to request this audiobook, or have you already read/listened to and enjoyed it?
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => handleToastAction('cancel')}
|
||||
className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleToastAction('known')}
|
||||
className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
Mark as Liked
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleToastAction('request')}
|
||||
className="flex-1 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors"
|
||||
>
|
||||
Request
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,257 @@
|
||||
/**
|
||||
* Component: BookDate Settings Widget
|
||||
* Documentation: documentation/features/bookdate.md
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
interface SettingsWidgetProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
isOnboarding?: boolean; // If true, this is first-time onboarding
|
||||
onOnboardingComplete?: () => void; // Called when onboarding is saved
|
||||
}
|
||||
|
||||
export function SettingsWidget({ isOpen, onClose, isOnboarding = false, onOnboardingComplete }: SettingsWidgetProps) {
|
||||
const [libraryScope, setLibraryScope] = useState<'full' | 'rated'>('full');
|
||||
const [customPrompt, setCustomPrompt] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
|
||||
// Load current preferences
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
loadPreferences();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const loadPreferences = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const accessToken = localStorage.getItem('accessToken');
|
||||
const response = await fetch('/api/bookdate/preferences', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${accessToken}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to load preferences');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setLibraryScope(data.libraryScope || 'full');
|
||||
setCustomPrompt(data.customPrompt || '');
|
||||
} catch (error: any) {
|
||||
console.error('Load preferences error:', error);
|
||||
setError(error.message || 'Failed to load preferences');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
setSuccessMessage(null);
|
||||
|
||||
try {
|
||||
const accessToken = localStorage.getItem('accessToken');
|
||||
const trimmedPrompt = customPrompt.trim();
|
||||
const response = await fetch('/api/bookdate/preferences', {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${accessToken}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
libraryScope,
|
||||
customPrompt: trimmedPrompt || null, // Send null if empty
|
||||
onboardingComplete: isOnboarding ? true : undefined,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || 'Failed to save preferences');
|
||||
}
|
||||
|
||||
setSuccessMessage('Preferences saved successfully!');
|
||||
|
||||
// If this is onboarding, call the completion callback after a short delay
|
||||
if (isOnboarding && onOnboardingComplete) {
|
||||
setTimeout(() => {
|
||||
onOnboardingComplete();
|
||||
onClose();
|
||||
}, 500);
|
||||
} else {
|
||||
// Clear success message after 3 seconds for normal saves
|
||||
setTimeout(() => {
|
||||
setSuccessMessage(null);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('Save preferences error:', error);
|
||||
setError(error.message || 'Failed to save preferences');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm z-40 transition-opacity"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Settings Panel */}
|
||||
<div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg bg-white dark:bg-gray-800 rounded-xl shadow-2xl z-50 max-h-[90vh] overflow-y-auto">
|
||||
<div className="p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{isOnboarding ? 'Welcome to BookDate!' : 'BookDate Preferences'}
|
||||
</h2>
|
||||
{isOnboarding && (
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
Customize your recommendations before we begin
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{!isOnboarding && (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 text-2xl leading-none"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Loading State */}
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-300 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Success Message */}
|
||||
{successMessage && (
|
||||
<div className="mb-4 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg text-green-700 dark:text-green-300 text-sm">
|
||||
{successMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Library Scope */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
||||
Library Scope
|
||||
</label>
|
||||
<div className="space-y-3">
|
||||
<label className={`flex items-start p-4 border-2 rounded-lg cursor-pointer transition-all hover:bg-gray-50 dark:hover:bg-gray-700/50 ${libraryScope === 'full' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-600'}`}>
|
||||
<input
|
||||
type="radio"
|
||||
name="libraryScope"
|
||||
value="full"
|
||||
checked={libraryScope === 'full'}
|
||||
onChange={(e) => setLibraryScope(e.target.value as 'full' | 'rated')}
|
||||
className="mt-1 h-4 w-4 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<div className="ml-3 flex-1">
|
||||
<div className="font-medium text-gray-900 dark:text-white">
|
||||
Full Library
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
Get recommendations based on your entire library
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label className={`flex items-start p-4 border-2 rounded-lg cursor-pointer transition-all hover:bg-gray-50 dark:hover:bg-gray-700/50 ${libraryScope === 'rated' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-600'}`}>
|
||||
<input
|
||||
type="radio"
|
||||
name="libraryScope"
|
||||
value="rated"
|
||||
checked={libraryScope === 'rated'}
|
||||
onChange={(e) => setLibraryScope(e.target.value as 'full' | 'rated')}
|
||||
className="mt-1 h-4 w-4 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<div className="ml-3 flex-1">
|
||||
<div className="font-medium text-gray-900 dark:text-white">
|
||||
Rated Books Only
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
Only consider books you've rated for recommendations
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Custom Prompt */}
|
||||
<div className="mb-6">
|
||||
<label htmlFor="customPrompt" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Custom Prompt Modifier
|
||||
<span className="text-gray-500 dark:text-gray-400 font-normal ml-2">
|
||||
(Optional)
|
||||
</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="customPrompt"
|
||||
value={customPrompt}
|
||||
onChange={(e) => setCustomPrompt(e.target.value)}
|
||||
maxLength={1000}
|
||||
rows={4}
|
||||
placeholder="e.g., I prefer mysteries set in historical periods, or narrators with British accents..."
|
||||
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"
|
||||
/>
|
||||
<div className="mt-2 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>Add preferences to guide recommendations</span>
|
||||
<span>{customPrompt.length}/1000</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="flex-1 px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded-lg font-medium transition-colors"
|
||||
>
|
||||
{saving ? 'Saving...' : isOnboarding ? "Let's Go!" : 'Save Preferences'}
|
||||
</button>
|
||||
{!isOnboarding && (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user