Skip to content

Commit

Permalink
Refactor: Remove officename from employees page and styling :)
Browse files Browse the repository at this point in the history
  • Loading branch information
@FelixAL07
FelixAL07 committed Nov 14, 2024
1 parent b7ab5e0 commit bac66f9
Show file tree
Hide file tree
Showing 6 changed files with 126 additions and 139 deletions.
3 changes: 0 additions & 3 deletions src/components/consultantCard/ConsultantCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,6 @@ export default function ConsultantCard({
{competence}
</Text>
))}
{consultant.officeName && (
<p className={styles.consultantRole}>{consultant.officeName}</p>
)}
{consultant.email && (
<p className={styles.consultantEmail}>{consultant.email}</p>
)}
Expand Down
19 changes: 11 additions & 8 deletions src/components/consultantCard/consultantCard.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,23 @@
}

.consultantName {
color: var(--primary-black);
font-size: 16px;
color: #282828;
font-size: 1rem;
font-weight: 600;
line-height: 120%;
}

.consultantRole {
color: var(--primary-black);
font-size: 16px;
font-weight: 300;
color: #282828;
font-size: 1rem;
font-weight: 400;
line-height: 120%;
}

.consultantEmail,
.consultantTelephone {
color: var(--primary-black);
font-size: 14px;
font-weight: 300;
color: #282828;
font-size: 0.75rem;
font-weight: 400;
line-height: 120%;
}
12 changes: 3 additions & 9 deletions ...s/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
import { loadStudioQuery } from "studio/lib/store";

import styles from "./customerCaseConsulants.module.css";
import EmployeeComponent from "src/components/employeeComponent/employeeComponent";

