File size: 2,606 Bytes
c59d808 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import React from "react";
import SuggestionCard from "./SuggestionCard";
import { Clock, Sparkles, UtensilsCrossed } from "lucide-react";
const EmptyChat = ({
onSuggestionClick,
}: {
onSuggestionClick: (suggestion: string) => void;
}) => {
const suggestions = [
{
Icon: Clock,
backgroundColor: "bg-secondary-100",
iconColor: "primary-600",
iconBackgroundColor: "bg-primary-600/30",
subTitleTextColor: "text-primary-600/70",
titleTextColor: "text-primary-700",
title: "Quick 15-min meals",
subTitle:
"Discover fast and delicious recipes perfect for busy weeknights",
},
{
Icon: UtensilsCrossed,
backgroundColor: "bg-primary-600",
iconColor: "secondary-100",
iconBackgroundColor: "bg-secondary-100/30",
subTitleTextColor: "text-grey-200",
titleTextColor: "text-grey-100",
title: "Seasonal ingredients",
subTitle: "Make the most of fresh, seasonal produce in creative ways",
},
{
Icon: Sparkles,
backgroundColor: "bg-tertiary-100",
iconColor: "primary-600",
iconBackgroundColor: "bg-tertiary-200/50",
subTitleTextColor: "text-primary-600/70",
border: "border border-tertiary-200",
titleTextColor: "text-primary-700",
title: "Healthy meal prep",
subTitle: "Plan nutritious meals that keep you energized all week long",
},
];
return (
<div className="flex flex-col items-center justify-center gap-6 pb-4 min-h-full ">
<h2 className="text-5xl text-primary-600 font-bold">Hey!</h2>
<p className="text-xl text-primary-600/70 text-center">
Ready to create something delicious? Let's explore the world of flavors
together.
</p>
<div className="flex gap-4 flex-wrap justify-center ">
{suggestions.map((suggestion, index) => (
<div
className="cursor-pointer"
key={index}
onClick={() => onSuggestionClick(suggestion.title)}
>
<SuggestionCard
Icon={suggestion.Icon}
backgroundColor={suggestion.backgroundColor}
iconColor={suggestion.iconColor}
iconBackgroundColor={suggestion.iconBackgroundColor}
titleTextColor={suggestion.titleTextColor}
subTitleTextColor={suggestion.subTitleTextColor}
title={suggestion.title}
subTitle={suggestion.subTitle}
border={suggestion.border}
/>
</div>
))}
</div>
</div>
);
};
export default EmptyChat;
|