Solucion completada

src/components/ruiderEdgar/Characteristics.jsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react'
+import './styles/caracteristics.css'
+
+const Characteristics = ({ getLenght, handleSubmit }) => {
+	const [lenght, setLenght] = useState(12)
+	getLenght(lenght)
+	return (
+		<article className='containerOptions'>
+			<h3 className='text-neutral-50 text-center my-4'>Options</h3>
+			<h4 className='text-neutral-50 my-2 ml-4'>Character lenght: {lenght}</h4>
+			<form className='containerInput' onSubmit={(e) => {
+				e.preventDefault()
+				handleSubmit()
+			}}>
+				<label htmlFor='lenght'>
+					<span className='text-neutral-50 mr-2'>6</span>
+					<input type='range' value={lenght} min={6} max={20} name='range' id='lenght' className='lenght' onChange={(e) => {
+						setLenght(e.target.value)
+					}} />
+					<span className='text-neutral-50 ml-2'>20</span>
+				</label>
+				{/* <button className='btnGenerate transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-200 '>
+					Generar
+				</button> */}
+			</form>
+		</article>
+	)
+}
+
+export default Characteristics

src/components/ruiderEdgar/ContainerPassword.jsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react'
+import Password from './Password'
+import Characteristics from './Characteristics'
+
+const ContainerPassword = () => {
+	const [newPassword, setNewPassword] = useState('')
+	// -----function to get the lenght from the input------ //
+	const getLenght = (sizeLenght) => {
+		const chain = 'qwertyuiopasdfghjklñzxcvbnmQWERTYUIOPASDFGHJKLÑZXCVBNM!#$%&/()=?¡¿'
+		const characters = chain.split('')
+		const newPassword = []
+		for (let i = 0; i < sizeLenght; i++) {
+			newPassword.push(characters[Math.floor(Math.random() * characters.length)])
+		}
+		useEffect(() => {
+			setNewPassword(newPassword.toString().replace(/,/g, ''))
+		}, [sizeLenght])
+	}
+	return (
+		<section className='mx-auto mt-8'>
+			<Password passwordGenerated={newPassword} />
+			<Characteristics getLenght={getLenght} />
+		</section>
+	)
+}
+
+export default ContainerPassword

src/components/ruiderEdgar/Password.jsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react'
+import './styles/Password.css'
+
+const Password = ({ passwordGenerated }) => {
+	const [alert, setAlert] = useState(false)
+	// -----function to copy to clipboard (separate to get clarity)------ //
+	const copy = () => {
+		navigator.clipboard.writeText(passwordGenerated)
+		setAlert(true)
+		setInterval(() => {
+			setAlert(false)
+		}, 3000)
+	}
+	return (
+		<article className='containerPassword'>
+			<h3 className='text-neutral-50 text-center my-4'>Password</h3>
+			<div className='containerInput'>
+				<input type='text' name='password Generated' className='inputPassword' id='inputPassword' value={passwordGenerated} readOnly={true} />
+				<button className='transition ease-in-out delay-150  hover:scale-110 duration-150 ' onClick={copy}>
+					<img src='https://cdn-icons-png.flaticon.com/512/8258/8258400.png' alt='icon copy' />
+				</button>
+				<div className={alert ? 'visibility absolute top-1 right-auto left-auto w-40 h-12 rounded-md grid col-span-1 place-content-center transition ease-in-out delay-150 -translate-x-10 bg-indigo-500' : 'invisible absolute'}>
+					<h3 className='text-white'>Copy to clipboard</h3>
+				</div>
+			</div>
+		</article>
+	)
+}
+
+export default Password

src/components/ruiderEdgar/styles/Password.css

@@ -0,0 +1,43 @@
+@import './colors.css';
+@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Signika+Negative&display=swap');
+
+h1 {
+	font-family: 'Rubik Mono One', sans-serif;
+}
+h3 {
+	font-family: 'Signika Negative', sans-serif;
+	font-weight: bold;
+}
+article {
+	font-family: 'Signika Negative', sans-serif;
+}
+.containerPassword,
+.containerInput {
+	display: flex;
+}
+.containerPassword {
+	background-color: var(--Backgound);
+	height: fit-content;
+	width: 22rem;
+	flex-direction: column;
+	border-radius: 8px;
+	box-shadow: var(--box-shadow);
+}
+
+.containerInput {
+	margin: 0 auto 2rem;
+}
+.inputPassword {
+	border-radius: 10px;
+	background-color: var(--white);
+	color: black;
+	padding-left: 0.5rem;
+}
+.inputPassword:focus {
+	outline: 3px solid var(--accent);
+}
+img {
+	width: 2rem;
+	margin-left: 1rem;
+}

