new-personal-site/components/pages/Home/(sections)/MyWorkSection.tsx

import Card from "@/components/lib/elements/Card";
import H2 from "@/components/lib/layout/H2";
import H3 from "@/components/lib/layout/H3";
import Section from "@/components/lib/layout/Section";
import Span from "@/components/lib/layout/Span";
import Stack from "@/components/lib/layout/Stack";
import { work } from "../(data)/work";
import Link from "@/components/lib/layout/Link";
import React from "react";
import Row from "@/components/lib/layout/Row";
import Divider from "@/components/lib/layout/Divider";
import { twMerge } from "tailwind-merge";

type Props = {
    noTitle?: boolean;
    expand?: boolean;
};

export default function MyWorkSection({ noTitle, expand }: Props) {
    const categories = Object.keys(work) as (keyof typeof work)[];
    const [category, setCategory] = React.useState<keyof typeof work>(
        categories[0]
    );

    if (expand) {
        return (
            <Section>
                <Stack className="w-full">
                    {!noTitle && (
                        <React.Fragment>
                            <H2 className="leading-snug m-0">My Work</H2>
                            <Span>Some work I've done in the past</Span>
                            <Divider className="opacity-0 my-2" />
                        </React.Fragment>
                    )}

                    <Stack className="items-stretch gap-20 flex-row xl:flex-col flex-wrap md:flex-nowrap">
                        {categories.map((ctgr, i) => {
                            const isActive = category === ctgr;
                            return (
                                <Stack key={i}>
                                    <Stack className="gap-6">
                                        <H3 className="m-0 text-lg">{ctgr}</H3>

                                        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 w-full">
                                            {work[ctgr].portfolio.map(
                                                (portfolio, index) => {
                                                    return (
                                                        <MyWorkPortfolioCard
                                                            portfolio={
                                                                portfolio
                                                            }
                                                            key={index}
                                                        />
                                                    );
                                                }
                                            )}
                                        </div>
                                    </Stack>
                                </Stack>
                            );
                        })}
                    </Stack>
                </Stack>
            </Section>
        );
    }

    return (
        <Section>
            <Stack className="w-full">
                {!noTitle && (
                    <React.Fragment>
                        <H2 className="leading-snug m-0">My Work</H2>
                        <Span>Some work I've done in the past</Span>
                        <Divider className="opacity-0 my-2" />
                    </React.Fragment>
                )}

                <Row className="flex-nowrap items-start gap-x-14 flex-col xl:flex-row gap-y-10">
                    <Stack className="xl:max-w-[200px] items-stretch gap-6 flex-row xl:flex-col flex-wrap md:flex-nowrap">
                        {categories.map((ctgr, i) => {
                            const isActive = category === ctgr;
                            return (
                                <Stack
                                    key={i}
                                    className={twMerge(
                                        "cursor-pointer",
                                        isActive
                                            ? ""
                                            : "opacity-40 hover:opacity-70"
                                    )}
                                    onClick={() => setCategory(ctgr)}
                                >
                                    <Stack className="gap-1">
                                        <H3 className="m-0 text-lg">{ctgr}</H3>
                                    </Stack>
                                </Stack>
                            );
                        })}
                    </Stack>

                    <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 w-full">
                        {work[category].portfolio.map((portfolio, index) => {
                            return (
                                <MyWorkPortfolioCard
                                    portfolio={portfolio}
                                    key={index}
                                />
                            );
                        })}
                    </div>
                </Row>
            </Stack>
        </Section>
    );
}

export function MyWorkPortfolioCard({
    portfolio,
}: {
    portfolio: (typeof work.Devops.portfolio)[number];
}) {
    return (
        <Card className="grow w-full items-start">
            <Stack className="gap-4">
                <H3 className="m-0">{portfolio.title}</H3>

                <Link
                    target="_blank"
                    href={portfolio.href}
                    className="text-sm text-wrap break-all border-none"
                >
                    {portfolio.href}
                </Link>
                <Span>{portfolio.description}</Span>
                {portfolio.technologies?.[0] && (
                    <Row className="gap-4">
                        {portfolio.technologies.map((tch, _i) => (
                            <React.Fragment key={_i}>
                                <Span className="text-sm dark:text-white/40">
                                    {tch}
                                </Span>
                                {_i < portfolio.technologies.length - 1 && (
                                    <Divider vertical />
                                )}
                            </React.Fragment>
                        ))}
                    </Row>
                )}
            </Stack>
        </Card>
    );
}