Skip to content

Commit

Permalink
create ProfileItemInfo component for CustomerProfile and UserProfile; b…
Browse files Browse the repository at this point in the history
  • Loading branch information
JackDev21 committed Aug 13, 2024
1 parent 9aab550 commit 8b4ebf2
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 105 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
@tailwind components;

@layer components {
.Profile {
@apply relative bottom-3 flex w-[95%] flex-col items-center gap-2;
}

.ProfileInfo {
@apply inline w-full;
}
.SpanText {
@apply w-auto text-[1.1rem] font-bold text-orange-800 underline;
}

.ProfileInfo {
@apply w-full text-xl font-bold;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import "./index.css"

export default function ProfileInfoItem({ label, value }) {
return (
<div className="ProfileInfo">
<p className="SpanText">{label}</p>
{value && <p className="ProfileInfo">{value}</p>}
</div>
)
}
Original file line number Diff line number Diff line change
@@ -1,19 +1,7 @@
@tailwind components;

@layer components {
.CustomerProfile {
@apply text-xl font-extrabold;
}

.CustomerInfo {
@apply flex w-[90%] flex-col gap-4 rounded-2xl bg-[#0000002a] p-3 shadow-custom-shadow;
}

.CustomerInfo > p {
@apply inline;
}

.SpanColor {
@apply text-orange-800;
.CustomerProfile p {
@apply text-xl font-bold;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { RiFileUserLine } from "react-icons/ri"
import Header from "../Header"
import Footer from "../core/Footer"
import Main from "../core/Main"
import ProfileInfoItem from "../ProfileItemInfo"

import logic from "../../logic"

Expand All @@ -32,43 +33,13 @@ export default function CustomerProfile() {
<>
{customer?.companyName && <Header iconUser={<RiFileUserLine />}>{customer.companyName}</Header>}
<Main className="CustomerProfile">
<div className="CustomerInfo">
{customer?.username && (
<p>
<span className="SpanColor">Nombre de Usuario</span>
<br /> {customer.username}
</p>
)}
{customer?.companyName && (
<p>
<span className="SpanColor">Nombre Empresa</span>
<br /> {customer.companyName}
</p>
)}
{customer?.email && (
<p>
<span className="SpanColor">Email</span>
<br /> {customer.email}
</p>
)}
{customer?.taxId && (
<p>
<span className="SpanColor">CIF/NIF</span>
<br /> {customer.taxId}
</p>
)}
{customer?.phone && (
<p>
<span className="SpanColor">Nº Teléfono</span>
<br /> {customer.phone}
</p>
)}
{customer?.address && (
<p>
<span className="SpanColor"> Dirección</span>
<br /> {customer.address}
</p>
)}
<div className="ProfileInfoContainer">
<ProfileInfoItem label="Nombre de usuario" value={customer?.username} />
<ProfileInfoItem label="Empresa" value={customer?.companyName} />
<ProfileInfoItem label="Email" value={customer?.email} />
<ProfileInfoItem label="CIF/NIF" value={customer?.taxId} />
<ProfileInfoItem label="Nº Móvil" value={customer?.phone} />
<ProfileInfoItem label="Dirección " value={customer?.address} />
</div>
</Main>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,6 @@
@apply w-20 rounded-2xl;
}

.Profile {
@apply relative bottom-3 flex w-[95%] flex-col items-center gap-2;
}

.ProfileInfo {
@apply inline w-full;
}
.SpanText {
@apply w-auto text-sm font-bold text-orange-800;
}

.ProfileInfo {
@apply w-full text-xl font-bold;
}

.HeaderProfile .IconLeftHeader {
@apply -top-7;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useEffect, useState } from "react"
import Header from "../Header"
import Main from "../core/Main"
import Footer from "../core/Footer"
import ProfileInfoItem from "../ProfileItemInfo"

import { LiaUserEditSolid } from "react-icons/lia"

Expand Down Expand Up @@ -50,45 +51,15 @@ export default function UserProfile() {
</Header>

<Main className="MainProfile">
<div className="Profile">
<div className="ProfileInfo">
<p className="SpanText">Nombre de Usuario</p>
{user?.username && <p className="ProfileInfo">{user.username}</p>}
</div>

<div className="ProfileInfo">
<p className="SpanText">Email</p>
{user?.email && <p className="ProfileInfo">{user.email}</p>}
</div>

<div className="ProfileInfo">
<p className="SpanText">Nombre y Apellidos</p>
{user?.fullName && <p className="ProfileInfo">{user.fullName}</p>}
</div>

<div className="ProfileInfo">
<p className="SpanText">Nombre de Empresa</p>
{user?.companyName && <p className="ProfileInfo">{user.companyName}</p>}
</div>

<div className="ProfileInfo">
<p className="SpanText">Dirección</p>
{user?.address && <p className="ProfileInfo">{user.address}</p>}
</div>

<div className="ProfileInfo">
<p className="SpanText">CIF/NIF</p>
{user?.taxId && <p className="ProfileInfo">{user.taxId}</p>}
</div>

<div className="ProfileInfo">
<p className="SpanText">Nº Móvil</p>
{user?.phone && <p className="ProfileInfo">{user.phone}</p>}
</div>

<div className="ProfileInfo">
<p className="SpanText">IBAN</p> {user?.bankAccount && <p className="ProfileInfo">{user.bankAccount}</p>}
</div>
<div className="ProfileInfoContainer">
<ProfileInfoItem label="Nombre de usuario" value={user?.username} />
<ProfileInfoItem label="Nombre y Apellidos" value={user?.fullName} />
<ProfileInfoItem label="Empresa" value={user?.companyName} />
<ProfileInfoItem label="Dirección" value={user?.address} />
<ProfileInfoItem label="CIF/NIF" value={user?.taxId} />
<ProfileInfoItem label="Nº Móvil" value={user?.phone} />
<ProfileInfoItem label="Email" value={user?.email} />
<ProfileInfoItem label="IBAN" value={user?.bankAccount} />
</div>
</Main>
<Footer>FactuClient</Footer>
Expand Down

0 comments on commit 8b4ebf2

Please sign in to comment.