tailwind-ui-library/src/elements/LinkList.tsx

import React, {
    type ComponentProps,
    type DetailedHTMLProps,
    type HTMLAttributes,
    type ReactNode,
} from "react";
import { twMerge } from "tailwind-merge";
import Link from "../layout/Link";
import { twuiAddActiveLinksFn } from "./HeaderNav";
import Row from "../layout/Row";
import Divider from "../layout/Divider";
import Button from "../layout/Button";

export type TWUI_LINK_LIST_LINK_OBJECT = {
    title?: string;
    component?: ReactNode;
    url?: string;
    strict?: boolean;
    icon?: ReactNode;
    iconPosition?: "before" | "after";
    linkProps?: ComponentProps<typeof Link>;
    buttonProps?: Omit<ComponentProps<typeof Button>, "title">;
    linkType?: "button" | "link";
    divider?: ReactNode;
    onClick?: React.MouseEventHandler<HTMLElement>;
};

export type TWUILink =
    | TWUI_LINK_LIST_LINK_OBJECT
    | TWUI_LINK_LIST_LINK_OBJECT[]
    | undefined;

export type TWUI_LINK_LIST_PROPS = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
> & {
    links: TWUILink[];
    linkProps?: ComponentProps<typeof Link>;
    buttonProps?: Omit<ComponentProps<typeof Button>, "title">;
    divider?: boolean;
    dividerComponent?: ReactNode;
    linkType?: "button" | "link";
};

/**
 * # Link List Component
 * @description A component that renders a list of links.
 * @className_wrapper twui-link-list
 */
export default function LinkList({
    links,
    linkProps,
    buttonProps,
    divider,
    dividerComponent,
    linkType,
    ...props
}: TWUI_LINK_LIST_PROPS) {
    const listRef = React.useRef<HTMLDivElement>(null);
    const finalLinks = links
        .flat()
        .filter((ln): ln is TWUI_LINK_LIST_LINK_OBJECT => Boolean(ln));

    React.useEffect(() => {
        twuiAddActiveLinksFn({
            wrapperEl: listRef.current || undefined,
            selector: "a",
        });
    }, []);

    return (
        <div
            ref={listRef}
            {...props}
            className={twMerge(
                "flex flex-row items-center gap-1",
                "twui-link-list",
                props.className,
            )}
        >
            {finalLinks.map((link, index) => {
                    if (link.divider)
                        return (
                            <React.Fragment key={index}>
                                {link.divider}
                            </React.Fragment>
                        );

                    const finalDivider =
                        index < finalLinks.length - 1 &&
                        (dividerComponent ? (
                            dividerComponent
                        ) : divider ? (
                            <Divider />
                        ) : undefined);

                    if (linkType == "button" || link.linkType == "button") {
                        return (
                            <React.Fragment key={index}>
                                <Button
                                    title={link.title || "Link Button"}
                                    variant="ghost"
                                    {...buttonProps}
                                    {...link.buttonProps}
                                    className={twMerge(
                                        "p-2 cursor-pointer whitespace-nowrap",
                                        linkProps?.className,
                                        buttonProps?.className,
                                        link.buttonProps?.className,
                                    )}
                                    onClick={(e) => {
                                        link.onClick?.(e);
                                        buttonProps?.onClick?.(e);
                                        link.buttonProps?.onClick?.(e);
                                    }}
                                >
                                    <Row>
                                        {link.icon}
                                        {link.component || link.title}
                                    </Row>
                                </Button>
                                {finalDivider}
                            </React.Fragment>
                        );
                    }

                    return (
                        <React.Fragment key={index}>
                            <Link
                                href={link.url}
                                title={link.title}
                                {...linkProps}
                                {...link.linkProps}
                                className={twMerge(
                                    "p-2 cursor-pointer whitespace-nowrap",
                                    linkProps?.className,
                                    link.linkProps?.className,
                                )}
                                strict={link.strict}
                                onClick={(e) => {
                                    link.onClick?.(e);
                                    linkProps?.onClick?.(e);
                                    link.linkProps?.onClick?.(e);
                                }}
                            >
                                <Row>
                                    {!link.iconPosition ||
                                    link.iconPosition == "before"
                                        ? link.icon
                                        : null}
                                    {link.component || link.title}
                                    {link.iconPosition == "after"
                                        ? link.icon
                                        : null}
                                </Row>
                            </Link>
                            {finalDivider}
                        </React.Fragment>
                    );
                })}
        </div>
    );
}