mirror of
https://github.com/StepanovPlaton/jelly_belly_wiki.git
synced 2026-04-04 04:40:43 +04:00
09-07
This commit is contained in:
71
src/features/itemInfo/beanInfo.tsx
Normal file
71
src/features/itemInfo/beanInfo.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { BeanType } from "@/entities/item";
|
||||
import { CheckIcon, CrossIcon } from "@/shared/assets/icons";
|
||||
import Image from "next/image";
|
||||
|
||||
const BeanPropertyDescription: { [k in keyof BeanType]?: string } = {
|
||||
glutenFree: "Gluten free",
|
||||
sugarFree: "Sugar free",
|
||||
seasonal: "Seasonal",
|
||||
kosher: "Kosher",
|
||||
};
|
||||
|
||||
export const BeanInfo = ({ item: bean }: { item: BeanType }) => {
|
||||
return (
|
||||
<div className="w-full float-start flex flex-col lp:flex-row">
|
||||
<Image
|
||||
src={bean.imageUrl}
|
||||
alt=""
|
||||
width={1280}
|
||||
height={720}
|
||||
className="w-full lp:max-w-[50%] object-contain float-left p-4"
|
||||
/>
|
||||
<div className="px-4 mb-10">
|
||||
<h1 className="text-4xl pt-4 pb-1">{bean.flavorName}</h1>
|
||||
<span className="text-fg4">{bean.description}</span>
|
||||
<div className="py-1 flex justify-between">
|
||||
<div className="w-1/2">
|
||||
Ingredients:
|
||||
<ul>
|
||||
{bean.ingredients.length > 0 &&
|
||||
bean.ingredients.map((ingredient) => (
|
||||
<li className="text-sm tb:text-xs">- {ingredient}</li>
|
||||
))}
|
||||
</ul>
|
||||
{bean.ingredients.length == 0 && (
|
||||
<span className="text-xl text-fg4">Classified</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-fg1 w-[40%]">
|
||||
<div className="py-2">
|
||||
In theese groups:
|
||||
<ul>
|
||||
{bean.groupName.map((group) => (
|
||||
<li className="text-sm">- {group}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="py-2">
|
||||
Properties:
|
||||
<ul>
|
||||
{(
|
||||
Object.keys(
|
||||
BeanPropertyDescription
|
||||
) as (keyof typeof BeanPropertyDescription)[]
|
||||
).map((property) => (
|
||||
<li className="text-sm flex items-center pt-1">
|
||||
- {BeanPropertyDescription[property]}:{" "}
|
||||
{bean[property] ? (
|
||||
<CheckIcon className="h-5 pl-2" />
|
||||
) : (
|
||||
<CrossIcon className="h-5 pl-2" />
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
2
src/features/itemInfo/index.ts
Normal file
2
src/features/itemInfo/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
import { ItemInfo } from "./itemInfo";
|
||||
export { ItemInfo };
|
||||
32
src/features/itemInfo/itemInfo.tsx
Normal file
32
src/features/itemInfo/itemInfo.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import {
|
||||
BeanType,
|
||||
ItemService,
|
||||
ItemType,
|
||||
RecipeType,
|
||||
TypesOfItems,
|
||||
} from "@/entities/item";
|
||||
import React from "react";
|
||||
import { redirect } from "next/navigation";
|
||||
import { SectionService } from "../sections";
|
||||
import { BeanInfo } from "./beanInfo";
|
||||
import { RecipeInfo } from "./recipeInfo";
|
||||
|
||||
const ItemTypeToInfo = (item: ItemType) => {
|
||||
const ItemInfoComponents = {
|
||||
[TypesOfItems.bean]: <BeanInfo item={item as BeanType} />,
|
||||
[TypesOfItems.recipe]: <RecipeInfo item={item as RecipeType} />,
|
||||
};
|
||||
const typeOfItem = ItemService.GetTypeOfItem(item);
|
||||
if (typeOfItem in ItemInfoComponents)
|
||||
return ItemInfoComponents[typeOfItem as keyof typeof ItemInfoComponents];
|
||||
redirect(
|
||||
"/" +
|
||||
SectionService.sectionsConfiguration[
|
||||
SectionService.itemTypeToSection[ItemService.GetTypeOfItem(item)]
|
||||
].sectionUrl
|
||||
);
|
||||
};
|
||||
|
||||
export const ItemInfo = ({ item }: { item: ItemType }) => {
|
||||
return ItemTypeToInfo(item);
|
||||
};
|
||||
102
src/features/itemInfo/recipeInfo.tsx
Normal file
102
src/features/itemInfo/recipeInfo.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import { RecipeType } from "@/entities/item";
|
||||
import { CheckIcon, CrossIcon } from "@/shared/assets/icons";
|
||||
import Image from "next/image";
|
||||
|
||||
const RecipePropertyDescription: { [k in keyof RecipeType]?: string } = {
|
||||
prepTime: "Prepare time",
|
||||
cookTime: "Cook time",
|
||||
totalTime: "Total time",
|
||||
};
|
||||
const RecipeIngredientsDescription: { [k in keyof RecipeType]?: string } = {
|
||||
ingredients: "Ingredients",
|
||||
additions1: "Additional ingredients",
|
||||
additions2: "Optional additives",
|
||||
additions3: "You can add these products",
|
||||
};
|
||||
const RecipeСookingDescription: { [k in keyof RecipeType]?: string } = {
|
||||
directions: "Directions",
|
||||
tips: "Tips",
|
||||
};
|
||||
|
||||
export const RecipeInfo = ({ item: recipe }: { item: RecipeType }) => {
|
||||
return (
|
||||
<div className="w-full flex flex-col lp:flex-row mb-10 px-4">
|
||||
<Image
|
||||
src={recipe.imageUrl}
|
||||
alt=""
|
||||
width={1280}
|
||||
height={720}
|
||||
className="w-full lp:max-w-[50%] object-cover rounded-lg mt-4"
|
||||
/>
|
||||
<div className="lp:pl-4 text-fg1">
|
||||
<h1 className="text-4xl pt-4 pb-1">{recipe.name}</h1>
|
||||
<span className="text-fg4">{recipe.description}</span>
|
||||
<div className="py-1 flex flex-col-reverse tb:flex-row tb:justify-between">
|
||||
<div className="w-full tb:w-[60%]">
|
||||
{(
|
||||
Object.keys(
|
||||
RecipeСookingDescription
|
||||
) as (keyof typeof RecipeСookingDescription)[]
|
||||
).map((property) => (
|
||||
<>
|
||||
<span className="text-lg">
|
||||
{(recipe[property] as string[]).length > 0 &&
|
||||
RecipeСookingDescription[property] + ":"}
|
||||
</span>
|
||||
<ul>
|
||||
{(recipe[property] as string[]).length > 0 &&
|
||||
(recipe[property] as string[]).map((ingredient) => (
|
||||
<li className="text-sm tb:text-xs">- {ingredient}</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
<div className=" w-full tb:w-[35%]">
|
||||
<div className="py-2">
|
||||
<span className="text-lg">How long does it take:</span>
|
||||
<ul>
|
||||
{(
|
||||
Object.keys(
|
||||
RecipePropertyDescription
|
||||
) as (keyof typeof RecipePropertyDescription)[]
|
||||
).map((property) => (
|
||||
<>
|
||||
{
|
||||
<li className="text-sm flex items-center pt-1">
|
||||
{`- ${RecipePropertyDescription[property]}: ${recipe[property]}`}
|
||||
{recipe[property] == "" && (
|
||||
<span className="text-fg4 pl-1">Classified</span>
|
||||
)}
|
||||
</li>
|
||||
}
|
||||
</>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="py-2">
|
||||
{(
|
||||
Object.keys(
|
||||
RecipeIngredientsDescription
|
||||
) as (keyof typeof RecipeIngredientsDescription)[]
|
||||
).map((property) => (
|
||||
<>
|
||||
<span className="text-lg">
|
||||
{(recipe[property] as string[]).length > 0 &&
|
||||
RecipeIngredientsDescription[property] + ":"}
|
||||
</span>
|
||||
<ul>
|
||||
{(recipe[property] as string[]).length > 0 &&
|
||||
(recipe[property] as string[]).map((ingredient) => (
|
||||
<li className="text-sm tb:text-xs">- {ingredient}</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user