StepperNav

steppernav-1779354223276.tsx

'use client';

import React from 'react';

interface Step {
  title: string;
  completed: boolean;
  active: boolean;
}

const steps: Step[] = [
  { title: 'Step 1', completed: true, active: false },
  { title: 'Step 2', completed: true, active: false },
  { title: 'Step 3', completed: false, active: true },
  { title: 'Step 4', completed: false, active: false },
];

const StepperNav = () => {
  return (
    <div className="bg-zinc-950 p-4 rounded">
      <div className="flex items-center justify-between">
        {steps.map((step, index) => (
          <React.Fragment key={index}>
            <div
              className={`${
                step.completed ? 'bg-gold' : step.active ? 'bg-gold' : 'bg-zinc-700'
              } w-8 h-8 rounded-full flex items-center justify-center text-zinc-950 font-bold`}
            >
              {step.completed ? (
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-4 w-4"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fillRule="evenodd"
                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 10.828 14.828 6H16.707z"
                    clipRule="evenodd"
                  />
                </svg>
              ) : (
                <span>{index + 1}</span>
              )}
            </div>
            {index < steps.length - 1 && (
              <div
                className={`${
                  steps[index + 1].completed || steps[index].completed
                    ? 'bg-gold'
                    : 'bg-zinc-700'
                } w-16 h-1 rounded-full transition-all duration-500`}
                style={{
                  width: `${(index + 1) / steps.length * 100}%`,
                }}
              />
            )}
          </React.Fragment>
        ))}
      </div>
      <div className="flex items-center justify-between mt-4 text-zinc-400">
        {steps.map((step, index) => (
          <span key={index} className="text-sm">{step.title}</span>
        ))}
      </div>
    </div>
  );
};

export default StepperNav;

Component info

CategoryNavigation

Frameworkreact

TierFREE

Copies0

About

Multi-step progress navigation

More from Navigation

'use client';

import React, { useState } from 'react';

interface Tab {
  id: number;
  label: string;
}

const tabs: Tab[] = [
  { id: 1, label: 'Tab 1' },
  { id: 2, label: 'Tab 2' },
  { id: 3, label: 'Tab 3' },
  { id: 4, label: 'Tab 4' },
];

c

TabsNav

Navigation

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface FloatingDockProps {
  icons: { id: number; src: string; }[];
}

class FloatingDock extends React.Component<FloatingDockProps, {}> {
  constructor(props: FloatingDockPro

FloatingDock

Navigation

'use client';

import React from 'react';

interface PaginationNavProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

const PaginationNav: React.FC<PaginationNavProps> = ({ currentPage, totalPages, onPageCh

PaginationNav

Navigation

// @types/react
// @types/react-dom
import React, { useState } from 'react';
import './MegaMenu.css';

interface MegaMenuProps {
  title: string;
  items: {
    column: string;
    link: string;
    text: string;
  }[];
}

const MegaMenu: React.FC<Me

MegaMenu

Navigation