Skip to content

Commit

Permalink
add ContactCard component with data
Browse files Browse the repository at this point in the history
  • Loading branch information
olena-ole committed Sep 12, 2023
1 parent c4ae6f4 commit 3ddb4af
Show file tree
Hide file tree
Showing 10 changed files with 166 additions and 54 deletions.
Binary file added src/assets/images/team/ihor_hladkov.jfif
Binary file not shown.
Binary file added src/assets/images/team/maksym_kuznetsov.jfif
Binary file not shown.
Binary file added src/assets/images/team/nazar_baraban.jfif
Binary file not shown.
Binary file added src/assets/images/team/olena_vats.jfif
Binary file not shown.
Binary file added src/assets/images/team/olha_sheliakina.jfif
Binary file not shown.
Binary file added src/assets/images/team/vlad_roznatovskyi.jfif
Binary file not shown.
86 changes: 86 additions & 0 deletions src/components/ContactCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import React from 'react';
import { Contact } from '../types/Contact';
import { FiGithub, FiLinkedin, FiMail, FiSend } from 'react-icons/fi';

type Props = {
contact: Contact;
};

const ContactCard: React.FC<Props> = ({ contact }) => {
const {
name: devName,
image,
motto,
linkedIn,
github,
email,
telegramLink,
} = contact;

return (
<article
className="card box-border p-8 relative
flex flex-col gap-4
border border-secondary rounded-lg
min-w-[272px]
bg-white text-primary
hover:shadow-card"
>
<a href={linkedIn} target="_blank">
<img
alt={devName}
src={require(`../assets/images/team/${image}`)}
className="w-[210px] h-[210px] object-cover rounded-full self-center"
/>
</a>

<h2 className="font-bold text-xl">{devName}</h2>

<ul className="text-secondary">
<li>
<a
href={linkedIn}
className="flex gap-2 items-center hover:text-secondary-accent"
target="_blank"
>
<FiLinkedin />
LinkedIn
</a>
</li>
<li>
<a
href={github}
className="flex gap-2 items-center hover:text-secondary-accent"
target="_blank"
>
<FiGithub />
Github
</a>
</li>
<li>
<a
href={`mailto:${email}`}
className="flex gap-2 items-center hover:text-secondary-accent"
>
<FiMail />
Email
</a>
</li>
<li>
<a
href={telegramLink}
className="flex gap-2 items-center hover:text-secondary-accent"
target="_blank"
>
<FiSend />
Telegram
</a>
</li>
</ul>

<p>{motto}</p>
</article>
);
};

export default ContactCard;
59 changes: 5 additions & 54 deletions src/pages/ContactsPage.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import BreadCrumb from '../components/BreadCrumb';
import ContactCard from '../components/ContactCard';
import { contacts } from '../utils/contacts';

const ContactsPage = () => {
return (
Expand All @@ -15,60 +17,9 @@ const ContactsPage = () => {
</div>

<section className="grid grid-cols-1 gap-4 tablet:grid-cols-2 desktop:grid-cols-4">
<article
className="card box-border p-8 relative
border border-secondary rounded-lg
min-w-[272px] max-h-[440px]
bg-white
hover:shadow-card tablet:max-h-[506px]"
>
<h2>Olena Vats</h2>
</article>
<article
className="card box-border p-8 relative
border border-secondary rounded-lg
min-w-[272px] max-h-[440px]
bg-white
hover:shadow-card tablet:max-h-[506px]"
>
<h2>Olena Vats</h2>
</article>
<article
className="card box-border p-8 relative
border border-secondary rounded-lg
min-w-[272px] max-h-[440px]
bg-white
hover:shadow-card tablet:max-h-[506px]"
>
<h2>Olena Vats</h2>
</article>
<article
className="card box-border p-8 relative
border border-secondary rounded-lg
min-w-[272px] max-h-[440px]
bg-white
hover:shadow-card tablet:max-h-[506px]"
>
<h2>Olena Vats</h2>
</article>
<article
className="card box-border p-8 relative
border border-secondary rounded-lg
min-w-[272px] max-h-[440px]
bg-white
hover:shadow-card tablet:max-h-[506px]"
>
<h2>Olena Vats</h2>
</article>
<article
className="card box-border p-8 relative
border border-secondary rounded-lg
min-w-[272px] max-h-[440px]
bg-white
hover:shadow-card tablet:max-h-[506px]"
>
<h2>Olena Vats</h2>
</article>
{contacts.map((contact) => (
<ContactCard key={contact.id} contact={contact} />
))}
</section>
</main>
);
Expand Down
10 changes: 10 additions & 0 deletions src/types/Contact.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export interface Contact {
name: string;
image: string;
id: string;
telegramLink: string;
github: string;
email: string;
linkedIn: string;
motto: string;
}
65 changes: 65 additions & 0 deletions src/utils/contacts.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { Contact } from '../types/Contact';

export const contacts: Contact[] = [
{
name: 'Maksym Kuznetsov',
image: 'maksym_kuznetsov.jfif',
id: 'dev-0',
telegramLink: 'https://t.me/MaxSchmide',
github: 'https://github.com/MaxSchmide',
email: 'kuznetsov.max.v@gmail.com',
linkedIn: 'https://www.linkedin.com/in/maxschmide/',
motto: "It's not a bug, it's a feature",
},
{
name: 'Olha Sheliakina',
image: 'olha_sheliakina.jfif',
id: 'dev-1',
telegramLink: 'https://t.me/olia_sheliakina',
github: 'https://github.com/OlhaSheliakina',
email: 'olha.sheliakina.mail@gmail.com',
linkedIn: 'https://www.linkedin.com/in/olha-sheliakina-248497283',
motto: "Code, Debug, Don't Cry (Much)",
},
{
name: 'Nazar Baraban',
image: 'nazar_baraban.jfif',
id: 'dev-2',
telegramLink: 'https://t.me/nazar_10_04',
github: 'https://github.com/NazarBaraban',
email: 'barabannazar44@gmail.com',
linkedIn: 'https://www.linkedin.com/in/nazar-baraban-5661b5283/',
motto: 'Programmers never make mistakes, we just have unexpected features',
},
{
name: 'Ihor Hladkov',
image: 'ihor_hladkov.jfif',
id: 'dev-3',
telegramLink: 'https://t.me/ihorhladkov',
github: 'https://github.com/ihorhladkov',
email: 'ihor.hladkov@gmail.com',
linkedIn: 'https://www.linkedin.com/in/ihor-hladkov-b9b481283/',
motto:
'Once, I asked, "What is the meaning of life?" In response, I received, "Read the documentation."',
},
{
name: 'Vlad Roznatovskyi',
image: 'vlad_roznatovskyi.jfif',
id: 'dev-4',
telegramLink: 'https://t.me/perfectAcedia',
github: 'https://github.com/perfectAcedia',
email: 'vladyslav.roznatovskyi@gmail.com',
linkedIn: 'https://www.linkedin.com/in/vladyslav-roznatovskyi-3b9491283/',
motto: 'No desire, no hire',
},
{
name: 'Olena Vats',
image: 'olena_vats.jfif',
id: 'dev-5',
telegramLink: 'https://t.me/olenaOle1',
github: 'https://github.com/olena-ole',
email: 'olenavats.employment@gmail.com',
linkedIn: 'https://www.linkedin.com/in/olena-vats-20ab131b8/',
motto: 'It works on my machine',
},
];

0 comments on commit 3ddb4af

Please sign in to comment.