Muhamad RijalandGitHub
ec13f2c693
* feat(landing): slicing navigation bar * feat(landing): slicing hero section * feat(landing): slicing what we offer section * feat(landing): add animation on hero and what we offer section * feat(landing): slicing testimonial section * feat(landing): change the animation for what we offer section * feat: add utility for readable looping and conditional rendering of components * feat(landing): slicing faq section * feat(landing): change border radius of card on `what we offer` and `testimonial` section * feat(landing): slicing cta section * feat: modify accordion component * feat(landing): add shape background at faq section * feat(landing): slicing footer * feat: toggle header visibility on scroll
28 lines
945 B
TypeScript
28 lines
945 B
TypeScript
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))
|
|
}
|