Skip to content

Commit 8b88cf5

Browse files
Sameer-Saleem1Sameer-Saleem1
authored
added a new card for userprofile that displays the image of the user, name, designation and two button inside the card of 'Add friend' and 'Message'. Also added the copyToClipboard functionality so that when user clicks the button it will copy the code of this card to their clipboard. Also fixed the grid system of the card into a more representable way (#90)
1 parent b921d43 commit 8b88cf5

3 files changed

Lines changed: 194 additions & 42 deletions

File tree

‎components/drip/cards/defaultCard.js‎

Lines changed: 61 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,66 @@
11
const DefaultCard = () => {
2-
return (
3-
<div className="flex flex-row gap-4">
4-
5-
<div className='flex flex-col gap-2 '>
6-
<h2>Default Card</h2>
7-
<div className='flex flex-col w-full max-w-sm gap-2 p-4 rounded-lg shadow shadow-drip-black/30'>
8-
<h3 className="text-2xl font-semibold tracking-tight">Centering a div made easy with Tailwind CSS</h3>
9-
<p>I have been working with Tailwind CSS and I wanted to quickly show you how to center a div using Tailwind.</p>
10-
</div>
11-
</div>
12-
13-
<div className='flex flex-col gap-2 '>
14-
<h2>Default Card + btn</h2>
15-
<div className='flex flex-col w-full max-w-sm gap-2 p-4 rounded-lg shadow shadow-drip-black/30'>
16-
<h3 className="text-2xl font-semibold tracking-tight">Centering a div made easy with Tailwind CSS</h3>
17-
<p>I have been working with Tailwind CSS and I wanted to quickly show you how to center a div using Tailwind.</p>
18-
<button className="px-5 py-3 mt-1 text-sm text-white bg-gray-700 rounded-lg hover:bg-gray-700/90"> Read More</button>
19-
20-
</div>
21-
</div>
22-
23-
<div className='flex flex-col gap-2 '>
24-
<h2>Default Card + btn</h2>
25-
<div className='flex flex-col w-full max-w-sm gap-2 p-4 rounded-lg shadow shadow-drip-black/30'>
26-
<h3 className="text-2xl font-semibold tracking-tight">Centering a div made easy with Tailwind CSS</h3>
27-
<p>I have been working with Tailwind CSS and I wanted to quickly show you how to center a div using Tailwind.</p>
28-
<div>
29-
30-
<button className="inline-flex items-center px-5 py-3 mt-1 text-sm text-white bg-gray-700 rounded-lg hover:bg-gray-700/90 group"> Read More
31-
<svg className={`flex-shrink-0 w-4 h-4 ml-3 text-white group-hover:translate-x-1`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>
2+
return (
3+
<div className="flex flex-row gap-4">
4+
<div className="flex flex-col gap-2 ">
5+
<h2>Default Card</h2>
6+
<div className="flex flex-col w-full max-w-sm gap-2 p-4 rounded-lg shadow shadow-drip-black/30">
7+
<h3 className="text-2xl font-semibold tracking-tight">
8+
Centering a div made easy with Tailwind CSS
9+
</h3>
10+
<p>
11+
I have been working with Tailwind CSS and I wanted to quickly show
12+
you how to center a div using Tailwind.
13+
</p>
14+
</div>
15+
</div>
3216

33-
</button>
34-
</div>
35-
36-
</div>
37-
</div>
17+
<div className="flex flex-col gap-2 ">
18+
<h2>Default Card + btn</h2>
19+
<div className="flex flex-col w-full max-w-sm gap-2 p-4 rounded-lg shadow shadow-drip-black/30">
20+
<h3 className="text-2xl font-semibold tracking-tight">
21+
Centering a div made easy with Tailwind CSS
22+
</h3>
23+
<p>
24+
I have been working with Tailwind CSS and I wanted to quickly show
25+
you how to center a div using Tailwind.
26+
</p>
27+
<button className="px-5 py-3 mt-1 text-sm text-white bg-gray-700 rounded-lg hover:bg-gray-700/90">
28+
{" "}
29+
Read More
30+
</button>
31+
</div>
32+
</div>
3833

39-
34+
<div className="flex flex-col gap-2 ">
35+
<h2>Default Card + btn</h2>
36+
<div className="flex flex-col w-full max-w-sm gap-2 p-4 rounded-lg shadow shadow-drip-black/30">
37+
<h3 className="text-2xl font-semibold tracking-tight">
38+
Centering a div made easy with Tailwind CSS
39+
</h3>
40+
<p>
41+
I have been working with Tailwind CSS and I wanted to quickly show
42+
you how to center a div using Tailwind.
43+
</p>
44+
<div>
45+
<button className="inline-flex items-center px-5 py-3 mt-1 text-sm text-white bg-gray-700 rounded-lg hover:bg-gray-700/90 group">
46+
{" "}
47+
Read More
48+
<svg
49+
className={`flex-shrink-0 w-4 h-4 ml-3 text-white group-hover:translate-x-1`}
50+
xmlns="http://www.w3.org/2000/svg"
51+
viewBox="0 0 24 24"
52+
width="24"
53+
height="24"
54+
>
55+
<path fill="none" d="M0 0h24v24H0z" />
56+
<path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" />
57+
</svg>
58+
</button>
59+
</div>
60+
</div>
4061
</div>
41-
42-
43-
);
44-
}
45-
62+
</div>
63+
);
64+
};
65+
4666
export default DefaultCard;

‎components/drip/cards/userProfileCard.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from "react";
2+
3+
function userProfileCard() {
4+
return (
5+
<div className="flex flex-col gap-2 ">
6+
<h2>Default Card + btn</h2>
7+
<div className="flex flex-col w-full max-w-sm gap-2 p-4 rounded-lg shadow shadow-drip-black/30">
8+
<h3 className="text-2xl font-semibold tracking-tight">
9+
Centering a div made easy with Tailwind CSS
10+
</h3>
11+
<p>
12+
I have been working with Tailwind CSS and I wanted to quickly show you
13+
how to center a div using Tailwind.
14+
</p>
15+
<div>
16+
<button className="inline-flex items-center px-5 py-3 mt-1 text-sm text-white bg-gray-700 rounded-lg hover:bg-gray-700/90 group">
17+
{" "}
18+
Read More
19+
<svg
20+
className={`flex-shrink-0 w-4 h-4 ml-3 text-white group-hover:translate-x-1`}
21+
xmlns="http://www.w3.org/2000/svg"
22+
viewBox="0 0 24 24"
23+
width="24"
24+
height="24"
25+
>
26+
<path fill="none" d="M0 0h24v24H0z" />
27+
<path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" />
28+
</svg>
29+
</button>
30+
</div>
31+
</div>
32+
</div>
33+
);
34+
}
35+
36+
export default userProfileCard;

‎pages/docs/cards.js‎

Lines changed: 97 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export default function Cards() {
88
const cardAreaRef2 = useRef(null);
99
const cardAreaRef3 = useRef(null);
1010
const cardAreaRef4 = useRef(null);
11+
const cardAreaRef5 = useRef(null);
1112
const [CopySuccess, setCopySuccess] = useState(false);
1213
const [cardId, setCardId] = useState();
1314

@@ -42,7 +43,7 @@ export default function Cards() {
4243
"The Card component is used to show data and various information to users; such as blog post, user profiles, image galleries and many more."
4344
}
4445
/>
45-
<section className="grid grid-cols-1 gap-16 md:grid-cols-4">
46+
<section className="grid grid-cols-1 gap-15 md:grid-cols-3 gap-5">
4647
{/* <DefaultCard /> */}
4748
<div
4849
ref={cardAreaRef1}
@@ -167,6 +168,101 @@ export default function Cards() {
167168
""
168169
)}
169170
</div>
171+
172+
{/* UserProfile card */}
173+
174+
<div
175+
ref={cardAreaRef5}
176+
onClick={() => copyToClipboard(cardAreaRef5, "card5")}
177+
className="relative flex flex-col gap-2 "
178+
>
179+
<div class="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow shadow-drip-black/30 cursor-pointer dark:bg-gray-800 dark:border-gray-700 hover:shadow-lg">
180+
<div class="flex justify-end px-4 pt-4">
181+
<button
182+
id="dropdownButton"
183+
data-dropdown-toggle="dropdown"
184+
class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
185+
type="button"
186+
>
187+
<span class="sr-only">Open dropdown</span>
188+
<svg
189+
class="w-5 h-5"
190+
aria-hidden="true"
191+
xmlns="http://www.w3.org/2000/svg"
192+
fill="currentColor"
193+
viewBox="0 0 16 3"
194+
>
195+
<path d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z" />
196+
</svg>
197+
</button>
198+
<div
199+
id="dropdown"
200+
class="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700"
201+
>
202+
<ul class="py-2" aria-labelledby="dropdownButton">
203+
<li>
204+
<a
205+
href="#"
206+
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
207+
>
208+
Edit
209+
</a>
210+
</li>
211+
<li>
212+
<a
213+
href="#"
214+
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
215+
>
216+
Export Data
217+
</a>
218+
</li>
219+
<li>
220+
<a
221+
href="#"
222+
class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
223+
>
224+
Delete
225+
</a>
226+
</li>
227+
</ul>
228+
</div>
229+
</div>
230+
<div class="flex flex-col items-center pb-10">
231+
<img
232+
class="w-24 h-24 mb-3 rounded-full shadow-lg"
233+
src="https://flowbite.com/docs/images/people/profile-picture-3.jpg"
234+
alt="Bonnie image"
235+
/>
236+
<h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">
237+
Bonnie Green
238+
</h5>
239+
<span class="text-sm text-gray-500 dark:text-gray-400">
240+
Visual Designer
241+
</span>
242+
<div class="flex mt-4 md:mt-6 gap-4">
243+
<a
244+
href="#"
245+
class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
246+
>
247+
Add friend
248+
</a>
249+
<a
250+
href="#"
251+
class="py-2 px-4 ms-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
252+
>
253+
Message
254+
</a>
255+
</div>
256+
</div>
257+
</div>
258+
{CopySuccess && cardId == "card5" ? (
259+
<span className="absolute inline-flex gap-1 py-2 text-sm -top-7">
260+
Copied! <i className="ri-chat-smile-2-line animate-bounce"></i>{" "}
261+
</span>
262+
) : (
263+
""
264+
)}
265+
</div>
170266
</section>
171267
</>
172268
);

0 commit comments

Comments
 (0)