95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
// * Packages
|
|
import { usePage } from "@inertiajs/react";
|
|
import { ExternalLinkIcon } from "lucide-react";
|
|
// * Components shadcn
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
|
// * Other
|
|
import { AppEnv } from "@/back/types/global";
|
|
import useTrans from "@/hooks/use-translations";
|
|
import str from "@/hooks/use-string";
|
|
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,
|
|
}: GoToFrontViewProps) {
|
|
const { locale, url } = usePage().props.appEnv as AppEnv;
|
|
|
|
const anchorAccessPage = useTrans("back.access_model", {
|
|
params: {
|
|
model: modelName,
|
|
},
|
|
});
|
|
|
|
const definitivePath = [
|
|
url + (locale === "fr" ? '' : '/' + locale),
|
|
additionalGroupPath,
|
|
pathField,
|
|
]
|
|
.filter(Boolean)
|
|
.join("/");
|
|
|
|
return (
|
|
<small className={`flex ${isColumn ? 'flex-col items-start' : 'flex-row items-center'} justify-start`}>
|
|
{isAvailable ? (
|
|
<>
|
|
{str(useTrans('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-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": !isColumn }
|
|
)}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<p>{definitivePath}</p>
|
|
<ExternalLinkIcon size={12} />
|
|
</a>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{anchorAccessPage}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</>
|
|
) : (
|
|
<>
|
|
{str(useTrans("back.access_to_front_page_when_published", {
|
|
params: {
|
|
model: modelName,
|
|
},
|
|
})).ucFirst().value()}:
|
|
<span className="italic ms-1">
|
|
{definitivePath}
|
|
</span>
|
|
</>
|
|
)}
|
|
</small>
|
|
)
|
|
}
|