Slugify a String

Slugs are widely used in blogs, e-commerce, and CMS platforms for clean and SEO-friendly URLs.

Things to do

• Create an input where the user can type text.
• Implement a slugify function that follows these rules:
• Convert all characters to lowercase.
• Remove accents/diacritics (e.g., Café → cafe).
• Replace any sequence of spaces or special characters with a single -.
• Return an empty string if the input is only whitespace.
• Display the resulting slug below the input.

ClassNames

Use this classnames in your code

• Input -> input-box
• Result -> result

Examples

input: "My First Blog!"
output: "my-first-blog"

input: "Café del Mar!"
output: "cafe-del-mar"

input: "     "
output: ""

Testing Instructions

Please use the following data-testid attributes in your React component:

• input-box → for the input field
• result → for the slug output