planmymeal/app/components/Icons.tsx

import { RiHeart3Line as BookHeart, RiRestaurant2Line as CookingPot, RiCupLine as CupSoda, RiSailboatLine as Fish, RiFireLine as Flame, RiTempHotLine as Heater, RiLeafLine as Leaf, RiArchive2Line as PackageCheck, RiSeedlingLine as Salad, RiBowlLine as Soup, RiTimerLine as Timer, RiRestaurantLine as Utensils, RiWindyLine as Wind, RiFlashlightLine as Zap } from "@remixicon/react";
import type { ComponentProps } from "react";
import type { Appliance, CookingStyle } from "@/app/types";

type RemixiconProps = ComponentProps<typeof Flame>;

export function ApplianceIcon({ id, className = "size-4", ...props }: { id: Appliance } & RemixiconProps) {
  const shared = { className, strokeWidth: 1.75, "aria-hidden": true as const, ...props };
  switch (id) {
    case "stovetop":
      return <Flame {...shared} />;
    case "oven":
      return <Heater {...shared} />;
    case "air_fryer":
      return <Wind {...shared} />;
    case "slow_cooker":
      return <Soup {...shared} />;
    case "microwave":
      return <Zap {...shared} />;
    case "blender":
      return <CupSoda {...shared} />;
    case "rice_cooker":
      return <CookingPot {...shared} />;
  }
}

export function StyleIcon({ id, className = "size-3.5", ...props }: { id: CookingStyle } & RemixiconProps) {
  const shared = { className, strokeWidth: 1.75, "aria-hidden": true as const, ...props };
  switch (id) {
    case "caydens_corner":
      return <BookHeart {...shared} />;
    case "seafood":
      return <Fish {...shared} />;
    case "quick":
      return <Timer {...shared} />;
    case "vegetarian":
      return <Leaf {...shared} />;
    case "healthy":
      return <Salad {...shared} />;
    case "meal_prep":
      return <PackageCheck {...shared} />;
    case "comfort":
      return <Utensils {...shared} />;
  }
}