feat: create UI components steps indicator

[Akikaze1119]

Overview

The task is to create a shared UI component for steps indicator.

Changes

Created steps indicator component based on figma

Screenshots or videos

▼Figma

▼Code https://github.com/Tascurator/tascurator-frontend/assets/132441773/7ce8df02-e98a-4420-8c11-84dc2ec22c69

Notes

About bar style

I used hard code for setting the height of the horizontal bar.

• Figma: 2px
• Code: h-0.125rem *Note: The minimum height of the Tailwind class is h-1 (4px), which is too long for the bar.

About the name

Since 'stepper' seems to be more common, both the file name and the component name are set to 'stepper'. Reference

About the confirmation code

The following code can be used for review.

'use client';
import { useState } from 'react';

import { Stepper } from '@/components/ui/stepper';
import { Button } from '@/components/ui/button';

const INITIAL_STEP = 1;
const MAX_STEPS = 4;

export default function Home() {
  const [currentStep, setCurrentStep] = useState(INITIAL_STEP);

  return (
    <>
      <main className="flex min-h-screen flex-col items-center p-6">
        <Stepper currentStep={currentStep} maxSteps={MAX_STEPS} />

        <div className="flex mt-10 gap-4">
          <Button
            size="sm"
            onClick={() => setCurrentStep((prev) => prev - 1)}
            disabled={currentStep === INITIAL_STEP}
          >
            Previous
          </Button>
          <Button
            size="sm"
            onClick={() => setCurrentStep((prev) => prev + 1)}
            disabled={currentStep === MAX_STEPS}
          >
            Next
          </Button>
        </div>
      </main>
    </>
  );
}

Assignee Checklist:

• [x] The base branch is correct (no accidental merges)
• [x] The branch name follows our branch naming rules
• [x] The PR title follows our PR title rules
• [x] My code follows our coding style
• [x] I have commented on my code, particularly in hard-to-understand areas
• [x] My changes generate no new warnings or errors in the console

Reviewer Checklist:

• [ ] Code readability and simplicity
• [ ] Follows best practices and coding standards
• [ ] Understandable and maintainable code

[Akikaze1119]

@KaiKoide Thank you for your review! I modified codes.