naria-ui 0.1.0

package/components/lib-file-uploader/LibFileUploader.tsx

@@ -0,0 +1,124 @@
+"use client"
+import {FC, useEffect, useRef, useState} from "react";
+import CloudArrowUp from '@/assets/icons/cloud-arrow-up.svg'
+import LibButton from "@/components/lib/lib-button/LibButton";
+import convertFileSize from "@/utils/convert-file-size";
+import Loading from "@/components/shared/loading/Loading";
+
+export interface props {
+    isLoading: boolean;
+    onFileChange?: any;
+}
+
+const LibFileUploader: FC<props> = ({isLoading = true, onFileChange}) => {
+    const labelRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [selectedFile, setSelectedFile] = useState(null);
+
+    const handleDragEnter = (e) => {
+        e.preventDefault();
+        setIsDragging(true);
+    };
+
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        setIsDragging(false);
+    };
+
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        setIsDragging(true);
+    };
+
+    const handleDrop = (e) => {
+        e.preventDefault();
+        if (isLoading) {
+            return;
+        }
+        setIsDragging(false);
+        const file = e?.target?.files ? e?.target?.files[0] : e?.dataTransfer?.files[0];
+        if (file) {
+            setSelectedFile(file);
+        }
+    };
+    const onCancel = () => {
+        setSelectedFile(null)
+    }
+    const onUpload = () => {
+        onFileChange(selectedFile)
+    }
+    useEffect(() => {
+        if(!isLoading) {
+            setSelectedFile(null);
+        }
+    }, [isLoading])
+    return (
+
+        <div className="relative border border-dashed border-secondary-100/40 rounded-2xl overflow-hidden">
+            <label
+                ref={labelRef}
+                className={`py-10 px-6 block ${isDragging ? 'border-secondary-100/100 bg-secondary-100/5' : ''}`}
+                onDragEnter={handleDragEnter}
+                onDragLeave={handleDragLeave}
+                onDragOver={handleDragOver}
+                onDrop={handleDrop}
+            >
+                <div className="flex flex-col md:flex-row justify-center items-center gap-16">
+                    <div className="flex gap-5 items-center flex-col md:flex-row">
+                        <CloudArrowUp className="w-10 mt-2.5 shrink-0"/>
+                        <div>
+                            <p className="text-base font-bold">جهت انتخاب فایل کلیک کرده یا فایل مورد نظر را اینجا رها
+                                کنید.</p>
+                            <p className="text-sm text-secondary-100 mt-2">فایل‌های قابل انتخاب: PNG، JPEG، MP4</p>
+                            <p className="text-sm text-secondary-100 mt-2">حداکثر حجم مجاز: 2 مگابایت</p>
+                        </div>
+                    </div>
+
+                    <input type="file" accept="image/png, image/jpeg, image/jpg, video/mp4"
+                           value=""
+                           onChange={handleDrop} className="hidden"/>
+                    <div className="sm:max-w-[120px] w-full">
+                        <LibButton theme="btn-info-light" onClick={() => labelRef.current.click()} value="انتخاب فایل"/>
+                    </div>
+
+                </div>
+
+
+            </label>
+            {
+                selectedFile && !isLoading ? (
+                    <div className="absolute bg-light-100 top-0 right-0 w-full h-full flex items-center">
+                        <div className="text-sm mx-auto w-full max-w-[250px]">
+                            <p className="flex gap-1"><span className="text-secondary-100 shrink-0">نام فایل:</span>
+                                <span
+                                    className="inline-block ltr text-ellipsis overflow-hidden truncate">{selectedFile?.name}</span>
+                            </p>
+                            <p><span
+                                className="text-secondary-100">حجم فایل:</span> {convertFileSize(selectedFile?.size)}
+                            </p>
+                            <div className="flex mt-4 gap-2">
+
+                                <div className="grow">
+                                    <LibButton value="انصراف" size="btn-sm" theme="btn-danger-light" onClick={onCancel}/>
+                                </div>
+                                <div className="grow">
+                                    <LibButton value="تایید" size="btn-sm" theme="btn-success" onClick={onUpload}/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                ) : undefined
+            }
+            {
+                selectedFile && isLoading ? (
+                    <div className="absolute bg-light-100 top-0 right-0 w-full h-full flex items-center gap-3 justify-center">
+                        <Loading size="w-6.5 h-6.5" /> <span>در حال بارگزاری...</span>
+                    </div>
+                ) : undefined
+            }
+
+        </div>
+    );
+};
+
+export default LibFileUploader;

