[feat] create ProgressBar component

calblueprint · Nov 8, 2024 · e0a57cf · e0a57cf
1 parent 3296bd8
commit e0a57cf
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 12 deletions.
diff --git a/app/onboarding/general/page.tsx b/app/onboarding/general/page.tsx
@@ -2,6 +2,7 @@
 'use client';
 
 import { useContext } from 'react';
+import ProgressBar from '@/components/ProgressBar/ProgressBar';
 import Back from '@/public/images/back.svg';
 import { OnboardingContext } from '@/utils/onboardingContext';
 import {
@@ -13,7 +14,6 @@ import {
   Image,
   InlineContainer,
   Input,
-  Rectangle,
   StyledLink,
   Title,
 } from '../styles';
@@ -38,12 +38,9 @@ export default function Onboarding() {
     <Background>
       <InlineContainer>
         <Image src={Back} alt="Back icon" />
-        <div>
-          <Rectangle variant="light" widthPercentage="25%" />
-          <Rectangle variant="dark" widthPercentage="75%" />
-        </div>
         <Container>
           <Title>Tell us a bit about yourself!</Title>
+          <ProgressBar/>
           <text>
             {' '}
             First Name <RedAsterisk>*</RedAsterisk>{' '}

diff --git a/app/onboarding/preferences/page.tsx b/app/onboarding/preferences/page.tsx
@@ -2,6 +2,7 @@
 
 import { useContext } from 'react';
 import Link from 'next/link';
+import ProgressBar from '@/components/ProgressBar/ProgressBar';
 import Back from '@/public/images/back.svg';
 import { OnboardingContext } from '@/utils/onboardingContext';
 import {
@@ -13,7 +14,6 @@ import {
   Image,
   InlineContainer,
   Input,
-  Rectangle,
   Title,
 } from '../styles';
 
@@ -35,12 +35,10 @@ export default function Onboarding() {
           <Image src={Back} alt="Back icon" />
         </Link>
 
-        <div>
-          <Rectangle variant="light" widthPercentage="50%" />
-          <Rectangle variant="dark" widthPercentage="50%" />
-        </div>
         <Container>
           <Title>Help us tailor shows to you!</Title>
+          <ProgressBar/>
+
           <text>Facility Type</text>
           <Input
             name="facilityType"

diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts
@@ -68,15 +68,15 @@ export const Input = styled.input`
   border-radius: 4px;
   margin-bottom: 1.3rem;
   margin-top: 0.25rem;
-  padding-left: 0.4rem;
+  padding-left: 0.5rem;
 `;
 
 export const Title = styled.h1`
   font-size: 28px;
   text-align: start;
   color: ${COLORS.gray11};
   margin-top: 0;
-  margin-bottom: 2rem;
+  margin-bottom: 0.8rem;
 `;
 
 export const ButtonContainer = styled.div`

diff --git a/components/ProgressBar/ProgressBar.tsx b/components/ProgressBar/ProgressBar.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import * as styles from './styles';
+
+const ProgressBar: React.FC = () => {
+
+  return (
+    <styles.ProgressBarContainer> 
+      <styles.ProgressBarFiller progress={20}>
+
+      </styles.ProgressBarFiller>
+    </styles.ProgressBarContainer>
+  )
+
+}
+
+export default ProgressBar;
diff --git a/components/ProgressBar/styles.ts b/components/ProgressBar/styles.ts
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import COLORS from '@/styles/colors';
+
+export const ProgressBarContainer = styled.div`
+  display: inline;
+  width: 100%;
+  height: 2px;
+  background-color: ${COLORS.gray4};
+  border-radius: 2px;
+  margin-bottom: 2rem;
+`;
+
+export const ProgressBarFiller = styled.div<{ 
+  progress: number 
+}>`
+  height: 100%;
+  width: ${(props) => props.progress}%;
+  background-color: ${COLORS.gray12};
+  transition: width 0.25s ease-in-out;
+`;