Skip to content

Commit 73f8d9a

Browse files
anandmindfireanandmindfire
authored
Merge pull request #168 from ayusmanmindfire/fix/cardDesign
Fix/card design
2 parents 47110b4 + b7c2ce3 commit 73f8d9a

File tree

2 files changed

+112
-51
lines changed

2 files changed

+112
-51
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ bun start:build
8787
## List of Contributors
8888

8989
- [lakinmindfire](https://github.com/lakinmindfire)
90+
- [anandmindfire](https://github.com/anandmindfire)
9091
- [VershalaTandon](https://github.com/VershalaTandon)
9192
- [prashant-mindfire](https://github.com/prashant-mindfire)
9293
- [aryanxorian](https://github.com/aryanxorian)

‎src/app/projects/components/ProjectCard.tsx‎

Lines changed: 111 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
'use client'
12
import Link from "next/link";
23
import React from "react";
4+
import {useState} from 'react';
35
import github from "../../../../public/images/social-media/github.png";
46
import docs from "../../../../public/images/social-media/docs.svg";
57
import Image from "next/image";
@@ -24,66 +26,124 @@ export default function ProjectCard({
2426
stars,
2527
tags,
2628
}: Props) {
29+
const [showAllTags, setShowAllTags] = useState(false);
30+
const [expandDescription, setExpandDescription] = useState(false);
31+
2732
return (
28-
<div className='border-2 p-8 transition-[box-shadow] shadow-none hover:shadow-xl bg-slate-50/70 max-w-full'>
29-
<div className='flex justify-between items-start'>
30-
<h3 className='font-bold text-lg tracking-widest text-mindfire-text-black capitalize'>
31-
{title}
32-
</h3>
33-
{parentTitle !== "Upcoming Projects" && stars !== undefined && (
34-
<div className='flex items-center gap-1 bg-gray-100 rounded-full p-1'>
35-
<AiFillStar className='text-yellow-400' />
36-
<span className='text-sm text-gray-600'>{stars}</span>
33+
<div className='border-2 p-8 transition-[box-shadow] shadow-none hover:shadow-xl bg-slate-50/70 max-w-full h-64 flex flex-col relative'>
34+
{/* Top content section */}
35+
<div className='flex-1 flex flex-col overflow-hidden'>
36+
<div className='flex justify-between items-start mb-3'>
37+
<h3 className='font-bold text-lg tracking-widest text-mindfire-text-black capitalize truncate pr-2'>
38+
{title}
39+
</h3>
40+
{parentTitle !== "Upcoming Projects" && stars !== undefined && (
41+
<div className='flex items-center gap-1 bg-gray-100 rounded-full p-1 flex-shrink-0'>
42+
<AiFillStar className='text-yellow-400' />
43+
<span className='text-sm text-gray-600'>{stars}</span>
44+
</div>
45+
)}
46+
</div>
47+
48+
{/*Description that expands on click */}
49+
<div
50+
className={`mb-3 relative cursor-pointer ${expandDescription ? 'max-h-[72px] overflow-y-auto' : ''}`}
51+
onClick={() => setExpandDescription(!expandDescription)}
52+
>
53+
<p className={`text-mf-dark tracking-wide leading-6 ${expandDescription ? '' : 'line-clamp-3'}`}>
54+
{shortDescription}
55+
</p>
56+
{expandDescription && (
57+
<span className="text-xs text-blue-500 mt-1 block">less</span>
58+
)}
59+
</div>
60+
61+
{parentTitle !== "Upcoming Projects" && tags && tags.length > 0 && (
62+
<div className='mb-2'>
63+
<div className={`flex gap-2 max-w-full ${showAllTags ? 'overflow-x-auto pb-2' : 'overflow-hidden'}`}>
64+
{showAllTags ? (
65+
tags.map((tag, index) => (
66+
<span
67+
key={index}
68+
className='px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-full border border-red-500 truncate flex-shrink-0'
69+
>
70+
{tag}
71+
</span>
72+
))
73+
) : (
74+
tags.slice(0, 2).map((tag, index) => (
75+
<span
76+
key={index}
77+
className='px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-full border border-red-500 truncate max-w-[100px]'
78+
>
79+
{tag}
80+
</span>
81+
))
82+
)}
83+
{!showAllTags && tags.length > 2 && (
84+
<button
85+
onClick={(e) => {
86+
e.stopPropagation();
87+
setShowAllTags(true);
88+
}}
89+
className='px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200 cursor-pointer'
90+
>
91+
+{tags.length - 2} more
92+
</button>
93+
)}
94+
{showAllTags && (
95+
<button
96+
onClick={(e) => {
97+
e.stopPropagation();
98+
setShowAllTags(false);
99+
}}
100+
className='px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200 cursor-pointer flex-shrink-0'
101+
>
102+
Show less
103+
</button>
104+
)}
105+
</div>
37106
</div>
38107
)}
39108
</div>
40-
<p className='mt-3 text-mf-dark tracking-wide leading-6'>
41-
{shortDescription}
42-
</p>
43-
{parentTitle !== "Upcoming Projects" && tags && tags.length > 0 && (
44-
<div className='flex flex-wrap gap-2 mt-4 max-w-full'>
45-
{tags.map((tag, index) => (
46-
<span
47-
key={index}
48-
className='px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-full border border-red-500 truncate'
49-
>
50-
{tag}
51-
</span>
52-
))}
53-
</div>
54-
)}
109+
110+
{/* Footer section */}
55111
{parentTitle !== "Upcoming Projects" &&
56112
(githubUrl || documentationUrl) &&
57113
(githubUrl !== "NA" || documentationUrl !== "NA") && (
58-
<div className='flex gap-4 justify-start mt-6 pt-6 border-t-2'>
59-
{githubUrl && githubUrl !== "NA" && (
60-
<Link
61-
href={githubUrl}
62-
target='_blank'
63-
className='flex items-center gap-2 px-3 py-1.5 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors'
64-
>
65-
<Image
66-
src={github}
67-
height={20}
68-
width={20}
69-
alt='Repository'
70-
className='rounded-full'
71-
/>
72-
<span className='text-sm text-gray-600'>Repository</span>
73-
</Link>
74-
)}
75-
{documentationUrl && documentationUrl !== "NA" && (
76-
<Link
77-
href={documentationUrl}
78-
target='_blank'
79-
className='flex items-center gap-2 px-3 py-1.5 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors'
80-
>
81-
<Image src={docs} height={20} width={20} alt='Documentation' />
82-
<span className='text-sm text-gray-600'>Docs</span>
83-
</Link>
84-
)}
114+
<div className='absolute bottom-0 left-0 right-0 mx-8'>
115+
<div className='border-t-2 my-2'></div>
116+
<div className='flex gap-4 justify-center my-2'>
117+
{githubUrl && githubUrl !== "NA" && (
118+
<Link
119+
href={githubUrl}
120+
target='_blank'
121+
className='flex items-center gap-2 px-3 py-1.5 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors'
122+
>
123+
<Image
124+
src={github}
125+
height={20}
126+
width={20}
127+
alt='Repository'
128+
className='rounded-full'
129+
/>
130+
<span className='text-sm text-gray-600'>Repository</span>
131+
</Link>
132+
)}
133+
{documentationUrl && documentationUrl !== "NA" && (
134+
<Link
135+
href={documentationUrl}
136+
target='_blank'
137+
className='flex items-center gap-2 px-3 py-1.5 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors'
138+
>
139+
<Image src={docs} height={20} width={20} alt='Documentation' />
140+
<span className='text-sm text-gray-600'>Docs</span>
141+
</Link>
142+
)}
143+
</div>
85144
</div>
86145
)}
87146
</div>
88147
);
148+
89149
}

0 commit comments

Comments
 (0)