package/components/lib-pagination/LibPagination.tsx

@@ -0,0 +1,198 @@
+"use client"
+import {FC, useEffect, useState} from "react";
+import ArrowRight from "@/assets/icons/angle-right.svg";
+import ArrowLeft from "@/assets/icons/angle-left.svg";
+import {generateUuid} from '@/utils/generate-uuid';
+
+export interface props {
+    theme?: "primary" | "secondary" | "warning" | "infoLight" | "dangerLight" | "infoLink" | "outlineSecondary" | "outlinePrimary";
+    activeTheme?: "primary" | "secondary" | "warning" | "infoLight" | "dangerLight" | "infoLink" | "outlineSecondary" | "outlinePrimary";
+    size?: "md" | "sm";
+    totalCount: number;
+    pageSize: number;
+    onPageChange: any;
+    selectedPage?: any;
+}
+
+const sizes = {
+    sm: "text-xs h-8 min-w-8",
+    md: "text-sm h-10 min-w-10"
+}
+const sizesArrow = {
+    sm: "w-2.5",
+    md: "w8"
+}
+
+export const buttonThemes = {
+    primary: `border border-transparent bg-primary-100 text-white hover:bg-primary-200 focus:bg-primary-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    secondary: `border border-transparent bg-secondary-100 text-white hover:bg-secondary-200 focus:bg-secondary-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    success: `border border-transparent bg-success-100 text-white hover:bg-success-200 focus:bg-success-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    warning: `border border-transparent bg-warning-100 text-dark-100 hover:bg-warning-200 focus:bg-warning-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    infoLight: `border border-transparent bg-info-100/10 text-info-100 hover:brightness-80 focus:brightness-80 hover:border-info-100 focus:border-info-100 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    dangerLight: `border border-transparent bg-danger-300 text-danger-100 hover:bg-danger-400 focus:bg-danger-400 hover:border-danger-100 focus:border-danger-100 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    infoLink: `text-info-100 hover:text-info-200 focus:text-info-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    outlinePrimary: `border border-primary-100 text-primary-100 hover:bg-primary-300 focus:bg-primary-300 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    outlineSecondary: `border border-secondary-100 text-secondary-100 enabled:hover:bg-grey-200 focus:bg-grey-200 disabled:text-grey-300 disabled:border-grey-200 disabled:fill-grey-200 disabled:cursor-not-allowed`,
+}
+export const activeThemes = {
+    primary: `border border-transparent bg-primary-100 text-white hover:bg-primary-200 focus:bg-primary-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    secondary: `border border-transparent bg-secondary-100 text-white hover:bg-secondary-200 focus:bg-secondary-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    success: `border border-transparent bg-success-100 text-white hover:bg-success-200 focus:bg-success-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    warning: `border border-transparent bg-warning-100 !text-dark-100 hover:bg-warning-200 focus:bg-warning-200 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    infoLight: `border border-transparent bg-info-100/10 text-info-100 hover:brightness-80 focus:brightness-80 hover:border-info-100 focus:border-info-100 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    dangerLight: `border border-transparent bg-danger-300 text-danger-100 hover:bg-danger-400 focus:bg-danger-400 hover:border-danger-100 focus:border-danger-100 disabled:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    infoLink: `text-info-100 hover:text-info-200 focus:text-info-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    outlinePrimary: `transition duration-200 ease border border-primary-100 text-primary-100 hover:bg-primary-300 focus:bg-primary-300 disabled:text-grey-300 disabled:cursor-not-allowed`,
+    outlineSecondary: `border border-secondary-100 text-secondary-100 hover:bg-grey-200 focus:bg-grey-200 disabled:text-grey-300 disabled:cursor-not-allowed`,
+}
+export const dotsThemes = {
+    outlineSecondary: `text-secondary-100`,
+}
+export const arrowThemes = {
+    outlineSecondary: `fill-secondary-100`,
+}
+
+const LibPagination: FC<props> = ({
+                                      totalCount,
+                                      pageSize,
+                                      onPageChange,
+                                      selectedPage,
+                                      activeTheme = "primary",
+                                      theme = "primary",
+                                      size = "md"
+                                  }) => {
+    const [selected, setSelected] = useState(1);
+    const [pagesCount, setPagesCount] = useState(1);
+    const [list, setList] = useState([]);
+    const onPaginationClicked = (item: number) => {
+        setSelected(item);
+        onPageChange(+item);
+    };
+    useEffect(() => {
+        onPagesCountHandler();
+    }, [totalCount]);
+    useEffect(() => {
+        setSelected(1);
+        onPagesCountHandler();
+    }, [pageSize]);
+    const onPagesCountHandler = () => {
+        const totalPages =
+            totalCount < pageSize ? 1 : Math.ceil(totalCount / pageSize);
+        setPagesCount(totalPages);
+    };
+    useEffect(() => {
+        generatePages();
+    }, [selected, pagesCount, totalCount]);
+    useEffect(() => {
+        if (selectedPage) {
+            setSelected(selectedPage);
+        }
+    }, [selectedPage]);
+
+    const generatePages = () => {
+        const list: any = [];
+        if (totalCount > 0) {
+            list.push(
+                <button
+                    className={`rounded-lg flex items-center justify-center ${buttonThemes[theme]} ${sizes[size]} ${arrowThemes[theme]}`}
+                    disabled={selected === 1}
+                    onClick={() => onPaginationClicked(selected - 1)}
+                    key={generateUuid()}>
+                    <ArrowRight className={`${sizesArrow[size]}`}/>
+                </button>
+            );
+            if (pagesCount <= 5) {
+                for (let i = 1; i <= pagesCount; i++) {
+                    list.push(
+                        <button
+                            className={`rounded-lg flex items-center justify-center ${sizes[size]} ${selected === i ? activeThemes[activeTheme] : buttonThemes[theme]}`}
+
+                            onClick={() => onPaginationClicked(i)}
+                            key={generateUuid()}
+                        >
+                            {i}
+                        </button>
+                    );
+                }
+            } else {
+                if (selected > pagesCount - 3) {
+                    list.push(
+                        <button
+                            className={`rounded-lg flex items-center justify-center ${sizes[size]} ${selected === 1 ? activeThemes[activeTheme] : buttonThemes[theme]}`}
+                            onClick={() => onPaginationClicked(1)}
+                            key={generateUuid()}
+                        >
+                            {1}
+                        </button>
+                    );
+                    list.push(
+                        <div
+                            className={`rounded-lg flex items-center justify-center ${dotsThemes[theme]} ${sizes[size]}`}
+                            key={generateUuid()}>
+                            ...
+                        </div>
+                    );
+                    for (let i = pagesCount - 3; i <= pagesCount; i++) {
+                        list.push(
+                            <button
+                                className={`rounded-lg flex items-center justify-center ${sizes[size]} ${selected === i ? activeThemes[activeTheme] : buttonThemes[theme]}`}
+                                onClick={() => onPaginationClicked(i)}
+                                key={generateUuid()}
+                            >
+                                {i}
+                            </button>
+                        );
+                    }
+                } else {
+                    const maxPage = selected < 3 ? 4 : selected + 2;
+                    const fromPage = selected < 3 ? 1 : selected - 1;
+                    for (let i = fromPage; i <= maxPage; i++) {
+                        list.push(
+                            <button
+                                className={`rounded-lg flex items-center justify-center ${sizes[size]} ${selected === i ? activeThemes[activeTheme] : buttonThemes[theme]}`}
+                                onClick={() => onPaginationClicked(i)}
+                                key={generateUuid()}
+                            >
+                                {i}
+                            </button>
+                        );
+                    }
+                    list.push(
+                        <div
+                            className={`rounded-lg flex items-center justify-center ${dotsThemes[theme]} ${sizes[size]}`}
+                            key={generateUuid()}>
+                            ...
+                        </div>
+                    );
+                    list.push(
+                        <button
+                            className={`rounded-lg flex items-center justify-center ${sizes[size]} ${selected === pagesCount ? activeThemes[activeTheme] : buttonThemes[theme]}`}
+                            onClick={() => onPaginationClicked(pagesCount)}
+                            key={generateUuid()}
+                        >
+                            {pagesCount}
+                        </button>
+                    );
+                }
+            }
+            list.push(
+                <button
+                    className={`rounded-lg flex items-center justify-center ${buttonThemes[theme]} ${sizes[size]} ${arrowThemes[theme]}`}
+                    disabled={selected === pagesCount}
+                    onClick={() => onPaginationClicked(selected + 1)}
+                    key={generateUuid()}
+                >
+                    <ArrowLeft className={`${sizesArrow[size]}`}/>
+                </button>
+            );
+        }
+        setList(list);
+    };
+    return (
+        <div className="flex items-center justify-center rounded-xl gap-2">
+            {list}
+        </div>
+    );
+};
+
+export default LibPagination;

package/components/modal/Modal.tsx

@@ -0,0 +1,88 @@
+"use client"
+import {FC, forwardRef, useEffect, useImperativeHandle, useState} from "react";
+import Close from '@/assets/icons/close.svg'
+import {useWidth} from '@/hooks/use-width';
+import {addNavigation, onHashChanges, removeNavigation} from "@/utils/navigator/navigator-v2";
+
+export interface LibModalProps {
+    title?: string;
+    children?: React.ReactNode;
+    size?: string;
+    height?: string;
+}
+
+export interface LibModalRef {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+
+const Modal = forwardRef<LibModalRef, LibModalProps>(({title, size, height, children}, ref) => {
+    const getDeviceWidth = useWidth();
+    const isHashChanged = onHashChanges();
+    const [isShow, setIsShow] = useState(false);
+
+    const open = () => setIsShow(true);
+    const close = () => setIsShow(false);
+    const toggle = () => setIsShow((v) => !v);
+
+    useImperativeHandle(ref, () => ({open, close, toggle}), []);
+
+    const onBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (e.currentTarget === e.target) close();
+    };
+
+    useEffect(() => {
+        if (isHashChanged) {
+            close();
+        }
+    }, [isHashChanged])
+
+    useEffect(() => {
+        if (getDeviceWidth < 1024) {
+            if (isShow) {
+                addNavigation()
+            } else {
+                removeNavigation();
+            }
+        }
+        document.body.style.overflow = isShow ? "hidden" : "auto";
+        return () => {
+            document.body.style.overflow = "auto";
+        };
+
+    }, [isShow]);
+    
+    return isShow ? (
+        <div
+            className={`backdrop bg-dark-100/30 fixed items-end justify-center px-4 md:px-10 lg:px-0 
+            lg:place-items-center flex right-0 top-0 left-0 bottom-0 w-full h-full z-50 duration-200 transition-opacity ${
+                isShow ? "opacity-1" : "opacity-0 hidden pointer-events-none"
+            }`}
+            onClick={onBackdropClick}
+        >
+            <div
+                className={`transform p-3 md:p-5 rounded-t-2xl lg:rounded-2xl bg-grey-100 shadow-xl transition-opacity
+                 duration-200 lg:h-auto w-full ${
+                    size || " lg:max-w-2xl"
+                } ${isShow ? "opacity-1" : "opacity-0 pointer-events-none"} ${
+                    getDeviceWidth < 1024 ? `${height ? height : "h-[90vh]"} animate-drawer-bottom-to-top` : `${height ? height : "h-full"} animate-fade-in-translate-y`
+                }`}
+            >
+                <div className="flex items-center justify-between">
+                    <div className="font-bold text-base lg:text-lg">{title ?? ""}</div>
+                    <button className="inline-block" onClick={close}>
+                        <Close className="w-6"/>
+                    </button>
+                </div>
+                <div
+                    className="h-full overflow-y-auto mt-3 md:mt-5 max-h-[calc(100%-40px)] lg:max-h-[calc(100vh-90px)]">
+                    {children}
+                </div>
+            </div>
+        </div>
+    ) : <></>;
+});
+
+Modal.displayName = "LibModal";
+export default Modal;

package/components/select/Select.tsx

@@ -0,0 +1,210 @@
+"use client"
+import {FC, useEffect, useState} from "react";
+import AngleDown from "@/assets/icons/angle-down.svg";
+import Close from '@/assets/icons/close.svg';
+import Loading from '@/components/shared/loading/Loading';
+import {useWidth} from '@/hooks/use-width';
+import {useRouter} from 'next/navigation';
+
+export interface props {
+    list?: any[];
+    label?: string;
+    title: string;
+    value?: string;
+    api?: any;
+    maxHeight?: string;
+    theme?: "secondary";
+    hasError?: string | null;
+    size?: "md" | "sm";
+    onSelectChange?: any;
+    selected?: any;
+}
+
+const themes = {
+    secondary: {
+        input: `border
+                bg-transparent 
+                placeholder:text-secondary-400 
+                outline-1 
+                outline-primary-100  
+                border-secondary-300 
+                rounded-md 
+                hover:not:border-primary-100 
+                focus:outline 
+                focus:border-primary-100
+                
+                disabled:text-secondary-100
+                disabled:border-secondary-500`,
+
+        label: `text-dark-100
+                peer-focus:text-primary-100 
+                peer-focus:scale-90
+                
+                peer-disabled:text-secondary-400`
+    }
+}
+const sizes = {
+    sm: {
+        input: "text-xs px-2 py-1",
+        label: `px-1 text-xs `,
+    },
+    md: {
+        input: "text-sm px-3 py-2.5",
+        label: `px-1 text-xs`,
+    },
+}
+const Select: FC<props> = ({
+                                  list, label, hasError,
+                                  title, value, api,
+                                  maxHeight = "max-h-64", theme = "secondary", size = "md",
+                                  onSelectChange,
+                                  selected
+                              }) => {
+    const getDeviceWidth = useWidth();
+    const router = useRouter();
+    const [isShow, setIsShow] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [localSelected, setLocalSelected] = useState(null);
+    const [localList, setLocalList] = useState(null);
+    useEffect(() => {
+        if (api) {
+            setIsLoading(true);
+            api().then((res) => {
+                setIsLoading(false);
+                setLocalList(res?.data?.message ? [] : res.data);
+            })
+        }
+    }, [api]);
+    useEffect(() => {
+        if (getDeviceWidth < 1024) {
+
+            if (isShow) {
+                router.push('#select');
+                document.body.style.overflow = 'hidden';
+            } else {
+
+                if (window.location.hash && !document.referrer.includes('#')) {
+                    router.back();
+                }
+                document.body.style.overflow = 'auto';
+            }
+        }
+    }, [isShow]);
+
+    useEffect(() => {
+        const handlePopState = () => {
+            setIsShow(false);
+        };
+        window.addEventListener('popstate', handlePopState);
+        return () => {
+            window.removeEventListener('popstate', handlePopState);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (label?.length) {
+            setLocalSelected(localList?.find(item => item[label] === selected));
+        } else {
+            setLocalSelected(selected);
+        }
+    }, [selected, localList]);
+
+    const onToggle = () => {
+        setIsShow(prevState => !prevState);
+    }
+    const onToggleEvent = (e) => {
+        if (e?.target?.className.toString()?.includes('backdropSelect')) {
+            onToggle()
+        }
+    }
+    const onSelect = (item) => {
+        setLocalSelected(item);
+        onToggle();
+        onSelectChange(item);
+    }
+
+    const getActiveClass = (item) => {
+        if (!localSelected) {
+            return "";
+        }
+        if (label?.length && item[label] === localSelected[label]) {
+            return "bg-grey-100"
+        }
+        if (item === localSelected) {
+            return "bg-grey-100"
+        }
+    }
+    return (
+        <div className="relative">
+            <label
+                className={`cursor-pointer
+                ${hasError && "!text-danger-100"}`}>
+                <span className={`${themes[theme].label} ${sizes[size].label}`}>{title}</span>
+                <button type="button"
+                        className={`relative z-20 flex items-center mt-1 text-base justify-between gap-2 w-full ${localSelected ? "text-dark-100" : "text-grey-300"} ${themes[theme].input} ${sizes[size].input} ${hasError && "!border-danger-100 focus:border-danger-100 outline-danger-100"}`}
+                        onClick={onToggle}>
+                    {
+                        localSelected ? (
+                            value?.length ? localSelected[value] : localSelected
+                        ) : "انتخاب"
+                    } <AngleDown
+                    className={`w-4 h-4 transition ease duration-200 ${!isShow ? "rotate-0" : "rotate-180"}`}/>
+                </button>
+            </label>
+
+            {
+                isShow ? (
+                    <div
+                        className={`overflow-hidden ${getDeviceWidth < 1024 ? "fixed top-0 right-0 h-full w-full z-40" : ""}`}>
+                        <div
+                            className={`flex flex-col w-full z-40 bg-light-100 w-full shadow-lg border border-secondary-300 ${getDeviceWidth < 1024 ? "relative h-full pt-1 pb-5 px-5" : `animate-fade-in-translate-y mt-1 rounded-lg absolute ${maxHeight}`} overflow-auto`}>
+                            {
+                                api && isLoading ? (
+                                    <div className="py-10 flex justify-center">
+                                        <Loading size="w-7 h-7"/>
+                                    </div>
+                                ) : (
+                                    <>
+                                        {
+                                            getDeviceWidth < 1024 ? (
+                                                <div className="sticky top-0 text-left">
+                                                    <button className="p-3" onClick={onToggle}>
+                                                        <Close className="w-6"/>
+                                                    </button>
+                                                </div>
+                                            ) : undefined
+                                        }
+                                        {
+                                            localList?.map((item, index) => {
+                                                return (
+                                                    <>
+                                                        <button type="button" onClick={() => onSelect(item)} key={index}
+                                                                className={`text-right py-2.5 px-4 text-base hover:bg-grey-100 rounded-lg ${getActiveClass(item)}`}>
+                                                            {value?.length ? item[value] : item}
+                                                        </button>
+                                                    </>
+                                                )
+                                            })
+                                        }
+                                    </>
+                                )
+                            }
+                        </div>
+                        <div
+                            className={`backdropSelect fixed top-0 left-0 bottom-0 w-full h-full z-30`}
+                            onClick={onToggleEvent}>
+
+                        </div>
+                    </div>
+                ) : undefined
+            }
+            {
+                hasError &&
+                <p className="text-xs mt-1 text-danger-100">{hasError}</p>
+            }
+
+        </div>
+    );
+};
+
+export default Select;

package/components/tabs/LibTabs.tsx

@@ -0,0 +1,31 @@
+"use client"
+import {FC, useEffect, useRef, useState} from "react";
+
+interface TabType {
+    name: string;
+    label: string;
+}
+
+export interface props {
+    tabs: TabType[],
+    onTabEmit?: any,
+}
+
+const LibTabs: FC<props> = ({tabs, onTabEmit}) => {
+    const [isActive, setIsActive] = useState(0);
+    const onTabClicked = (item: TabType, index: number) => {
+        setIsActive(index)
+        onTabEmit(item)
+    }
+    return (
+        <div className="flex border-2 border-primary-100 rounded-lg overflow-hidden divide-x-2 divide-x-reverse divide-primary-100">
+            {
+                tabs.map((item: TabType, index: number) => {
+                    return <button className={`transition font-bold grow p-2 ${isActive === index ? "bg-primary-100 text-light-100" : ""}`} key = {index} onClick={() => onTabClicked(item, index)}>{item.label}</button>
+                })
+            }
+        </div>
+    );
+};
+
+export default LibTabs;