export interface CustomerCaseConsultantsProps {
language: string;
Expand All @@ -33,17 +32,12 @@ export default async function CustomerCaseConsultants({
<Text type={"h3"}>{t("in_project")}</Text>
<div className={styles.content}>
{consultants.map((consultant) => (
<>
{/* <ConsultantCard
<ConsultantCard
key={consultant.email}
currentLanguage={language}
consultant={consultant}
employeePageSlug={employeePageSlug} />
*/}
<EmployeeComponent
consultant={consultant}
employeePageSlug={employeePageSlug} />
</>
employeePageSlug={employeePageSlug}
/>
))}
</div>
</div>
Expand Down
101 changes: 46 additions & 55 deletions src/components/employeeComponent/employeeComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,58 @@

import Image from "next/image";
import { ChewbaccaEmployee } from "src/types/employees";

import styles from "./employeeComponent.module.css"
import formatPhoneNumber from "../utils/formatPhoneNumber";
import Text from "src/components/text/Text";
import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
import { ChewbaccaEmployee } from "src/types/employees";

import styles from "./employeeComponent.module.css";
import Link from "next/link";
import { aliasFromEmail } from "src/utils/employees";

export interface EmployeeComponentProps {
consultant: ChewbaccaEmployee;
employeePageSlug?: string;
consultant: ChewbaccaEmployee;
employeePageSlug?: string;
language: string;
}


export default function EmployeeComponent({
consultant,
employeePageSlug
consultant,
employeePageSlug,
language
}: EmployeeComponentProps) {

return (
consultant.imageUrl &&
consultant.name &&
consultant.email && (
<div className={styles.peopleWrapper}>
<div className={styles.peopleConsultantImage}>
<Image
src={consultant.imageUrl}
alt=""
style={{ objectFit: "cover" }}
fill={true}
/>
</div>
<div className={styles.peopleConsultantInfoWrapper}>

<div className={styles.peopleConsultantInfo}>

<p className={styles.peopleConsultantName}>
{consultant.name}
</p>

{consultant.competences.map((competence) => (
<Text type="labelRegular" key={competence}>
{competence}
</Text>
))}
</div>


<div className={styles.peopleContactInfo}>

<p>
{consultant.email}
</p>
{consultant.telephone &&
<p>
{formatPhoneNumber(consultant.telephone)}
</p>
}
</div>
</div>
</div>
)

return (
consultant.imageUrl &&
consultant.name &&
consultant.email && (
<div className={styles.peopleWrapper}>
<Link href={`/${language}/${employeePageSlug}/${aliasFromEmail(consultant.email)}`}>
<div className={styles.peopleConsultantImage}>
<Image
src={consultant.imageUrl}
alt=""
style={{ objectFit: "cover" }}
fill={true}
/>
</div>
</Link>
<div className={styles.peopleConsultantInfoWrapper}>
<div className={styles.peopleConsultantInfo}>
<p className={styles.peopleConsultantName}>{consultant.name}</p>

{consultant.competences.map((competence) => (
<Text type="labelRegular" key={competence}>
{competence}
</Text>
))}
</div>

<div className={styles.peopleContactInfo}>
<p>{consultant.email}</p>
{consultant.telephone && (
<p>{formatPhoneNumber(consultant.telephone)}</p>
)}
</div>
</div>
</div>
)
);
}

7 changes: 2 additions & 5 deletions src/components/employeePage/EmployeePage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import Image from "next/image";

import EmployeeComponent from "src/components/employeeComponent/employeeComponent";
import Text from "src/components/text/Text";
import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
import { ChewbaccaEmployee } from "src/types/employees";

import styles from "./employeePage.module.css";

import EmployeeComponent from "../employeeComponent/employeeComponent";
import { languageID } from "i18n/languageSchemaField";

export interface EmployeePageProps {
employee: ChewbaccaEmployee;
}
Expand Down Expand Up @@ -52,8 +50,7 @@ export default function EmployeePage({ employee }: EmployeePageProps) {
<Text type="bodyNormal" key={competence}>
{competence}
</Text>
))}
<EmployeeComponent consultant={employee}></EmployeeComponent>
))}
</div>
</div>
</div>
Expand Down
123 changes: 64 additions & 59 deletions src/components/sections/employees/Employees.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,73 +47,78 @@ export default async function Employees({ language, section }: EmployeesProps) {
const total = employees.length;

return (

<>
<>

<div className={styles.wrapper}>
<div className={styles.employees}>
<h1 className={styles.header}>{section.basicTitle}</h1>
<div className={styles.employeeCountWrapper}>
<p className={styles.employeeCount}>
Viser <span className={styles.employeeCountValue}>{total}</span> av{" "}
<span className={styles.employeeCountValue}>{total}</span>{" "}
konsulenter
</p>
</div>
<div className={styles.peopleContainer}>
{employees.map((employee) => (
<EmployeeComponent

consultant={employee}
employeePageSlug={employeesPageSlug} />
employeePageSlug={employeesPageSlug}
language={language}/>
))}
</div>
</div>
</div>



</>
// <>
// <div className={styles.wrapper}>
// <div className={styles.employees}>
// <h1 className={styles.header}>{section.basicTitle}</h1>
// <div className={styles.employeeCountWrapper}>
// <p className={styles.employeeCount}>
// Viser <span className={styles.employeeCountValue}>{total}</span> av{" "}
// <span className={styles.employeeCountValue}>{total}</span>{" "}
// konsulenter
// </p>
// </div>
// {employees.map(
// (employee) =>
// employee.imageThumbUrl &&
// employee.name &&
// employee.email && (
// <div key={employee.email} className={styles.employee}>
// <Link
// href={`/${language}/${employeesPageSlug}/${aliasFromEmail(employee.email)}`}
// >
// <div className={styles.employeeImage}>
// <Image
// src={employee.imageUrl ?? employee.imageThumbUrl}
// alt={employee.name}
// objectFit="cover"
// fill={true}
// />
// </div>
// </Link>
// <div className={styles.employeeInfo}>
// <p className={styles.employeeName}>{employee.name}</p>
// {employee.competences.map((competence) => (
// <Text
// type="labelRegular"
// key={competence}
// className={styles.employeeRole}
// >
// {competence}
// </Text>
// ))}
// {employee.email && (
// <p className={styles.employeeEmail}>{employee.email}</p>
// )}
// {employee.telephone && (
// <p className={styles.employeeTelephone}>
// {formatPhoneNumber(employee.telephone)}
// </p>
// )}
// </div>
// </div>
// ),
// )}
// </div>
// </div>
</>
)
{/* {employees.map(
(employee) =>
employee.imageThumbUrl &&
employee.name &&
employee.email && (
<div key={employee.email} className={styles.employee}>
<Link
href={`/${language}/${employeesPageSlug}/${aliasFromEmail(employee.email)}`}
>
<div className={styles.employeeImage}>
<Image
src={employee.imageUrl ?? employee.imageThumbUrl}
alt={employee.name}
objectFit="cover"
fill={true}
/>
</div>
</Link>
<div className={styles.employeeInfo}>
<p className={styles.employeeName}>{employee.name}</p>
{employee.competences.map((competence) => (
<Text
type="labelRegular"
key={competence}
className={styles.employeeRole}
>
{competence}
</Text>
))}
{employee.email && (
<p className={styles.employeeEmail}>{employee.email}</p>
)}
{employee.telephone && (
<p className={styles.employeeTelephone}>
{formatPhoneNumber(employee.telephone)}
</p>
)}
</div>
</div>
),
)}
</div>
</div> */}


);

}

0 comments on commit bac66f9

Please sign in to comment.