Skip to content

Commit

Permalink
refactor: add projectCard component
Browse files Browse the repository at this point in the history
  • Loading branch information
ljc1991 committed Oct 30, 2023
1 parent c537347 commit 4adafd2
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 41 deletions.
45 changes: 4 additions & 41 deletions homepage/src/components/cards/card.jsx
Original file line number Diff line number Diff line change
@@ -1,48 +1,11 @@
import Image from 'next/image';
import DefaultCard from './defaultCard';
import { ParseMarkdownAndHtml } from '../parseMarkdownAndHtml';
import ProjectCard from './projectCard';

const Card = ({ card }) => {
if (card.data.type !== 'project') {
return <DefaultCard card={card} />;
} else {
return (
<div className="col-md-4 mb-3" id={card.data.id}>
<div
className="section-main"
style={{ border: `1rem solid ${card.data.color.background}` }}
>
<h3>{card.data.title}</h3>
<div>
<div className="d-flex flex-wrap">
{card.data.avatarList.map((avatar) => (
<div
key={avatar.data.title}
className="col-3 avatar avatar-list"
style={{
backgroundColor: `${avatar.data.color.background}`,
border: `3px solid ${avatar.data.color.border}`,
}}
>
<div
style={{
backgroundImage: `url(${avatar.data.image})`,
}}
>
&nbsp;
</div>
</div>
))}
</div>
<strong>{card.data.description}</strong>
<ParseMarkdownAndHtml markdown={true}>
{card.content}
</ParseMarkdownAndHtml>
</div>
</div>
</div>
);
if (card.data.type === 'project') {
return <ProjectCard card={card} />;
}
return <DefaultCard card={card} />;
};

export default Card;
40 changes: 40 additions & 0 deletions homepage/src/components/cards/projectCard.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { ParseMarkdownAndHtml } from '../parseMarkdownAndHtml';

const ProjectCard = ({ card }) => (
<div className="col-md-4 mb-3" id={card.data.id}>
<div
className="section-main"
style={{ border: `1rem solid ${card.data.color.background}` }}
>
<h3>{card.data.title}</h3>
<div>
<div className="d-flex flex-wrap">
{card.data.avatarList.map((avatar) => (
<div
key={avatar.data.title}
className="col-3 avatar avatar-list"
style={{
backgroundColor: `${avatar.data.color.background}`,
border: `3px solid ${avatar.data.color.border}`,
}}
>
<div
style={{
backgroundImage: `url(${avatar.data.image})`,
}}
>
&nbsp;
</div>
</div>
))}
</div>
<strong>{card.data.description}</strong>
<ParseMarkdownAndHtml markdown={true}>
{card.content}
</ParseMarkdownAndHtml>
</div>
</div>
</div>
);

export default ProjectCard;

0 comments on commit 4adafd2

Please sign in to comment.