Skip to content

Commit 2f1c5c2

Browse files
Akshay-VsAkshay-Vs
committed
feat: add tag buttons
1 parent 457a392 commit 2f1c5c2

File tree

8 files changed

+198
-4
lines changed

8 files changed

+198
-4
lines changed

‎apps/web/app/globals.scss

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
@import '../styles/button.scss';
6+
57
// global variables
68
$background: #ebeced;
79
$stroke: #919091;
@@ -29,6 +31,28 @@ body {
2931
// min-width: 100vw;
3032
}
3133

34+
.horizontal-scroll::-webkit-scrollbar {
35+
height: 0px;
36+
}
37+
38+
.horizontal-scroll {
39+
-ms-overflow-style: none;
40+
-moz-scrollbar-width: none;
41+
scrollbar-width: none;
42+
}
43+
44+
::-webkit-scrollbar-track {
45+
background: #f1f1f1;
46+
}
47+
48+
::-webkit-scrollbar-thumb {
49+
background: #888;
50+
}
51+
52+
::-webkit-scrollbar-thumb:hover {
53+
background: #555;
54+
}
55+
3256
.center {
3357
@apply flex justify-center items-center;
3458
}
@@ -70,5 +94,5 @@ body {
7094
}
7195

7296
.main-container {
73-
@apply w-full flex flex-col justify-center items-center gap-4 px-[5%];
97+
@apply w-full flex justify-center items-center gap-4 px-[5%];
7498
}

‎apps/web/app/page.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import Header from '@/components/specific/header/nav-header';
22
import Featured from '@/components/specific/news/featured/featured';
33
import SearchBar from '@/components/specific/search-bar/search-bar';
4+
import Tags from '@/components/specific/tags/tags';
45

56
import testArticle from '@/public/images/image 2.png';
67

