ldc-ovoteam/resources/ts/back/Components/GoToFrontView.tsx

import { usePage } from "@inertiajs/react";
import { ExternalLinkIcon } from "lucide-react";

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import str from "@/hooks/use-string";
import trans from "@/hooks/use-translations";
import { cn } from "@/lib/utils";

interface GoToFrontViewProps {
  /** Model Name used to translate the helper */
  modelName: string;

  /** Field data to build path */
  pathField: string;

  /** Additionnal segment used in the url */
  additionalGroupPath?: string | null;

  /** Does the actual page status available in front */
  isAvailable?: boolean;

  /** Set visually in column */
  isColumn?: boolean;
}

export default function GoToFrontView({
  modelName,
  pathField,
  additionalGroupPath = null,
  isAvailable = false,
  isColumn = false,
}: Readonly<GoToFrontViewProps>) {
  const { url } = usePage().props.appEnv as AppEnv;

  const anchorAccessPage = trans("uwil-backend::back.access_model", {
    params: {
      model: modelName,
    },
  });

  const cleanUrl = url.endsWith("/") ? url.slice(0, -1) : url;

  const definitivePath = [cleanUrl, additionalGroupPath, pathField]
    .filter(Boolean)
    .join("/");

  return (
    <small
      className={`flex ${isColumn ? "flex-col items-start" : "flex-row items-center"} justify-start`}
    >
      {isAvailable ? (
        <>
          {str(
            trans("uwil-backend::back.access_to_front_page", {
              params: {
                model: modelName,
              },
            }),
          )
            .ucFirst()
            .value()}
          <Tooltip>
            <TooltipTrigger asChild>
              <a
                href={definitivePath}
                className={cn(
                  "flex justify-center items-center rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 underline-offset-4 hover:underline text-blue-600 hover:text-blue-600/80 visited:text-purple-600 w-fit gap-1.5",
                  { "ms-1": !isColumn },
                )}
                target="_blank"
                rel="noreferrer"
              >
                <p className="flex-1">{definitivePath}</p>
                <ExternalLinkIcon size={12} />
              </a>
            </TooltipTrigger>
            <TooltipContent>{anchorAccessPage}</TooltipContent>
          </Tooltip>
        </>
      ) : (
        <>
          {str(
            trans("uwil-backend::back.access_to_front_page_when_published", {
              params: {
                model: modelName,
              },
            }),
          )
            .ucFirst()
            .value()}
          :<span className="italic ms-1">{definitivePath}</span>
        </>
      )}
    </small>
  );
}