09-07

src/features/itemCard/beanCard.tsx

@@ -0,0 +1,41 @@
+import { BeanType, TypesOfItems } from "@/entities/item";
+import Link from "next/link";
+import { SectionService } from "@/features/sections";
+import Image from "next/image";
+import React from "react";
+
+export const BeanCard = React.forwardRef<HTMLDivElement, { item: BeanType }>(
+  ({ item: bean }, ref) => {
+    return (
+      <div ref={ref} className="p-4 shadow-md rounded-lg h-full w-full">
+        <Link
+          className="group/itemcard cursor-pointer flex flex-col justify-evenly h-full"
+          href={
+            "/" +
+            SectionService.sectionsConfiguration[
+              SectionService.itemTypeToSection[TypesOfItems.bean]
+            ].sectionUrl +
+            "/" +
+            bean.beanId
+          }
+        >
+          <Image
+            src={bean.imageUrl}
+            alt=""
+            className="w-full rounded-lg object-contain p-4"
+            width={1280}
+            height={720}
+          />
+          <div className="flex items-center justify-between pr-2">
+            <h2 className="text-3xl tb:text-xl py-1 group-hover/itemcard:underline underline-offset-1">
+              {bean.flavorName}
+            </h2>
+          </div>
+          <p className="text-lg tb:text-sm pr-2 text-justify line-clamp-5 text-fg4">
+            {bean.description}
+          </p>
+        </Link>
+      </div>
+    );
+  }
+);

src/features/itemCard/combinationCard.tsx

@@ -0,0 +1,25 @@
+import { CombinationType, TypesOfItems } from "@/entities/item";
+import Link from "next/link";
+import { SectionService } from "@/features/sections";
+import Image from "next/image";
+import React from "react";
+
+export const CombinationCard = React.forwardRef<
+  HTMLDivElement,
+  { item: CombinationType }
+>(({ item: combination }, ref) => {
+  return (
+    <div ref={ref} className="p-4 shadow-md rounded-lg h-full w-full">
+      <div className="flex flex-col justify-between h-full">
+        <div className="flex items-center justify-between pr-2">
+          <h2 className="text-3xl tb:text-xl py-1 underline-offset-1">
+            {combination.name}
+          </h2>
+        </div>
+        <p className="text-lg tb:text-sm pr-2 text-justify line-clamp-5 text-fg4">
+          {combination.tag.join(" ")}
+        </p>
+      </div>
+    </div>
+  );
+});

src/features/itemCard/factCard.tsx

@@ -0,0 +1,27 @@
+import { FactType, TypesOfItems } from "@/entities/item";
+import Link from "next/link";
+import { SectionService } from "@/features/sections";
+import Image from "next/image";
+import React from "react";
+
+export const FactCard = React.forwardRef<HTMLDivElement, { item: FactType }>(
+  ({ item: fact }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className="p-4 shadow-lg shadow-bg1 rounded-lg h-full w-full"
+      >
+        <div className="flex flex-col justify-evenly h-full">
+          <div className="flex items-center justify-between pr-2">
+            <h2 className="text-3xl tb:text-xl py-1 underline-offset-1">
+              {fact.title}
+            </h2>
+          </div>
+          <p className="text-lg tb:text-sm pr-2 text-justify line-clamp-5 text-fg4">
+            {fact.description}
+          </p>
+        </div>
+      </div>
+    );
+  }
+);

src/features/itemCard/index.ts

@@ -0,0 +1,2 @@
+import { ItemCard } from "./itemCard";
+export { ItemCard };

src/features/itemCard/itemCard.tsx

@@ -0,0 +1,39 @@
+import {
+  BeanType,
+  CombinationType,
+  FactType,
+  ItemService,
+  ItemType,
+  RecipeType,
+  TypesOfItems,
+} from "@/entities/item";
+import { BeanCard } from "./beanCard";
+import React from "react";
+import { FactCard } from "./factCard";
+import { RecipeCard } from "./recipeCard";
+import { CombinationCard } from "./combinationCard";
+import { MileStoneCard } from "./mileStoneCard";
+import { MileStoneType } from "@/entities/item/mileStones";
+
+const ItemTypeToCard = (
+  item: ItemType,
+  ref: React.ForwardedRef<HTMLDivElement>
+) => {
+  return {
+    [TypesOfItems.bean]: <BeanCard item={item as BeanType} ref={ref} />,
+    [TypesOfItems.fact]: <FactCard item={item as FactType} ref={ref} />,
+    [TypesOfItems.recipe]: <RecipeCard item={item as RecipeType} ref={ref} />,
+    [TypesOfItems.combination]: (
+      <CombinationCard item={item as CombinationType} ref={ref} />
+    ),
+    [TypesOfItems.mileStone]: (
+      <MileStoneCard item={item as MileStoneType} ref={ref} />
+    ),
+  }[ItemService.GetTypeOfItem(item)];
+};
+
+export const ItemCard = React.forwardRef<HTMLDivElement, { item: ItemType }>(
+  ({ item }, ref) => {
+    return ItemTypeToCard(item, ref);
+  }
+);

src/features/itemCard/mileStoneCard.tsx

@@ -0,0 +1,26 @@
+import { TypesOfItems } from "@/entities/item";
+import Link from "next/link";
+import { SectionService } from "@/features/sections";
+import Image from "next/image";
+import React from "react";
+import { MileStoneType } from "@/entities/item/mileStones";
+
+export const MileStoneCard = React.forwardRef<
+  HTMLDivElement,
+  { item: MileStoneType }
+>(({ item: mileStone }, ref) => {
+  return (
+    <div ref={ref} className="p-4 shadow-md rounded-lg h-full w-full">
+      <div className="flex flex-col justify-between h-full">
+        <div className="flex items-center justify-between pr-2">
+          <h2 className="text-3xl tb:text-xl py-1 underline-offset-1">
+            {mileStone.year}
+          </h2>
+        </div>
+        <p className="text-lg tb:text-sm pr-2 text-justify line-clamp-5 text-fg4">
+          {mileStone.description}
+        </p>
+      </div>
+    </div>
+  );
+});

src/features/itemCard/recipeCard.tsx

@@ -0,0 +1,42 @@
+import { BeanType, RecipeType, TypesOfItems } from "@/entities/item";
+import Link from "next/link";
+import { SectionService } from "@/features/sections";
+import Image from "next/image";
+import React from "react";
+
+export const RecipeCard = React.forwardRef<
+  HTMLDivElement,
+  { item: RecipeType }
+>(({ item: recipe }, ref) => {
+  return (
+    <div ref={ref} className="p-4 shadow-md rounded-lg h-full w-full">
+      <Link
+        className="group/itemcard cursor-pointer flex flex-col justify-between h-full"
+        href={
+          "/" +
+          SectionService.sectionsConfiguration[
+            SectionService.itemTypeToSection[TypesOfItems.recipe]
+          ].sectionUrl +
+          "/" +
+          recipe.recipeId
+        }
+      >
+        <Image
+          src={recipe.imageUrl}
+          alt=""
+          className="w-full rounded-lg object-cover aspect-video"
+          width={1280}
+          height={720}
+        />
+        <div className="flex items-center justify-between pr-2">
+          <h2 className="text-3xl tb:text-base py-1 group-hover/itemcard:underline underline-offset-1">
+            {recipe.name}
+          </h2>
+        </div>
+        <p className="text-lg tb:text-sm pr-2 text-justify line-clamp-5 text-fg4">
+          {recipe.description}
+        </p>
+      </Link>
+    </div>
+  );
+});