ldc-groupe/resources/ts/back/Components/Inputs/Slugifycator.tsx

// * 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>
    );
}