78
const Home = () => {
89
return (
9-
<main className="w-full h-full flex flex-col gap-8 justify-center items-center">
10-
<div className="w-full h-full flex flex-col gap-6 justify-center items-center">
10+
<main className="w-full h-full flex flex-col gap-6 justify-center items-center">
11+
<div className="w-full h-full flex flex-col gap-6 justify-center items-center pb-2">
1112
<Header />
1213
<Featured
1314
title="Musk's $56bn deal rejected"
@@ -17,6 +18,7 @@ const Home = () => {
1718
</div>
1819

1920
<SearchBar />
21+
<Tags />
2022
</main>
2123
);
2224
};

‎apps/web/components/specific/news/featured/featured.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ interface FeaturedProps {
1111

1212
const Featured = ({ title, description, image }: FeaturedProps) => {
1313
return (
14-
<article className="main-container">
14+
<article className="main-container flex-col">
1515
<FeaturedTitle title={title} />
1616
<div className="center gap-4">
1717
<FeaturedImage image={image} />

‎apps/web/components/specific/tags/tag-button-enhanced.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Button } from '@proximity/ui/shadcn/button';
2+
3+
interface TagButtonEnhancedProps {
4+
label: string;
5+
}
6+
7+
const TagButtonEnhanced = ({ label }: TagButtonEnhancedProps) => {
8+
return (
9+
<Button variant="tag" className="h-12 px-7 center button__enhanced">
10+
<div className="z-10 center gap-2">
11+
<svg
12+
fill="none"
13+
xmlns="http://www.w3.org/2000/svg"
14+
viewBox="0 0 16 16"
15+
className="scale-125"
16+
>
17+
<path
18+
d="M16 8.016A8.522 8.522 0 008.016 16h-.032A8.521 8.521 0 000 8.016v-.032A8.521 8.521 0 007.984 0h.032A8.522 8.522 0 0016 7.984v.032z"
19+
fill="url(#prefix__paint0_radial_980_20147)"
20+
/>
21+
<defs>
22+
<radialGradient
23+
id="prefix__paint0_radial_980_20147"
24+
cx="0"
25+
cy="0"
26+
r="1"
27+
gradientUnits="userSpaceOnUse"
28+
gradientTransform="matrix(16.1326 5.4553 -43.70045 129.2322 1.588 6.503)"
29+
>
30+
<stop offset=".067" stopColor="#9168C0" />
31+
<stop offset=".343" stopColor="#5684D1" />
32+
<stop offset=".672" stopColor="#1BA1E3" />
33+
</radialGradient>
34+
</defs>
35+
</svg>
36+
37+
{label}
38+
</div>
39+
</Button>
40+
);
41+
};
42+
43+
export default TagButtonEnhanced;

‎apps/web/components/specific/tags/tag-button-primary.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Button } from '@proximity/ui/shadcn/button';
2+
3+
interface TagButtonPrimaryProps {
4+
label: string;
5+
}
6+
7+
const TagButtonPrimary = ({ label }: TagButtonPrimaryProps) => {
8+
return (
9+
<Button variant="tag" className="h-12 px-7">
10+
{label}
11+
</Button>
12+
);
13+
};
14+
15+
export default TagButtonPrimary;

‎apps/web/components/specific/tags/tags.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import TagButtonPrimary from './tag-button-primary';
2+
import TagButtonEnhanced from './tag-button-enhanced';
3+
4+
const Tags = () => {
5+
return (
6+
<div className="w-full flex justify-center items-center gap-4 relative">
7+
<div className="absolute top-0 left-0 w-[7%] z-20 h-full bg-gradient-to-r from-[#ebeced] via-[#ebecedab] to-[#ebeced00]" />
8+
<div className="absolute top-0 right-0 w-[7%] z-20 h-full bg-gradient-to-r from-[#ebeced00] via-[#ebecedab] to-[#ebeced]" />
9+
10+
<div className="flex items-center gap-4 w-full overflow-y-hidden overflow-x-scroll horizontal-scroll px-[5%]">
11+
<TagButtonEnhanced label="For You" />
12+
<TagButtonPrimary label="Technology" />
13+
<TagButtonPrimary label="Space" />
14+
<TagButtonPrimary label="Finance" />
15+
</div>
16+
</div>
17+
);
18+
};
19+
20+
export default Tags;

‎apps/web/styles/button.scss

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
.button__enhanced {
2+
border: none;
3+
position: relative;
4+
z-index: 1;
5+
box-sizing: border-box;
6+
7+
&::after {
8+
content: '';
9+
position: absolute;
10+
border-radius: 30px;
11+
12+
background-image: linear-gradient(
13+
90deg,
14+
rgba(232, 235, 240, 1) 0%,
15+
rgba(228, 223, 243, 1) 35%,
16+
rgba(235, 214, 249, 1) 100%
17+
);
18+
19+
width: calc(100% - 0.2rem);
20+
height: calc(100% - 0.2rem);
21+
22+
top: 0px;
23+
left: 0px;
24+
bottom: 0px;
25+
right: 0px;
26+
27+
//center
28+
top: 50%;
29+
left: 50%;
30+
transform: translate(-50%, -50%);
31+
32+
z-index: 1;
33+
}
34+
35+
&::before {
36+
content: '';
37+
border-radius: 30px;
38+
position: absolute;
39+
40+
background-image: linear-gradient(
41+
90deg,
42+
rgba(199, 72, 239, 1) 0%,
43+
rgba(120, 76, 246, 1) 35%
44+
);
45+
top: 0px;
46+
left: 0px;
47+
bottom: 0px;
48+
right: 0px;
49+
50+
animation: enhanced-button-animation 5s linear infinite;
51+
52+
z-index: -5;
53+
}
54+
55+
@keyframes enhanced-button-animation {
56+
0% {
57+
background: linear-gradient(
58+
90deg,
59+
rgba(199, 72, 239, 1) 0%,
60+
rgba(120, 76, 246, 1) 35%,
61+
rgba(199, 72, 239, 1) 0%
62+
);
63+
}
64+
20% {
65+
background: linear-gradient(
66+
90deg,
67+
rgba(120, 76, 246, 1) 35%,
68+
rgba(199, 72, 239, 1) 100%,
69+
rgba(199, 72, 239, 1) 100%
70+
);
71+
}
72+
40% {
73+
background: linear-gradient(
74+
90deg,
75+
rgba(120, 76, 246, 1) 35%,
76+
rgba(199, 72, 239, 1) 100%,
77+
rgba(120, 76, 246, 1) 35%
78+
);
79+
}
80+
100% {
81+
background: linear-gradient(
82+
90deg,
83+
rgba(199, 72, 239, 1) 0%,
84+
rgba(120, 76, 246, 1) 35%,
85+
rgba(120, 76, 246, 1) 35%
86+
);
87+
}
88+
}
89+
}

‎packages/ui/src/shadcn/button.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const buttonVariants = cva(
1818
'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
1919
ghost: 'hover:bg-accent hover:text-accent-foreground',
2020
link: 'text-primary underline-offset-4 hover:underline',
21+
tag: 'rounded-[30px] bg-transparent text-black border-[#909090] border-2 shadow-none font-medium',
2122
},
2223
size: {
2324
default: 'h-9 px-4 py-2',

0 commit comments

Comments
 (0)