Add My Bar, Bartender, Recommend features + drink images
- Drink Images: upload/display photos of bottles/cans on drink cards and detail pages - My Bar: inventory tracker for spirits, liqueurs, mixers, bitters, garnishes, tools - Bartender: AI-powered cocktail recipe generation, "what can I make" suggestions, saved recipes. Cross-references bar inventory for ingredient availability. - Recommend: AI flavor profile analysis, personalized drink recommendations, "find similar" drinks based on highly-rated favorites - Navigation: desktop sidebar with all 8 routes, mobile bottom nav with 4 primary items + "More" popup menu - New Prisma models: BarItem, Recipe, FlavorProfile - Backup/restore updated to include bar items Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
JP Scott
252
src/components/recommend/flavor-profile-card.tsx
Normal file
252
src/components/recommend/flavor-profile-card.tsx
Normal file
@@ -0,0 +1,252 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import {
|
||||
RefreshCw,
|
||||
Sparkles,
|
||||
AlertTriangle,
|
||||
ThumbsUp,
|
||||
ThumbsDown,
|
||||
Compass,
|
||||
} from "lucide-react"
|
||||
import type { FlavorProfile, FlavorProfileData } from "@/hooks/use-recommend"
|
||||
|
||||
interface FlavorProfileCardProps {
|
||||
profile: FlavorProfile | null
|
||||
isLoading: boolean
|
||||
isGenerating: boolean
|
||||
error: Error | null
|
||||
generateError: Error | null
|
||||
onGenerate: () => void
|
||||
}
|
||||
|
||||
export function FlavorProfileCard({
|
||||
profile,
|
||||
isLoading,
|
||||
isGenerating,
|
||||
error,
|
||||
generateError,
|
||||
onGenerate,
|
||||
}: FlavorProfileCardProps) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-6 w-40" />
|
||||
<Skeleton className="h-4 w-64" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Skeleton className="h-20 w-full" />
|
||||
<div className="flex gap-2">
|
||||
<Skeleton className="h-6 w-16" />
|
||||
<Skeleton className="h-6 w-20" />
|
||||
<Skeleton className="h-6 w-14" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5 text-primary" />
|
||||
My Flavor Profile
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-destructive">
|
||||
Failed to load your flavor profile. Please try again.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
if (!profile) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5 text-primary" />
|
||||
My Flavor Profile
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Generate an AI-powered analysis of your taste preferences based on
|
||||
your drink ratings.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="text-center py-4">
|
||||
<Sparkles className="h-10 w-10 mx-auto text-muted-foreground/40 mb-3" />
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
Rate at least 3 drinks to unlock your personalized flavor profile.
|
||||
</p>
|
||||
<Button onClick={onGenerate} disabled={isGenerating}>
|
||||
{isGenerating ? (
|
||||
<>
|
||||
<RefreshCw className="h-4 w-4 mr-2 animate-spin" />
|
||||
Analyzing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles className="h-4 w-4 mr-2" />
|
||||
Generate Profile
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
{generateError && (
|
||||
<p className="text-sm text-destructive text-center">
|
||||
{generateError.message}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const data = profile.profileData as FlavorProfileData | null
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5 text-primary" />
|
||||
My Flavor Profile
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Based on {profile.ratingCount} rating
|
||||
{profile.ratingCount !== 1 ? "s" : ""}
|
||||
{" -- "}
|
||||
updated{" "}
|
||||
{new Date(profile.generatedAt).toLocaleDateString()}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onGenerate}
|
||||
disabled={isGenerating}
|
||||
>
|
||||
{isGenerating ? (
|
||||
<RefreshCw className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
{profile.isStale && (
|
||||
<div className="flex items-center gap-2 text-sm text-amber-600 bg-amber-50 dark:bg-amber-950/30 px-3 py-2 rounded-md mt-2">
|
||||
<AlertTriangle className="h-4 w-4 shrink-0" />
|
||||
<span>
|
||||
You have {profile.currentRatingCount - profile.ratingCount} new
|
||||
rating{profile.currentRatingCount - profile.ratingCount !== 1 ? "s" : ""}{" "}
|
||||
since your last profile update. Refresh to get an updated profile.
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm leading-relaxed">{profile.profileText}</p>
|
||||
|
||||
{data && (
|
||||
<>
|
||||
{data.topFlavors && data.topFlavors.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
|
||||
<ThumbsUp className="h-3.5 w-3.5" />
|
||||
Flavors You Love
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{data.topFlavors.map((flavor) => (
|
||||
<Badge key={flavor} variant="secondary">
|
||||
{flavor}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.avoidFlavors && data.avoidFlavors.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
|
||||
<ThumbsDown className="h-3.5 w-3.5" />
|
||||
Flavors to Avoid
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{data.avoidFlavors.map((flavor) => (
|
||||
<Badge key={flavor} variant="outline">
|
||||
{flavor}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.preferredTypes && data.preferredTypes.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
|
||||
Preferred Styles
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{data.preferredTypes.map((type) => (
|
||||
<Badge key={type}>{type}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.adventureScore != null && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
|
||||
<Compass className="h-3.5 w-3.5" />
|
||||
Adventure Score
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-primary rounded-full transition-all"
|
||||
style={{
|
||||
width: `${Math.round(data.adventureScore * 100)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{Math.round(data.adventureScore * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{data.adventureScore >= 0.7
|
||||
? "You love trying new and different things!"
|
||||
: data.adventureScore >= 0.4
|
||||
? "You have a nice balance between favorites and new discoveries."
|
||||
: "You know what you like and stick to it."}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{generateError && (
|
||||
<p className="text-sm text-destructive">
|
||||
{generateError.message}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
94
src/components/recommend/recommendation-card.tsx
Normal file
94
src/components/recommend/recommendation-card.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const TYPE_COLORS: Record<string, string> = {
|
||||
BEER: "bg-amber-500/15 text-amber-700 border-amber-500/25",
|
||||
WINE: "bg-rose-500/15 text-rose-700 border-rose-500/25",
|
||||
COCKTAIL: "bg-purple-500/15 text-purple-700 border-purple-500/25",
|
||||
SPIRIT: "bg-sky-500/15 text-sky-700 border-sky-500/25",
|
||||
OTHER: "bg-slate-500/15 text-slate-700 border-slate-500/25",
|
||||
}
|
||||
|
||||
const TYPE_LABELS: Record<string, string> = {
|
||||
BEER: "Beer",
|
||||
WINE: "Wine",
|
||||
COCKTAIL: "Cocktail",
|
||||
SPIRIT: "Spirit",
|
||||
OTHER: "Other",
|
||||
}
|
||||
|
||||
interface RecommendationCardProps {
|
||||
name: string
|
||||
type: string
|
||||
subType?: string
|
||||
brewery?: string
|
||||
reason: string
|
||||
score: number
|
||||
scoreLabel?: string
|
||||
}
|
||||
|
||||
export function RecommendationCard({
|
||||
name,
|
||||
type,
|
||||
subType,
|
||||
brewery,
|
||||
reason,
|
||||
score,
|
||||
scoreLabel = "Match",
|
||||
}: RecommendationCardProps) {
|
||||
const percentage = Math.round(score * 100)
|
||||
|
||||
return (
|
||||
<Card className="overflow-hidden">
|
||||
<CardContent className="p-4 space-y-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="font-semibold leading-tight">{name}</h4>
|
||||
{subType && (
|
||||
<p className="text-sm text-muted-foreground mt-0.5">
|
||||
{subType}
|
||||
</p>
|
||||
)}
|
||||
{brewery && (
|
||||
<p className="text-sm text-muted-foreground">{brewery}</p>
|
||||
)}
|
||||
</div>
|
||||
<Badge
|
||||
className={cn(
|
||||
"shrink-0 text-[11px]",
|
||||
TYPE_COLORS[type] || TYPE_COLORS.OTHER
|
||||
)}
|
||||
>
|
||||
{TYPE_LABELS[type] || type}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
{reason}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
|
||||
<div
|
||||
className={cn(
|
||||
"h-full rounded-full transition-all",
|
||||
percentage >= 80
|
||||
? "bg-green-500"
|
||||
: percentage >= 60
|
||||
? "bg-yellow-500"
|
||||
: "bg-orange-500"
|
||||
)}
|
||||
style={{ width: `${percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground whitespace-nowrap">
|
||||
{percentage}% {scoreLabel}
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
149
src/components/recommend/similar-section.tsx
Normal file
149
src/components/recommend/similar-section.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Select } from "@/components/ui/select"
|
||||
import { GitCompareArrows, RefreshCw } from "lucide-react"
|
||||
import { RecommendationCard } from "./recommendation-card"
|
||||
import { useSimilarDrinks } from "@/hooks/use-recommend"
|
||||
import type { SimilarDrink } from "@/hooks/use-recommend"
|
||||
|
||||
interface DrinkOption {
|
||||
id: string
|
||||
name: string
|
||||
type: string
|
||||
}
|
||||
|
||||
interface SimilarSectionProps {
|
||||
drinks: DrinkOption[]
|
||||
drinksLoading: boolean
|
||||
}
|
||||
|
||||
export function SimilarSection({
|
||||
drinks,
|
||||
drinksLoading,
|
||||
}: SimilarSectionProps) {
|
||||
const [selectedDrinkId, setSelectedDrinkId] = useState("")
|
||||
const similarDrinks = useSimilarDrinks()
|
||||
const [results, setResults] = useState<SimilarDrink[]>([])
|
||||
const [sourceName, setSourceName] = useState("")
|
||||
|
||||
function handleFindSimilar() {
|
||||
if (!selectedDrinkId) return
|
||||
|
||||
similarDrinks.mutate(
|
||||
{ drinkId: selectedDrinkId },
|
||||
{
|
||||
onSuccess: (data) => {
|
||||
setResults(data.recommendations)
|
||||
setSourceName(data.sourceDrink)
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<GitCompareArrows className="h-5 w-5 text-primary" />
|
||||
Find Similar Drinks
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Pick a drink you love and discover similar ones you might enjoy.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{drinksLoading ? (
|
||||
<Skeleton className="h-10 w-full" />
|
||||
) : drinks.length === 0 ? (
|
||||
<div className="text-center py-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Add some drinks to your collection to find similar ones.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<div className="flex-1">
|
||||
<Select
|
||||
value={selectedDrinkId}
|
||||
onChange={(e) => setSelectedDrinkId(e.target.value)}
|
||||
disabled={similarDrinks.isPending}
|
||||
>
|
||||
<option value="">Select a drink...</option>
|
||||
{drinks.map((drink) => (
|
||||
<option key={drink.id} value={drink.id}>
|
||||
{drink.name} ({drink.type.charAt(0) + drink.type.slice(1).toLowerCase()})
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleFindSimilar}
|
||||
disabled={!selectedDrinkId || similarDrinks.isPending}
|
||||
className="sm:w-auto"
|
||||
>
|
||||
{similarDrinks.isPending ? (
|
||||
<>
|
||||
<RefreshCw className="h-4 w-4 mr-2 animate-spin" />
|
||||
Searching...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<GitCompareArrows className="h-4 w-4 mr-2" />
|
||||
Find Similar
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{similarDrinks.isPending && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{Array.from({ length: 3 }, (_, i) => (
|
||||
<Skeleton key={i} className="h-[140px] rounded-lg" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{similarDrinks.isError && (
|
||||
<p className="text-sm text-destructive">
|
||||
{similarDrinks.error.message}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{results.length > 0 && !similarDrinks.isPending && (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Drinks similar to <span className="font-medium text-foreground">{sourceName}</span>:
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{results.map((drink, i) => (
|
||||
<RecommendationCard
|
||||
key={`${drink.name}-${i}`}
|
||||
name={drink.name}
|
||||
type={drink.type}
|
||||
subType={drink.subType}
|
||||
brewery={drink.brewery}
|
||||
reason={drink.reason}
|
||||
score={drink.similarity}
|
||||
scoreLabel="Similar"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
151
src/components/recommend/suggest-section.tsx
Normal file
151
src/components/recommend/suggest-section.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Lightbulb, RefreshCw } from "lucide-react"
|
||||
import { RecommendationCard } from "./recommendation-card"
|
||||
import { useSuggestDrinks } from "@/hooks/use-recommend"
|
||||
import type { DrinkSuggestion } from "@/hooks/use-recommend"
|
||||
|
||||
interface SuggestSectionProps {
|
||||
hasProfile: boolean
|
||||
}
|
||||
|
||||
export function SuggestSection({ hasProfile }: SuggestSectionProps) {
|
||||
const [mood, setMood] = useState("")
|
||||
const [occasion, setOccasion] = useState("")
|
||||
const suggestDrinks = useSuggestDrinks()
|
||||
const [results, setResults] = useState<DrinkSuggestion[]>([])
|
||||
|
||||
function handleSuggest() {
|
||||
suggestDrinks.mutate(
|
||||
{
|
||||
mood: mood.trim() || undefined,
|
||||
occasion: occasion.trim() || undefined,
|
||||
},
|
||||
{
|
||||
onSuccess: (data) => {
|
||||
setResults(data.recommendations)
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Lightbulb className="h-5 w-5 text-primary" />
|
||||
What Should I Drink?
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Get personalized drink suggestions based on your flavor profile.
|
||||
Optionally add your mood or the occasion.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{!hasProfile ? (
|
||||
<div className="text-center py-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Generate your flavor profile above to unlock personalized
|
||||
suggestions.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<label
|
||||
htmlFor="mood"
|
||||
className="text-sm font-medium text-muted-foreground"
|
||||
>
|
||||
Mood (optional)
|
||||
</label>
|
||||
<Input
|
||||
id="mood"
|
||||
placeholder='e.g., "Relaxed", "Celebrating"'
|
||||
value={mood}
|
||||
onChange={(e) => setMood(e.target.value)}
|
||||
disabled={suggestDrinks.isPending}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label
|
||||
htmlFor="occasion"
|
||||
className="text-sm font-medium text-muted-foreground"
|
||||
>
|
||||
Occasion (optional)
|
||||
</label>
|
||||
<Input
|
||||
id="occasion"
|
||||
placeholder='e.g., "Dinner party", "After work"'
|
||||
value={occasion}
|
||||
onChange={(e) => setOccasion(e.target.value)}
|
||||
disabled={suggestDrinks.isPending}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={handleSuggest}
|
||||
disabled={suggestDrinks.isPending}
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
{suggestDrinks.isPending ? (
|
||||
<>
|
||||
<RefreshCw className="h-4 w-4 mr-2 animate-spin" />
|
||||
Finding drinks...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Lightbulb className="h-4 w-4 mr-2" />
|
||||
Suggest Drinks
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{suggestDrinks.isPending && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{Array.from({ length: 3 }, (_, i) => (
|
||||
<Skeleton key={i} className="h-[140px] rounded-lg" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{suggestDrinks.isError && (
|
||||
<p className="text-sm text-destructive">
|
||||
{suggestDrinks.error.message}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{results.length > 0 && !suggestDrinks.isPending && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{results.map((drink, i) => (
|
||||
<RecommendationCard
|
||||
key={`${drink.name}-${i}`}
|
||||
name={drink.name}
|
||||
type={drink.type}
|
||||
subType={drink.subType}
|
||||
brewery={drink.brewery}
|
||||
reason={drink.reason}
|
||||
score={drink.matchScore}
|
||||
scoreLabel="Match"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user