56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
// * Packages
|
|
import { GavelIcon } from "lucide-react";
|
|
// * Other
|
|
import SimpleString from "@/back/Components/Inputs/SimpleString";
|
|
import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
|
|
import str from "@/hooks/use-string";
|
|
import useTrans from "@/hooks/use-translations";
|
|
|
|
interface SlugifycatorProps {
|
|
value: string;
|
|
targetValue: string;
|
|
wordCounter?: boolean;
|
|
disabled?: boolean;
|
|
// eslint-disable-next-line no-unused-vars
|
|
setData: (name: string, value: string) => void;
|
|
}
|
|
|
|
export default function Slugifycator(props: SlugifycatorProps) {
|
|
const {
|
|
value,
|
|
targetValue,
|
|
setData,
|
|
wordCounter = false,
|
|
disabled = false,
|
|
} = props;
|
|
return (
|
|
<div className="flex items-end gap-1">
|
|
<SimpleString
|
|
name="slug"
|
|
label={str(
|
|
useTrans("back.form_associate_to", {
|
|
params: {
|
|
attribute: useTrans("validation.custom.slug"),
|
|
},
|
|
choice: 1,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
placeholder="ex: John Doe"
|
|
wordCounter={wordCounter}
|
|
value={value}
|
|
setData={setData}
|
|
disabled={disabled}
|
|
/>
|
|
<BtnOptionnalLinkWithTooltip
|
|
content={<GavelIcon className="w-4 h-4 m-auto" />}
|
|
tooltipContent={str(useTrans("back.slugify")).ucFirst().value()}
|
|
type="button"
|
|
variant="secondary"
|
|
onClick={() => setData("slug", str(targetValue).slug().value())}
|
|
disabled={disabled}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|