Divider

Divider.tsx

import React from "react";
import "./Divider.module.css";

interface DividerProps {
  text?: string;
  thickness?: number;
  color?: string;
}

const Divider: React.FC<DividerProps> = ({
  text = "",
  thickness = 1,
  color = "gray",
}) => {
  return (
    <div className="divider" style={{ borderBottom: `${thickness}px solid ${color}` }}>
      {text && <span className="divider-text">{text}</span>}
    </div>
  );
};

export default Divider;

Divider.module.css

.divider {
  display: flex;
  align-items: center;
  text-align: center;
}

.divider-text {
  margin: 0 8px;
  color: gray;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}