feat: add utility for readable looping and conditional rendering of components

apps/dimentorin/src/app/(public)/(home)/_components/testimonial-section.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { For } from '@imphnen-frontend-service/utils'
 import { FC, useRef } from 'react'
 import { motion, useInView, Variants } from 'framer-motion'
-import { For } from '../../../_components/logic/for'
 import { StarFilled } from '@ant-design/icons'
 
 export const TestimonialSection: FC = () => {

apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { For } from "@imphnen-frontend-service/utils";
 import { FC, useRef } from "react";
 import { motion, useInView, Variants } from 'framer-motion'
-import { For } from "../../../_components/logic/for";
 
 const OFFERS: { title: string; description: string; image: string }[] = [
   { title: "AI-Powered Learning", description: "Level Up Instantly!", image: "/image/what-we-offer/ai-powered-learning.webp" },

apps/dimentorin/src/app/(public)/_components/header.tsx

@@ -1,10 +1,8 @@
 import { CloseOutlined, MenuOutlined } from "@ant-design/icons";
 import { Button } from "@imphnen-frontend-service/ui/atoms";
-import { cn } from "@imphnen-frontend-service/utils";
+import { cn, For, Show } from "@imphnen-frontend-service/utils";
 import { FC, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
-import { For } from "../../_components/logic/for";
-import { Show } from "../../_components/logic/show";
 
 const MENUS: { label: string; href: string }[] = [
   { label: "Home", href: "/" },

apps/dimentorin/src/app/_components/logic/for.tsx

@@ -1,27 +0,0 @@
-export interface ForProps<T, U> {
-  data: readonly T[]
-  children: (item: T, index: number) => U | null
-  fallback?: React.ReactNode | null
-}
-
-/**
- * A functional component that renders a list of children components from a given
- * array of data.
- *
- * @param data - The array of data to render
- * @param children - A function that takes the current item and index and returns
- *                   the child component to render
- * @param fallback - An optional fallback component to render when the data is empty
- *
- * @returns An array of rendered child components if the data is not empty, otherwise
- *          the fallback component if it is provided, null otherwise
- */
-export function For<T, U extends React.JSX.Element>({
-  data,
-  children,
-  fallback = null
-}: ForProps<T, U>): (U | null)[] | React.ReactNode | null {
-  if (!Array.isArray(data) || !data?.length) return fallback
-
-  return data.map((item, idx) => children(item, idx))
-}

apps/dimentorin/src/app/_components/logic/show.tsx

@@ -1,19 +0,0 @@
-export interface ShowProps {
-  condition: boolean
-  children: React.ReactNode
-  fallback?: React.ReactNode | null
-}
-
-/**
- * Conditionally renders the `children` component if `condition` is true. If
- * `condition` is false, renders the `fallback` component instead.
- *
- * If `fallback` is `null`, renders nothing.
- *
- * @param condition - The condition to check
- * @param children - The component to render if `condition` is true
- * @param fallback - The component to render if `condition` is false
- */
-export function Show({ condition, children, fallback = null }: ShowProps) {
-  return condition ? children : fallback
-}