tailwind-ui-library/src/composites/docs/TWUIDocsLink.tsx

import React, {
    type AnchorHTMLAttributes,
    type ComponentProps,
    type DetailedHTMLProps,
} from "react";
import type { DocsLinkType } from ".";
import Stack from "../../layout/Stack";
import { twMerge } from "tailwind-merge";
import Row from "../../layout/Row";
import Divider from "../../layout/Divider";
import { ChevronDown, Circle } from "lucide-react";
import Button from "../../layout/Button";
import twuiLinkMatchesPath from "../../utils/link-matches-path";

type Props = DetailedHTMLProps<
    AnchorHTMLAttributes<HTMLAnchorElement>,
    HTMLAnchorElement
> & {
    docLink: DocsLinkType;
    wrapperProps?: ComponentProps<typeof Stack>;
    strict?: boolean;
    childWrapperProps?: ComponentProps<typeof Stack>;
    autoExpandAll?: boolean;
    child?: boolean;
};

/**
 * # TWUI Docs Left Aside Link
 * @note use dataset attribute `data-strict` for strict matching
 *
 * @className `twui-docs-left-aside-link`
 */
export default function TWUIDocsLink({
    docLink,
    wrapperProps,
    childWrapperProps,
    strict,
    autoExpandAll,
    child,
    ...props
}: Props) {
    const [isActive, setIsActive] = React.useState(false);
    const [expand, setExpand] = React.useState(autoExpandAll || false);
    const linkRef = React.useRef<HTMLAnchorElement>(null);

    React.useEffect(() => {
        if (typeof window !== "undefined") {
            const basePathMatch = twuiLinkMatchesPath({
                href: docLink.href,
                pathname: window.location.pathname,
            });

            const isStrictMatch = Boolean(
                linkRef.current?.getAttribute("data-strict"),
            );

            if (strict || isStrictMatch) {
                setIsActive(
                    twuiLinkMatchesPath({
                        href: docLink.href,
                        pathname: window.location.pathname,
                        strict: true,
                    }),
                );
            } else {
                setIsActive(basePathMatch);
            }

            if (basePathMatch) {
                setExpand(true);
            }
        }
    }, []);

    return (
        <Stack
            {...wrapperProps}
            className={twMerge("gap-2 w-full", wrapperProps?.className)}
        >
            <Row className="flex-nowrap grow justify-between w-full">
                {child && <Circle size={6} />}
                <a
                    href={docLink.href}
                    title={docLink.title}
                    {...props}
                    className={twMerge(
                        "twui-docs-left-aside-link whitespace-nowrap",
                        "grow overflow-hidden overflow-ellipsis",
                        isActive ? "active" : "",
                        props.className,
                    )}
                    ref={linkRef}
                    data-strict={strict || docLink.strict}
                >
                    {docLink.title}
                </a>

                {docLink.children?.[0] && (
                    <Button
                        variant="ghost"
                        color="gray"
                        className={twMerge(
                            "p-1 hover:opacity-100",
                            expand ? "rotate-180 opacity-30" : "opacity-70",
                        )}
                        onClick={() => setExpand(!expand)}
                        title="Docs Aside Links Dropdown Button"
                    >
                        <ChevronDown className="text-slate-500" size={20} />
                    </Button>
                )}
            </Row>
            {docLink.children && expand && (
                <Row className="items-stretch gap-4 grow w-full flex-nowrap">
                    <Stack
                        {...childWrapperProps}
                        className={twMerge(
                            "gap-2 w-full pl-3",
                            childWrapperProps?.className,
                        )}
                    >
                        {docLink.children.map((link, index) => (
                            <TWUIDocsLink
                                key={index}
                                docLink={link}
                                className="opacity-70"
                                autoExpandAll={autoExpandAll}
                                child
                            />
                        ))}
                    </Stack>
                </Row>
            )}
        </Stack>
    );
}