basic setup flow components done

packages/web/components/Link.tsx

@@ -2,7 +2,8 @@ import { Link } from '@metafam/ds';
 import NextLink, { LinkProps } from 'next/link';
 import React from 'react';
 
-type Props = Omit<React.ComponentProps<typeof Link>, keyof LinkProps> & LinkProps;
+type Props = Omit<React.ComponentProps<typeof Link>, keyof LinkProps> &
+  LinkProps;
 
 export const MetaLink: React.FC<Props> = ({
   children,

packages/web/components/SetupAvatar.tsx

@@ -0,0 +1,24 @@
+import { MetaButton, MetaHeading } from '@metafam/ds';
+import React, { useEffect } from 'react';
+
+import { FlexContainer } from './Container';
+
+interface Props {
+  setStep: React.Dispatch<React.SetStateAction<number>>;
+  setProgress: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export const SetupAvatar: React.FC<Props> = ({ setStep, setProgress }) => {
+  useEffect(() => {
+    setProgress(1);
+  }, [setProgress]);
+
+  return (
+    <FlexContainer flex={1}>
+      <MetaHeading mb={10}>Dress up your Avatar</MetaHeading>
+      <MetaButton onClick={() => setStep((_step) => (_step + 1) % 4)}>
+        Next Step
+      </MetaButton>
+    </FlexContainer>
+  );
+};

packages/web/components/SetupDone.tsx

@@ -0,0 +1,16 @@
+import { MetaButton, MetaHeading } from '@metafam/ds';
+import NextLink from 'next/link';
+import React from 'react';
+
+import { FlexContainer } from './Container';
+
+export const SetupDone: React.FC = () => {
+  return (
+    <FlexContainer flex={1}>
+      <MetaHeading mb={10}>Game on!</MetaHeading>
+      <NextLink href="/">
+        <MetaButton>Play</MetaButton>
+      </NextLink>
+    </FlexContainer>
+  );
+};

packages/web/components/SetupHeader.tsx

@@ -19,20 +19,24 @@ export const SetupHeader: React.FC<HeaderProps> = ({ step, progress }) => (
     <StepProgress
       title="1. Professional Profile"
       isActive={step === 0}
-      progress={progress}
+      isDone={step > 0}
+      progress={step > 0 ? 1 : progress}
     />
     <StepProgress
       title="2. About You"
       isActive={step === 1}
-      progress={progress}
+      isDone={step > 1}
+      progress={step > 1 ? 1 : progress}
     />
     <StepProgress
       title="3. Choose Your Avatar"
+      isDone={step > 2}
       isActive={step === 2}
-      progress={progress}
+      progress={step > 2 ? 1 : progress}
     />
     <StepProgress
       title="4. Start Playing"
+      isDone={false}
       isActive={step === 3}
       progress={progress}
     />
@@ -44,12 +48,14 @@ export const SetupHeader: React.FC<HeaderProps> = ({ step, progress }) => (
 
 interface StepProps {
   title: string;
+  isDone: boolean;
   isActive: boolean;
   progress: number;
 }
 
 export const StepProgress: React.FC<StepProps> = ({
   title,
+  isDone,
   isActive,
   progress,
 }) => (
@@ -73,7 +79,9 @@ export const StepProgress: React.FC<StepProps> = ({
       borderRadius="0.25rem"
       overflow="hidden"
     >
-      {isActive && <Box bgColor="purple.400" w={`${progress * 100}%`} />}
+      {(isActive || isDone) && (
+        <Box bgColor="purple.400" w={`${progress * 100}%`} />
+      )}
     </Flex>
     {isActive && (
       <Image

packages/web/components/SetupPersonality.tsx

@@ -0,0 +1,41 @@
+import { MetaButton, MetaHeading } from '@metafam/ds';
+import React, { useEffect, useState } from 'react';
+
+import { FlexContainer } from './Container';
+
+interface Props {
+  setStep: React.Dispatch<React.SetStateAction<number>>;
+  setProgress: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export const SetupPersonality: React.FC<Props> = ({ setStep, setProgress }) => {
+  const numProgressSteps = 2;
+  const [progressStep, setProgressStep] = useState<number>(0);
+
+  useEffect(() => {
+    const progressValue = (progressStep + 1) / numProgressSteps;
+    setProgress(progressValue);
+  }, [progressStep, setProgress]);
+
+  return (
+    <FlexContainer flex={1}>
+      {progressStep === 0 && (
+        <MetaHeading mb={10}>Personality type</MetaHeading>
+      )}
+      {progressStep === 1 && <MetaHeading mb={10}>Player type</MetaHeading>}
+      <MetaButton
+        mb={8}
+        onClick={() =>
+          setProgressStep(
+            (_progressStep) => (_progressStep + 1) % numProgressSteps,
+          )
+        }
+      >
+        Progress
+      </MetaButton>
+      <MetaButton onClick={() => setStep((_step) => (_step + 1) % 4)}>
+        Next Step
+      </MetaButton>
+    </FlexContainer>
+  );
+};

packages/web/components/SetupProfession.tsx

@@ -0,0 +1,42 @@
+import { MetaButton, MetaHeading } from '@metafam/ds';
+import React, { useEffect, useState } from 'react';
+
+import { FlexContainer } from './Container';
+
+interface Props {
+  setStep: React.Dispatch<React.SetStateAction<number>>;
+  setProgress: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export const SetupProfession: React.FC<Props> = ({ setStep, setProgress }) => {
+  const numProgressSteps = 3;
+  const [progressStep, setProgressStep] = useState<number>(0);
+
+  useEffect(() => {
+    const progressValue = (progressStep + 1) / numProgressSteps;
+    setProgress(progressValue);
+  }, [progressStep, setProgress]);
+
+  return (
+    <FlexContainer flex={1}>
+      {progressStep === 0 && (
+        <MetaHeading mb={10}>What are your superpowers?</MetaHeading>
+      )}
+      {progressStep === 1 && <MetaHeading mb={10}>Availability</MetaHeading>}
+      {progressStep === 2 && <MetaHeading mb={10}>Memberships</MetaHeading>}
+      <MetaButton
+        mb={8}
+        onClick={() =>
+          setProgressStep(
+            (_progressStep) => (_progressStep + 1) % numProgressSteps,
+          )
+        }
+      >
+        Progress
+      </MetaButton>
+      <MetaButton onClick={() => setStep((_step) => (_step + 1) % 4)}>
+        Next Step
+      </MetaButton>
+    </FlexContainer>
+  );
+};