Skip to content

Commit 682eaa7

Browse files
nayan458nayan458
authored
Merge pull request #48 from CleanCode366/34-component-progress-bar-component
feat : ProgressBar created
2 parents a0985da + 55b7872 commit 682eaa7

5 files changed

Lines changed: 332 additions & 72 deletions

File tree

‎src/LoginCard.tsx‎

Lines changed: 58 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,65 @@
1-
function LoginCard() {
2-
3-
const handleGoogleLogin = () => {
4-
// Replace with your actual backend OAuth endpoint
5-
window.location.href = 'http://localhost:8080/oauth2/authorization/google';
6-
};
7-
8-
return (
9-
<div className="fixed inset-0 flex items-center justify-center bg-bg-primary" >
10-
<div className="w-full max-w-sm bg-bg-secondary border border-border-primary rounded-lg shadow-md p-6 space-y-6" >
1+
import { ProgressBar } from './shared/primitives/Progressbar'
112

12-
{/* Heading */}
13-
<div className="space-y-1">
14-
<h2 className="text-2xl text-center font-semibold text-text-primary">
15-
Welcome
16-
</h2>
3+
function LoginCard() {
4+
const handleGoogleLogin = () => {
5+
// Replace with your actual backend OAuth endpoint
6+
window.location.href = 'http://localhost:8080/oauth2/authorization/google'
7+
}
178

18-
<p className="text-sm text-center my-3 text-text-secondary">
19-
Sign in using your Google account
20-
</p>
21-
</div>
9+
return (
10+
<div className="bg-bg-primary fixed inset-0 flex items-center justify-center">
11+
<div className="bg-bg-secondary border-border-primary w-full max-w-sm space-y-6 rounded-lg border p-6 shadow-md">
12+
{/* Heading */}
13+
<div className="space-y-1">
14+
<h2 className="text-text-primary text-center text-2xl font-semibold">Welcome</h2>
2215

23-
{/* Google OAuth Button */}
24-
<button
25-
onClick={handleGoogleLogin}
26-
className="
27-
cursor-pointer
28-
w-full
29-
flex
30-
items-center
31-
justify-center
32-
gap-3
33-
py-3
34-
rounded-md
35-
bg-bg-tertiary
36-
text-text-primary
37-
border
38-
border-border-secondary
39-
hover:bg-bg-primary
40-
transition
41-
"
42-
>
43-
{/* Google Icon */}
44-
<svg
45-
xmlns="http://www.w3.org/2000/svg"
46-
viewBox="0 0 48 48"
47-
className="w-5 h-5"
48-
>
49-
<path
50-
fill="#FFC107"
51-
d="M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.3 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3 0 5.7 1.1 7.8 2.9l5.7-5.7C34.1 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.3-.4-3.5z"
52-
/>
53-
<path
54-
fill="#FF3D00"
55-
d="M6.3 14.7l6.6 4.8C14.7 15.1 18.9 12 24 12c3 0 5.7 1.1 7.8 2.9l5.7-5.7C34.1 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z"
56-
/>
57-
<path
58-
fill="#4CAF50"
59-
d="M24 44c5.2 0 10-2 13.5-5.3l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.3 0-9.7-3.3-11.3-8l-6.5 5C9.5 39.5 16.2 44 24 44z"
60-
/>
61-
<path
62-
fill="#1976D2"
63-
d="M43.6 20.5H42V20H24v8h11.3c-1.1 3.1-3.3 5.5-6.2 7.1l6.2 5.2C39.1 36.7 44 31 44 24c0-1.3-.1-2.3-.4-3.5z"
64-
/>
65-
</svg>
16+
<p className="text-text-secondary my-3 text-center text-sm">
17+
Sign in using your Google account
18+
</p>
19+
</div>
6620

67-
Continue with Google
68-
</button>
21+
{/* Google OAuth Button */}
22+
<button
23+
onClick={handleGoogleLogin}
24+
className="bg-bg-tertiary text-text-primary border-border-secondary hover:bg-bg-primary flex w-full cursor-pointer items-center justify-center gap-3 rounded-md border py-3 transition"
25+
>
26+
{/* Google Icon */}
27+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" className="h-5 w-5">
28+
<path
29+
fill="#FFC107"
30+
d="M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.3 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3 0 5.7 1.1 7.8 2.9l5.7-5.7C34.1 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.3-.4-3.5z"
31+
/>
32+
<path
33+
fill="#FF3D00"
34+
d="M6.3 14.7l6.6 4.8C14.7 15.1 18.9 12 24 12c3 0 5.7 1.1 7.8 2.9l5.7-5.7C34.1 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z"
35+
/>
36+
<path
37+
fill="#4CAF50"
38+
d="M24 44c5.2 0 10-2 13.5-5.3l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.3 0-9.7-3.3-11.3-8l-6.5 5C9.5 39.5 16.2 44 24 44z"
39+
/>
40+
<path
41+
fill="#1976D2"
42+
d="M43.6 20.5H42V20H24v8h11.3c-1.1 3.1-3.3 5.5-6.2 7.1l6.2 5.2C39.1 36.7 44 31 44 24c0-1.3-.1-2.3-.4-3.5z"
43+
/>
44+
</svg>
45+
Continue with Google
46+
</button>
6947

70-
{/* Footer */}
71-
<p className="text-xs text-center text-text-tertiary">
72-
By continuing, you agree to our <a href="/terms" className="text-blue-500 hover:underline">Terms of Service</a> and <a href="/privacy" className="text-blue-500 hover:underline">Privacy Policy</a>
73-
</p>
74-
</div>
75-
</div>
76-
);
48+
{/* Footer */}
49+
<p className="text-text-tertiary text-center text-xs">
50+
By continuing, you agree to our{' '}
51+
<a href="/terms" className="text-blue-500 hover:underline">
52+
Terms of Service
53+
</a>{' '}
54+
and{' '}
55+
<a href="/privacy" className="text-blue-500 hover:underline">
56+
Privacy Policy
57+
</a>
58+
</p>
59+
<ProgressBar value={0.5} variant="danger" scoreLabel="AI conf." />
60+
</div>
61+
</div>
62+
)
7763
}
7864

79-
export default LoginCard;
65+
export default LoginCard

‎src/index.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,3 +116,13 @@ html[data-theme-loaded='true'] * {
116116
border-color 0.25s ease,
117117
box-shadow 0.25s ease;
118118
}
119+
120+
@keyframes shimmer {
121+
0% {
122+
background-position: 200% 0;
123+
}
124+
125+
100% {
126+
background-position: -200% 0;
127+
}
128+
}

‎src/shared/primitives/Progressbar/ProgressBar.stories.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import type { Meta, StoryObj } from '@storybook/react-vite'
2+
3+
import { ProgressBar } from '.'
4+
5+
const meta = {
6+
title: 'Shared/Primitives/ProgressBar',
7+
8+
component: ProgressBar,
9+
10+
tags: ['autodocs'],
11+
} satisfies Meta<typeof ProgressBar>
12+
13+
export default meta
14+
15+
type Story = StoryObj<typeof meta>
16+
17+
export const AutoDanger: Story = {
18+
args: {
19+
value: 0.9,
20+
variant: 'auto',
21+
showValue: true,
22+
},
23+
}
24+
25+
export const AutoWarning: Story = {
26+
args: {
27+
value: 0.7,
28+
variant: 'auto',
29+
showValue: true,
30+
},
31+
}
32+
33+
export const AutoSuccess: Story = {
34+
args: {
35+
value: 0.4,
36+
variant: 'auto',
37+
showValue: true,
38+
},
39+
}
40+
41+
export const Danger: Story = {
42+
args: {
43+
value: 0.8,
44+
variant: 'danger',
45+
},
46+
}
47+
48+
export const Warning: Story = {
49+
args: {
50+
value: 0.8,
51+
variant: 'warning',
52+
},
53+
}
54+
55+
export const Success: Story = {
56+
args: {
57+
value: 0.8,
58+
variant: 'success',
59+
},
60+
}
61+
62+
export const Info: Story = {
63+
args: {
64+
value: 0.8,
65+
variant: 'info',
66+
},
67+
}
68+
69+
export const Animated: Story = {
70+
args: {
71+
value: 0,
72+
animated: true,
73+
variant: 'info',
74+
},
75+
}
76+
77+
export const ExtraSmall: Story = {
78+
args: {
79+
value: 0.82,
80+
size: 'xs',
81+
},
82+
}

0 commit comments

Comments
 (0)