78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
|
import { AppEnv, Model } from "../types/global";
|
|
import useTrans from "@/hooks/use-translations";
|
|
import { usePage } from "@inertiajs/react";
|
|
import { ExternalLinkIcon } from "lucide-react";
|
|
import str from "@/hooks/use-string";
|
|
|
|
interface Props {
|
|
/** Current Model being edited */
|
|
model?: Model;
|
|
|
|
/** Model Name used to translate the helper */
|
|
modelName: string;
|
|
|
|
/** Field data to build path */
|
|
pathField: string;
|
|
|
|
/** additionnal segment used in the url */
|
|
additionalGroupPath?: string;
|
|
|
|
/** Does the actual page status available in front */
|
|
isAvailable: boolean;
|
|
}
|
|
|
|
const GoToFrontView = (props: Props) => {
|
|
const { model, modelName, pathField, additionalGroupPath = null, isAvailable = false } = props;
|
|
if(!model) return;
|
|
const { locale, url } = usePage().props.appEnv as AppEnv;
|
|
|
|
const anchorAccessPage = useTrans("back.access_model", {
|
|
params: {
|
|
model: useTrans(`models.classes.${modelName}`, { choice: 1 }),
|
|
},
|
|
});
|
|
|
|
const definitivePath = [
|
|
url + (locale === "fr" ? '' : '/' + locale),
|
|
additionalGroupPath,
|
|
pathField,
|
|
]
|
|
.filter(Boolean)
|
|
.join("/");
|
|
|
|
return (
|
|
<small className="flex flex-row justify-start items-center">
|
|
{model && isAvailable ? (
|
|
<>
|
|
{str(useTrans('back.access_to_front_page')).ucFirst().value()}
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<a
|
|
href={definitivePath}
|
|
className="flex justify-center items-center rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none 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"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{definitivePath}{" "}
|
|
<ExternalLinkIcon size={12} />
|
|
</a>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{anchorAccessPage}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</>
|
|
) : (
|
|
<>
|
|
{str(useTrans("back.access_to_front_page_when_published")).ucFirst().value()}:
|
|
<span className="italic ms-1">
|
|
{definitivePath}
|
|
</span>
|
|
</>
|
|
)}
|
|
</small>
|
|
)
|
|
}
|
|
|
|
export default GoToFrontView;
|