Implement dot navigation (#159)

lexicongovernance · Feb 9, 2024 · 9d24a27 · 9d24a27
1 parent 369e5a0
commit 9d24a27
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/packages/berlin/src/components/dots/Dots.styled.tsx b/packages/berlin/src/components/dots/Dots.styled.tsx
@@ -7,7 +7,12 @@ type DotProps = {
 export const Dot = styled.div<DotProps>`
   background-color: ${(props) => (props.$active ? 'var(--color-black)' : 'var(--color-gray)')};
   border-radius: 50%;
+  cursor: pointer;
   height: 0.5rem;
   transition: 0.2s ease-in;
   width: 0.5rem;
+
+  &:hover {
+    background-color: var(--color-black);
+  }
 `;
diff --git a/packages/berlin/src/components/dots/Dots.tsx b/packages/berlin/src/components/dots/Dots.tsx
@@ -4,13 +4,14 @@ import { Dot } from './Dots.styled';
 type DotsProps = {
   dots: number;
   activeDotIndex: number;
+  setStep: React.Dispatch<React.SetStateAction<number>>;
 };
 
-function Dots({ dots, activeDotIndex }: DotsProps) {
+function Dots({ dots, activeDotIndex, setStep }: DotsProps) {
   return (
     <FlexRow>
       {Array.from({ length: dots }).map((_, index) => (
-        <Dot key={index} $active={index === activeDotIndex} />
+        <Dot key={index} $active={index === activeDotIndex} onClick={() => setStep(index)} />
       ))}
     </FlexRow>
   );

diff --git a/packages/berlin/src/pages/Onboarding.tsx b/packages/berlin/src/pages/Onboarding.tsx
@@ -35,7 +35,7 @@ function Onboarding() {
     <FlexColumn $gap="3rem">
       <Title>{data[step].title}</Title>
       <BodyContent content={data[step].body} />
-      <Dots dots={data.length} activeDotIndex={step} />
+      <Dots dots={data.length} activeDotIndex={step} setStep={setStep} />
       <FlexRow>
         <Button onClick={handleSkip} $color="secondary">
           Skip