rez-table-listing-mui/src/listing/components/tabs/tabs.styles.ts

A rez table listing component built on TanStack Table

// tableTabs.styles.ts
import { styled } from "@mui/material/styles";
import Tabs, { tabsClasses } from "@mui/material/Tabs";
import Tab, { tabClasses } from "@mui/material/Tab";
import Box from "@mui/material/Box";

export const TableTabsRoot = styled(Tabs)(({ theme }) => ({
  minHeight: theme.spacing(3.5),

  [`& .${tabsClasses.flexContainer}`]: {
    minHeight: theme.spacing(3.5),
  },

  // hide indicator (instead of slotProps every time)
  [`& .${tabsClasses.indicator}`]: {
    display: "none",
  },
}));

export const TableTab = styled(Tab)(({ theme }) => ({
  color: theme.palette.grey[600],
  padding: theme.spacing(1, 1.5),
  minHeight: theme.spacing(3.5),
  maxHeight: theme.spacing(3.5),
  textTransform: "none",
  minWidth: "unset",
  whiteSpace: "nowrap",

  [`&.${tabClasses.selected}`]: {
    color: theme.palette.text.primary,
    fontWeight: 700,
  },
}));

export const TableTabCount = styled(Box, {
  shouldForwardProp: (prop) => prop !== "selected",
})<{ selected?: boolean }>(({ theme, selected }) => ({
  padding: theme.spacing(0.25),
  borderRadius: theme.shape.borderRadius,
  border: `1px solid ${
    selected ? theme.palette.text.primary : theme.palette.grey[700]
  }`,
  color: selected ? theme.palette.common.white : theme.palette.text.primary,
  backgroundColor: selected ? theme.palette.text.primary : "transparent",
  fontWeight: selected ? 500 : 400,
  lineHeight: 1,
  minWidth: 20,
  textAlign: "center",
}));