VistasRestablecerContraseñaTerminada

components/Icon/Dowload.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+export default function Dowload(props) {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 16 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 18.619H.667v-2.19H16v2.19zM.667 6.571h4.38V0h6.572v6.571H16l-7.667 7.667L.667 6.571z"
+        fill={props.color}
+      />
+    </svg>
+  )
+}

components/Icon/Search.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import * as React from "react"
 
 export default function Search(props) {
   return (

components/Icon/ZIcon.tsx

@@ -51,6 +51,7 @@ import Star from "./Star"
 import Border from "./Border"
 import Energy from "./Energy"
 import Facebookv2 from "./Facebookv2"
+import Dowload from "./Dowload"
 
 import { PropsIcon } from "./types"
 function VIcon({
@@ -167,6 +168,8 @@ function VIcon({
       return <Menu {...props} style={style} color={_color} />
     case "calendar":
       return <Calendar {...props} style={style} color={_color} />
+    case "dowload":
+      return <Dowload {...props} style={style} color={_color} />
     default:
       return null
   }

components/Icon/types.d.ts

@@ -65,6 +65,7 @@ export type IconName =
   | "border"
   | "energy"
   | "facebookv2"
+  | "dowload"
 
 /**
  * Props SVG, incluyendo name, color, size y weight. No se debe usar el prop style.

pages/actualizar-contrasena.tsx

@@ -0,0 +1,9 @@
+import PasswordReset from "../sections/Update/PasswordReset"
+
+export default function Udpate() {
+  return (
+    <div>
+      <PasswordReset />
+    </div>
+  )
+}

pages/mostrar-datos.tsx

@@ -1,11 +1,11 @@
-import ShowData from "../sections/ShowData/Show"
+import ShowD from "../sections/ShowData/Show"
 import Layout from "../components/Layout"
 
 export default function Show() {
   return (
     <div>
       <Layout withNav withFooter>
-        <ShowData></ShowData>
+        <ShowD></ShowD>
       </Layout>
     </div>
   )

sections/Contact/Assessment.tsx

@@ -8,7 +8,7 @@ export default function Assessment() {
         <Grid templateColumns={{ base: "100%", lg: "70% 30%" }}>
           <Box>
             <Box>
-              <Text fontSize="xl" className="bold600">
+              <Text fontSize="x1" className="bold600">
                 Valoraciones
               </Text>
               <Flex align="center" justify="space-between">

sections/Reset/FormReset.tsx

@@ -24,11 +24,12 @@ export default function FormReset() {
         <FormLabel className={styles.Label}>Correo Electrónico *</FormLabel>
         <Input
           borderColor="black.100"
+          bg="white"
           className={styles.Entrada}
           type="email"
           placeholder="Escribe tu correo aquí"
         />
-        <Button variant="secondary" className={styles.Boton}>
+        <Button variant="primary" className={styles.Boton}>
           Enviar
         </Button>
       </div>

sections/ShowData/Data.tsx

@@ -0,0 +1,37 @@
+import styles from "../../styles/sections/Show.module.css"
+import { FormLabel, Input, Button, Text } from "@chakra-ui/react"
+
+export default function Show() {
+  return (
+    <div>
+      <Text className={styles.labelPrincipal}>Datos personales</Text>
+      <p className={styles.labelsub}>
+        Puedes cambiar los datos de tu perfil cuantas veces lo consideres
+        necesario.
+      </p>
+      <div className={styles.Entrada}>
+        <div>
+          <FormLabel className={styles.label}>Nombres</FormLabel>
+          <Input
+            borderColor="black.100"
+            type="text"
+            className={styles.Entrada}
+            placeholder="Escribe tus nombres aquí"
+          />
+        </div>
+        <div>
+          <FormLabel className={styles.label}>Apellidos</FormLabel>
+          <Input
+            borderColor="black.100"
+            type="text"
+            className={styles.Entrada}
+            placeholder="Escribe tus apellidos aquí"
+          />
+        </div>
+        <div className={styles.Boton}>
+          <Button variant="primary">Guardar Cambios</Button>
+        </div>
+      </div>
+    </div>
+  )
+}

sections/ShowData/History.tsx

@@ -0,0 +1,47 @@
+import styles from "../../styles/sections/Show.module.css"
+import { Box, Text, Flex, Spacer, Link } from "@chakra-ui/react"
+import ZIcon from "../../components/Icon/ZIcon"
+
+export default function Show() {
+  return (
+    <div>
+      <Text className={styles.labelPrincipal}>Historial</Text>
+      <p className={styles.labelsub}>
+        Puedes ver tu lista de pendientes de pago aquí.
+      </p>
+      <div>
+        <Flex backgroundColor="gray.200" padding="2" marginBottom="20px">
+          <Box p="2">
+            <Text size="md">ID:</Text>
+            <Text size="md">Monto:</Text>
+          </Box>
+          <Spacer />
+          <Box flex="">
+            <Link>
+              <ZIcon name="search" />
+            </Link>
+            <Link>
+              <ZIcon name="dowload" />
+            </Link>
+          </Box>
+        </Flex>
+
+        <Flex backgroundColor="gray.200" padding="2" marginBottom="20px">
+          <Box p="2">
+            <Text size="md">ID:</Text>
+            <Text size="md">Monto:</Text>
+          </Box>
+          <Spacer />
+          <Box>
+            <Link>
+              <ZIcon name="search" />
+            </Link>
+            <Link>
+              <ZIcon name="dowload" />
+            </Link>
+          </Box>
+        </Flex>
+      </div>
+    </div>
+  )
+}

sections/ShowData/Methods.tsx

@@ -0,0 +1,3 @@
+export default function Show() {
+  return <div>Metodos de pago</div>
+}

sections/ShowData/Password.tsx

@@ -0,0 +1,37 @@
+import styles from "../../styles/sections/Show.module.css"
+import { FormLabel, Input, Button, Text } from "@chakra-ui/react"
+
+export default function Show() {
+  return (
+    <div>
+      <Text className={styles.labelPrincipal}>Contraseña</Text>
+      <p className={styles.labelsub}>
+        Puedes cambiar tu contraseña cuantas veces lo necesites. Te recomendamos
+        utilizar numeros y letras.
+      </p>
+      <div className={styles.Entrada}>
+        <div>
+          <FormLabel className={styles.label}>Contraseña actual</FormLabel>
+          <Input
+            borderColor="black.100"
+            type={"password"}
+            placeholder="Ingrese contraseña actual"
+            className={styles.Entrada}
+          />
+        </div>
+        <div>
+          <FormLabel className={styles.label}>Nueva contraseña</FormLabel>
+          <Input
+            borderColor="black.100"
+            type={"password"}
+            placeholder="Ingrese contraseña nueva"
+            className={styles.Entrada}
+          />
+        </div>
+        <div className={styles.Boton}>
+          <Button variant="primary">Guardar Cambios</Button>
+        </div>
+      </div>
+    </div>
+  )
+}

sections/ShowData/Pay.tsx

@@ -0,0 +1,40 @@
+import styles from "../../styles/sections/Show.module.css"
+import { Box, Text, Button, Flex, Spacer } from "@chakra-ui/react"
+
+export default function Show() {
+  return (
+    <div>
+      <Text className={styles.labelPrincipal}>Realizar Pago</Text>
+      <p className={styles.labelsub}>
+        Puedes revisar tu lista de pendientes de pago aquí.
+      </p>
+      <div>
+        <Flex backgroundColor="gray.200" padding="2" marginBottom="20px">
+          <Box p="2">
+            <Text size="md">Nombre del servicio:</Text>
+            <Text size="md">Monto:</Text>
+          </Box>
+          <Spacer />
+          <Box>
+            <Button bg="primary" p={4} color="white" mr="4" my="4">
+              Pagar
+            </Button>
+          </Box>
+        </Flex>
+
+        <Flex backgroundColor="gray.200" padding="2" marginBottom="20px">
+          <Box p="2">
+            <Text size="md">Nombre del servicio:</Text>
+            <Text size="md">Monto:</Text>
+          </Box>
+          <Spacer />
+          <Box>
+            <Button bg="primary" p={4} color="white" mr="4" my="4">
+              Pagar
+            </Button>
+          </Box>
+        </Flex>
+      </div>
+    </div>
+  )
+}

sections/ShowData/Show.tsx

@@ -1,50 +1,49 @@
-import { Link, FormLabel, Input, Button } from "@chakra-ui/react"
 import styles from "../../styles/sections/Show.module.css"
+import ShowData from "../../sections/ShowData/Data"
+import ShowPassword from "../../sections/ShowData/Password"
+import ShowPay from "../../sections/ShowData/Pay"
+import ShowHistory from "../../sections/ShowData/History"
+import ShowMethods from "../../sections/ShowData/Methods"
+import { TabList, TabPanels, TabPanel, Tab, Tabs, Text } from "@chakra-ui/react"
 
 export default function Show() {
   return (
     <div className={styles.conteiner}>
-      <div className={styles.conteinerSinFondo}></div>
       <div className={styles.conteinerConFondo}></div>
       <div className={styles.continerSup}>
-        <div className={styles.conteinerForm}>
-          <h1 className={styles.labelPrincipal}>Datos personales</h1>
-          <p className={styles.labelsub}>
-            Puedes cambiar los datos de tu perfil cuantas veces lo consideres
-            necesario.
-          </p>
-          <FormLabel className={styles.label}>Nombres</FormLabel>
-          <Input
-            borderColor="black.100"
-            className={styles.Entrada}
-            placeholder="Escribe tus nombres aca aquí"
-          />
-          <FormLabel className={styles.label}>Apellidos</FormLabel>
-          <Input
-            borderColor="black.100"
-            className={styles.Entrada}
-            placeholder="Escribe tus apellidos aquí"
-          />
-          <FormLabel className={styles.label}>Correo electrónico</FormLabel>
-          <Input
-            borderColor="black.100"
-            className={styles.Entrada}
-            type="email"
-            placeholder="Escribe tu correo aquí"
-          />
-          <Button variant="secondary" className={styles.Boton}>
-            Guardar Cambios
-          </Button>
-        </div>
-        <div className={styles.conteinerList}>
-          <h1 className={styles.titlesub}>Editar Perfil</h1>
-          <Link className={styles.linksub}>Datos personales</Link>
-          <Link className={styles.linksub}>Contraseña</Link>
-          <h1 className={styles.titlesub}>Mis Pagos</h1>
-          <Link className={styles.linksub}>Realizar pagos</Link>
-          <Link className={styles.linksub}>Historial</Link>
-          <Link className={styles.linksub}>Métodos de pago</Link>
-        </div>
+        <Tabs align="center" orientation="vertical" variant="unstyled" isLazy>
+          <div className={styles.conteinerList}>
+            <TabList>
+              <Text className={styles.titlesub}>Mi panel</Text>
+              <div className={styles.linksub}>
+                <Tab>Datos Personales</Tab>
+                <Tab>Contraseña</Tab>
+                <Tab>Realizar Pagos</Tab>
+                <Tab>Historial</Tab>
+                <Tab>Metódos de pago</Tab>
+              </div>
+            </TabList>
+          </div>
+          <div className={styles.conteinerForm}>
+            <TabPanels>
+              <TabPanel>
+                <ShowData></ShowData>
+              </TabPanel>
+              <TabPanel>
+                <ShowPassword></ShowPassword>
+              </TabPanel>
+              <TabPanel>
+                <ShowPay></ShowPay>
+              </TabPanel>
+              <TabPanel>
+                <ShowHistory></ShowHistory>
+              </TabPanel>
+              <TabPanel>
+                <ShowMethods></ShowMethods>
+              </TabPanel>
+            </TabPanels>
+          </div>
+        </Tabs>
       </div>
     </div>
   )