All files / components/Layout/Step Step.tsx

100% Statements 6/6
50% Branches 2/4
100% Functions 3/3
100% Lines 6/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81                                                    77x 46x                                                   4x 4x                         5x 5x                        
'use client'
import Image, { StaticImageData } from 'next/image'
import { Dispatch, SetStateAction } from 'react'
import { Headline } from '../../Headline/Headline'
import { IconButton } from '../../IconButton/IconButton'
 
export type StepProps = {
	/** The title of the step. */
	title: string
	/** The description of the step. */
	description: string
	/** The image of the step. */
	image: StaticImageData
	/** The step number. */
	stepNumber: number
	/** The current step. */
	currentStep: number
	/** The total amount of steps. */
	stepsCount: number
	/** The function to set the current step. */
	setCurrentStep: Dispatch<SetStateAction<number>>
}
 
/**
 * One Step of the a step by step tutorial.
 */
export const Step: React.FC<StepProps> = ({ title, description, image, currentStep, setCurrentStep, stepsCount }) => {
	return (
		<div className="items-center gap-3 md:flex md:gap-10">
			{/* Image */}
			<div className="md:w-1/2">
				<Image src={image} alt={`Schritt ${currentStep}`} datacy="step-image" />
			</div>
 
			{/* Content */}
			<div className="md:w-1/2">
				<p className="text-sm" datacy="step-number">
					Schritt {currentStep}
				</p>
				<Headline level={4} datacy="step-title">
					{title}
				</Headline>
				<p className="mb-2 md:mb-4" datacy="step-description">
					{description}
				</p>
 
				{/* Buttons */}
				<div className="flex gap-2">
					{/* Button Left */}
					<IconButton
						disabled={currentStep === 1}
						dimOpacityWhenDisabled
						onClick={() => {
							const nextStep = currentStep > 1 ? (currentStep = currentStep - 1) : currentStep
							setCurrentStep(nextStep)
						}}
						icon="chevron_left"
						color="black"
						backgroundColor="yellow"
						datacy="step-prev-button"
					/>
 
					{/* Button Right */}
					<IconButton
						disabled={currentStep > stepsCount}
						dimOpacityWhenDisabled
						onClick={() => {
							const nextStep = currentStep <= stepsCount ? (currentStep = currentStep + 1) : currentStep
							setCurrentStep(nextStep)
						}}
						icon="chevron_right"
						color="black"
						backgroundColor="yellow"
						datacy="step-next-button"
					/>
				</div>
			</div>
		</div>
	)
}