diff --git a/src/pages/tools/string/slug-generator/index.tsx b/src/pages/tools/string/slug-generator/index.tsx index 8d72165..96f01b0 100644 --- a/src/pages/tools/string/slug-generator/index.tsx +++ b/src/pages/tools/string/slug-generator/index.tsx @@ -1,43 +1,92 @@ -import { Box } from '@mui/material'; import React, { useState } from 'react'; import ToolContent from '@components/ToolContent'; import { ToolComponentProps } from '@tools/defineTool'; import ToolTextInput from '@components/input/ToolTextInput'; import ToolTextResult from '@components/result/ToolTextResult'; +import CheckboxWithDesc from '@components/options/CheckboxWithDesc'; import { GetGroupsType } from '@components/options/ToolOptions'; import { CardExampleType } from '@components/examples/ToolExamples'; -import { main } from './service'; +import { slugGenerator } from './service'; import { InitialValuesType } from './types'; +import { useTranslation } from 'react-i18next'; -const initialValues: InitialValuesType = {}; +const initialValues: InitialValuesType = { + caseSensitive: false +}; const exampleCards: CardExampleType[] = [ { - title: 'Generate a Slug', + title: 'Slug (lowercase)', description: 'Convert a title into a URL-friendly slug', sampleText: 'Hello World! This is a test.', sampleResult: 'hello-world-this-is-a-test', - sampleOptions: {} + sampleOptions: { + caseSensitive: false + } + }, + { + title: 'Slug (case preserved)', + description: + 'Convert a title into a URL-friendly slug without any case change', + sampleText: 'Hello World! This is a test.', + sampleResult: 'Hello-World-This-is-a-test', + sampleOptions: { + caseSensitive: true + } + }, + { + title: 'Slugs (multi lines processing)', + description: 'Convert titles on each lines into a URL-friendly slugs', + sampleText: 'Hello World! This is a test.\nMultiples lines are processed', + sampleResult: 'Hello-World-This-is-a-test\nMultiples-lines-are-processed', + sampleOptions: { + caseSensitive: true + } } ]; export default function SlugGenerator({ title, longDescription }: ToolComponentProps) { + const { t } = useTranslation('string'); const [input, setInput] = useState(''); const [result, setResult] = useState(''); const compute = (values: InitialValuesType, input: string) => { - setResult(main(input, values)); + setResult(slugGenerator(input, values)); }; - const getGroups: GetGroupsType | null = null; + const getGroups: GetGroupsType = ({ + values, + updateField + }) => [ + { + title: t('slugGenerator.options.title'), + component: [ + updateField('caseSensitive', val)} + /> + ] + } + ]; return ( } - resultComponent={} + inputComponent={ + + } + resultComponent={ + + } initialValues={initialValues} exampleCards={exampleCards} getGroups={getGroups}