src/components/ruiderEdgar/styles/caracteristics.css

@@ -0,0 +1,84 @@
+@import './colors.css';
+@import url('https://fonts.googleapis.com/css2?family=Sarabun&display=swap');
+.containerOptions,
+.containerInput {
+	display: flex;
+}
+.containerOptions {
+	background-color: var(--Backgound);
+	height: fit-content;
+	width: 22rem;
+	flex-direction: column;
+	border-radius: 8px;
+	box-shadow: var(--box-shadow);
+	margin-top: 1rem;
+	font-family: 'Sarabun', sans-serif;
+}
+
+.containerInput {
+	margin: 0 auto 2rem;
+}
+
+input[type='range'] {
+	width: 17rem;
+	cursor: pointer;
+}
+
+input[type='range'],
+input[type='range']::-webkit-slider-runnable-track,
+input[type='range']::-webkit-slider-thumb {
+	-webkit-appearance: none;
+}
+
+input[type='range']::-webkit-slider-thumb {
+	background: var(--gradientRadial);
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	margin-top: -7.5px;
+	box-shadow: var(--box-shadow);
+}
+
+input[type='range']::-moz-range-thumb {
+	background: var(--gradientRadial);
+	width: 15px;
+	height: 15px;
+	border-radius: 50%;
+}
+
+input[type='range']::-ms-thumb {
+	background: var(--gradientRadial);
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+	background: var(--gradient);
+	height: 6px;
+}
+
+input[type='range']:focus::-webkit-slider-runnable-track {
+	outline: none;
+}
+.containerInput label {
+	display: flex;
+	align-items: center;
+}
+.containerInput label span {
+	color: var(--textAccent);
+	font-weight: bold;
+}
+.btnGenerate {
+	margin: 0 auto 1rem;
+	background: var(--primary);
+	width: 5rem;
+	height: 2rem;
+	border-radius: 8px;
+	color: var(--white);
+	font-weight: bold;
+	box-shadow: var(--box-shadow);
+}
+.btnGenerate:hover {
+	background: var(--darkPrimary);
+}

src/components/ruiderEdgar/styles/colors.css

@@ -0,0 +1,19 @@
+:root {
+	--Backgound: #002e48;
+	--primary: #e101e9;
+	--darkPrimary: rgba(160, 57, 240, 1);
+	--lightPrimary: #d1c4e9;
+	--accent: #e040fb;
+	--black: #1b1b1b;
+	--white: #e4e4e4;
+	--textAccent: #20a8fe;
+	--gradient: linear-gradient(90deg, rgba(226, 0, 233, 1) 0%, rgba(30, 171, 254, 1) 100%);
+	--gradientRadial: linear-gradient(
+		90deg,
+		rgba(30, 171, 254, 1) 0%,
+		rgba(160, 57, 240, 1) 50%,
+		rgba(226, 0, 233, 1) 100%
+	);
+
+	--box-shadow: 0px 2px 10px rgba(8, 9, 10, 0.3), 0px 2px 20px rgba(0, 0, 0, 0.4);
+}

src/pages/entry/ruiderEdgar/index.astro

@@ -0,0 +1,16 @@
+---
+import Layout from '@layout'
+import ContainerPassword from '@components/ruiderEdgar/ContainerPassword'
+---
+
+<Layout title='ruideEdgar'>
+	<main class='flex flex-col h-full w-full'>
+		<h1 class='text-neutral-50 text-center text-4xl mt-8'>Password Generate</h1>
+		<img
+			class='w-40 mx-auto mt-8'
+			src='https://cdn-icons-png.flaticon.com/512/7633/7633165.png'
+			alt='icon candado'
+		/>
+		<ContainerPassword client:only='react' />
+	</main>
+</Layout>