46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import str from "@/hooks/use-string"
|
|
import SimpleString from "./SimpleString"
|
|
import useTrans from "@/hooks/use-translations"
|
|
import BtnOptionnalLinkWithTooltip from "../BtnOptionnalLinkWithTooltip"
|
|
import { GavelIcon } from "lucide-react"
|
|
|
|
interface Props {
|
|
setData: (name: string, value: string) => void;
|
|
value: string
|
|
targetValue: string
|
|
wordCounter?: boolean;
|
|
disabled?: boolean,
|
|
}
|
|
const Slugifycator = (props: Props) => {
|
|
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>
|
|
)
|
|
}
|
|
|
|
export default Slugifycator;
|