Skip to content

Commit

Permalink
refactor(member card): retrieve initial member card styling
Browse files Browse the repository at this point in the history 
retrieve initial member card styling

fix #101
  • Loading branch information
@liliumorion
liliumorion committed Nov 22, 2023
1 parent 8e55474 commit 627b2f1
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 96 deletions.
71 changes: 65 additions & 6 deletions src/components/MemberCard/__test__/__snapshots__/MemberCard.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,72 @@

exports[`renders correctly 1`] = `
<div
className="container"
className="card rounded-3xl group"
>
<figure
className="relative h-64 w-52 rounded-3xl"
>
<img
alt="name"
className="group-hover:scale-110 saturate-0 group-hover:saturate-100 object-cover w-full h-full duration-500"
data-nimg="fill"
decoding="async"
fetchpriority="high"
onError={[Function]}
onLoad={[Function]}
sizes="100vw"
src="/_next/image?url=%2Fimg.jpg&w=3840&q=75"
srcSet="/_next/image?url=%2Fimg.jpg&w=640&q=75 640w, /_next/image?url=%2Fimg.jpg&w=750&q=75 750w, /_next/image?url=%2Fimg.jpg&w=828&q=75 828w, /_next/image?url=%2Fimg.jpg&w=1080&q=75 1080w, /_next/image?url=%2Fimg.jpg&w=1200&q=75 1200w, /_next/image?url=%2Fimg.jpg&w=1920&q=75 1920w, /_next/image?url=%2Fimg.jpg&w=2048&q=75 2048w, /_next/image?url=%2Fimg.jpg&w=3840&q=75 3840w"
style={
Object {
"bottom": 0,
"color": "transparent",
"height": "100%",
"left": 0,
"objectFit": undefined,
"objectPosition": undefined,
"position": "absolute",
"right": 0,
"top": 0,
"width": "100%",
}
}
/>
</figure>
<div
className="icon"
/>
<div
className="content"
/>
className="absolute bottom-[5%] flex flex-col gap-1 px-2"
>
<h3
className="text-white font-bold"
>
name
</h3>
<div
className="flex gap-2"
>
<a
className="text-white border border-white rounded-full text-sm px-2 h-6 hover:bg-black hover:bg-opacity-30 "
href="https://github.com/"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
rel="noopener noreferrer"
target="_blank"
>
GitHub
</a>
<a
className="text-white border border-white rounded-full text-sm px-2 h-6 hover:bg-black hover:bg-opacity-30 "
href="https://www.linkedin.com/"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
rel="noopener noreferrer"
target="_blank"
>
LinkedIn
</a>
</div>
</div>
</div>
`;
117 changes: 29 additions & 88 deletions src/components/MemberCard/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,97 +1,38 @@
import Image from "next/image";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import { AiFillLinkedin } from "react-icons/ai";
import { FaGithub } from "react-icons/fa";

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

function MemberCard({ teamMembers = [] }) {
const [activeContent, setActiveContent] = useState(null);

useEffect(() => {
const imgBx = document.querySelectorAll(`.${styles.imgbx}`);

const handleMouseOrTouch = (index) => {
setActiveContent(index + 1);
};

imgBx.forEach((element, index) => {
element.addEventListener("mouseenter", () => handleMouseOrTouch(index));
element.addEventListener("click", () => handleMouseOrTouch(index));
element.addEventListener("touchstart", (event) => {
event.preventDefault();
handleMouseOrTouch(index);
});
});

return () => {
imgBx.forEach((element, index) => {
element.removeEventListener("mouseenter", () =>
handleMouseOrTouch(index)
);
element.removeEventListener("click", () => handleMouseOrTouch(index));
element.removeEventListener("touchstart", () =>
handleMouseOrTouch(index)
);
});
};
}, []);

function MemberCard({ name, github, linkedin, imageUrl }) {
return (
<div className={styles.container}>
<div className={styles.icon}>
{teamMembers.map((member, index) => (
<div
key={index}
className={`${styles.imgbx} ${
index + 1 === activeContent ? styles.active : ""
}`}
style={{ "--i": index + 1 }}
<div className='card rounded-3xl group'>
<figure className='relative h-64 w-52 rounded-3xl'>
<Image
src={imageUrl}
alt={name}
fill
priority
className='group-hover:scale-110 saturate-0 group-hover:saturate-100 object-cover w-full h-full duration-500'
/>
</figure>
<div className='absolute bottom-[5%] flex flex-col gap-1 px-2'>
<h3 className='text-white font-bold'>{name}</h3>
<div className='flex gap-2'>
<Link
href={github}
target='_blank'
rel='noopener noreferrer'
className='text-white border border-white rounded-full text-sm px-2 h-6 hover:bg-black hover:bg-opacity-30 '
>
<Image
src={member.imageUrl}
alt={`recoded${index + 1}`}
className={styles.Image}
/>
</div>
))}
</div>
<div className={styles.content}>
{teamMembers.map((member, index) => (
<div
key={index}
className={`${styles.contentBx} ${
index + 1 === activeContent ? styles.active : ""
}`}
id={`content${index + 1}`}
GitHub
</Link>
<Link
href={linkedin}
target='_blank'
rel='noopener noreferrer'
className='text-white border border-white rounded-full text-sm px-2 h-6 hover:bg-black hover:bg-opacity-30 '
>
<div className={styles.card}>
<div className={styles.imgBX}>
<Image
src={member.imageUrl}
alt={`recoded${index + 1}`}
className={styles.Image}
/>
</div>
<div className={styles.textBx}>
<h2>{member.name}</h2>
<ul className={styles.sci}>
<li>
<Link href={member.github}>
<FaGithub />
</Link>
</li>
<li>
<Link href={member.linkedin}>
<AiFillLinkedin />
</Link>
</li>
</ul>
</div>
</div>
</div>
))}
LinkedIn
</Link>
</div>
</div>
</div>
);
Expand Down
12 changes: 10 additions & 2 deletions src/pages/about/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,17 @@ function AboutPage({ t, _nextI18Next }) {
</h1>
<section
dir={initialLocale === "ar" ? "rtl" : "ltr"}
className='flex justify-center items-center bg-black h-[550px] lg:max-w-screen-md mx-auto'
className='flex flex-wrap gap-4 items-center justify-center w-full'
>
<MemberCard teamMembers={team} />
{team.map((member) => (
<MemberCard
key={member.name}
name={member.name}
github={member.github}
linkedin={member.linkedin}
imageUrl={member.imageUrl}
/>
))}
</section>
</Container>
</>
Expand Down

0 comments on commit 627b2f1

Please sign in to comment.