tabs

tabs.tsx

import React, { useState } from 'react';
import Link from 'next/link';
import { Divider } from './devider';
import { AllArticles } from './Articales';
import { AllProject } from './AllProject';
import { Projects } from './syg';

interface Props {
    color: string;
}

export const Tabs = () => {
    const [openTab, setOpenTab] = React.useState<number>(2);

    return (
        <div className="bg-gray-800">
            <div className="container ">
                <div className="py-3 ">
                    <Divider title="Project and AllArticles" />
                </div>
                <div className="px-2 sm:px-4 lg:px-8 py-2 ">
                    <div className="max-w-7xl mx-auto">
                        <div>
                            <div className="sm:hidden">
                                <select
                                    id="tabs"
                                    name="tabs"
                                    className="select form-select block w-full p-3 border border-gray-300 rounded text-gray-600 appearance-none bg-transparent relative z-10"
                                    value={2}
                                >
                                    <option className="text-sm text-gray-600">Front end</option>
                                    <option className="text-sm text-gray-600">Back End</option>
                                    <option className="text-sm text-gray-600">Articles</option>
                                    <option className=" rounded-t w-32 h-12 flex items-center justify-center bg-white text-sm text-gray-800">
                                        Full Stack
                                    </option>
                                </select>
                            </div>
                            <div className="hidden sm:block">
                                <div className="border-b border-gray-200 rounded-t flex items-center justify-center bg-white text-sm text-gray-800">
                                    <nav
                                        className="my-2 px-2 flex space-x-8  rounded-lg border border-gray-800 border-2"
                                        aria-label="Tabs"
                                    >
                                        <Link
                                            className={`tab ${
                                                openTab === 0 ? 'text-black bg-grey-600' : 'text-grey-400 bg-white'
                                            }`}
                                            to="#link1"
                                            onClick={(e) => {
                                                e.preventDefault();
                                                setOpenTab(0);
                                            }}
                                            data-toggle="tab"
                                            role="tablist"
                                        >
                                            <span className=" w-32 h-12 flex items-center justify-center  rounded-lg border-gray-800 bg-white text-sm text-gray-800">
                                                Backend
                                            </span>
                                        </Link>
                                        <Link
                                            className={`tab ${
                                                openTab === 1 ? 'text-black bg-grey-600' : 'text-grey-400 bg-white'
                                            }`}
                                            onClick={(e) => {
                                                e.preventDefault();
                                                setOpenTab(1);
                                            }}
                                            data-toggle="tab"
                                            to="#link2"
                                            role="tablist"
                                        >
                                            <span className=" w-32 h-12 flex items-center justify-center  rounded-lg border-gray-800 bg-white text-sm text-gray-800">
                                                Articals
                                            </span>
                                        </Link>
                                        <Link
                                            href="/"
                                            className={`tab ${
                                                openTab === 2 ? 'text-black bg-grey-600' : 'text-grey-400 bg-white'
                                            }`}
                                            aria-current="page"
                                        >
                                            <span className=" w-32 h-12 flex items-center justify-center  rounded-lg border-gray-800 bg-white text-sm text-gray-800">
                                                Front End
                                            </span>
                                        </Link>
                                        <Link
                                            href="/"
                                            className={
                                                'tab ' +
                                                (openTab === 2 ? 'text-black bg-grey-600' : 'text-grey-400 bg-white')
                                            }
                                            onClick={(e) => {
                                                e.preventDefault();
                                                setOpenTab(2);
                                            }}
                                            data-toggle="tab"
                                            to="#link3"
                                            role="tablist"
                                        >
                                            <span className=" w-32 h-12 flex items-center justify-center  rounded-lg border-gray-800 bg-white text-sm text-gray-800">
                                                Full stack
                                            </span>
                                        </Link>
                                    </nav>
                                </div>
                            </div>
                        </div>
                        <div className="relative flex flex-col min-w-0 break-words bg-white w-full h-full mb-2 shadow-lg rounded">
                            <div className="p-2  flex-auto">
                                <div className="tab-content tab-space">
                                    <div className={`${openTab === 1 ? 'block' : 'hidden'} bg-red-400`} id="link1">
                                        <AllProject projects={Projects.frontend} />
                                    </div>
                                    <div className={openTab === 2 ? 'block' : 'hidden'} id="link2">
                                        <AllArticles />
                                    </div>
                                    <div className={openTab === 3 ? 'block' : 'hidden'} id="link3">
                                        <AllProject projects={Projects.backend} />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};