33 creating UI filter component

src/app/page.tsx

@@ -3,6 +3,7 @@ import Navbar from "@/components/Navbar";
 import RecipeSummary from "@/components/RecipeSummary";
 import WeeklyMenu from "@/components/WeeklyMenu";
 import ComboCard from "@/components/ComboCard";
+import CalendarRecipeItem from "@/components/CalendarRecipeItem";
 
 export default function Home() {
   const today = new Date();
@@ -26,6 +27,9 @@ export default function Home() {
       <RecipeSummary id={"recipe_test_001"} />
       <RecipeSummary id={"mango"} />
       <RecipeSummary id={"masdf"} />
+      <div className="w-100">
+        <CalendarRecipeItem name="Spaghetti Bolognese" calories={850} servingSize="1 plate" tags={["Entree"]} />
+      </div>
     </main>
   );
 }

src/components/CalendarRecipeItem.tsx

@@ -0,0 +1,39 @@
+import { GripVertical } from "lucide-react";
+
+export type CalendarRecipeItemProps = {
+  name: string;
+  calories?: number;
+  servingSize?: string;
+  tags?: string[];
+};
+
+const TAG_STYLES: Record<string, string> = {
+  Combo: "bg-combo-500 text-combo-900",
+  Sides: "bg-lime text-black",
+  Fruit: "bg-fruit-900 text-white",
+  Entree: "bg-entree-900 text-white",
+  Entrée: "bg-entree-900 text-white",
+  fallback: "bg-pepper text-white",
+};
+
+export default function CalendarRecipeItem({ name, calories, servingSize, tags = [] }: CalendarRecipeItemProps) {
+  const caloriesText = calories != null ? `${calories} cal` : null;
+  const servingText = servingSize != null ? `${servingSize}` : null;
+  const metaText = caloriesText && servingText ? `${caloriesText} / ${servingText}` : caloriesText || servingText;
+
+  const primaryTag = tags[0];
+  const tagStyle = (primaryTag && TAG_STYLES[primaryTag]) ?? TAG_STYLES.fallback;
+
+  return (
+    <div className={`flex items-center gap-3 rounded-xl px-4 py-3 font-montserrat ${tagStyle}`}>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-xl leading-tight font-bold" title={name}>
+          {name}
+        </p>
+        {metaText ? <p className="mt-1 text-lg leading-tight font-medium">{metaText}</p> : null}
+      </div>
+
+      <GripVertical className="h-7 w-7 shrink-0 text-current" aria-hidden="true" />
+    </div>
+  );
+}