اجزای مشابه با سبک های مختلف در ui Chakra

import { Box } from "@chakra-ui/react";

export const ServerRunningStatus = () => {
  return (
    <Box
      w="200px"
      p={2}
      textAlign="center"
      borderRadius="md"
      bg="green.600"
      color="white"
    >
      Running
    Box>
  );
};

import { Box } from "@chakra-ui/react";

type Status = "running" | "stopped" | "unknown";

interface Props {
  status: Status;
}

export const ServerStatus = ({ status }: Props) => {
  const bgColor = {
    running: "green.600",
    stopped: "red.600",
    unknown: "gray.600",
  }[status];

  return (
    <Box
      w="200px"
      p={2}
      textAlign="center"
      borderRadius="md"
      textTransform="capitalize"
      bg={bgColor}
      color="white"
    >
      {status}
    Box>
  );
};

import { Box } from "@chakra-ui/react";

type Status = "running" | "stopped" | "unknown";

interface Props {
  status: Status;
}

export const ServerStatus = ({ status }: Props) => {
  const styles = {
    running: { bg: "green.600", color: "white" },
    stopped: { bg: "red.600", color: "white" },
    unknown: { bg: "gray.200", color: "gray.600" },
  }[status];

  return (
    <Box
      w="200px"
      p={2}
      textAlign="center"
      borderRadius="md"
      textTransform="capitalize"
      bg={styles.bg}
      color="white"
    >
      {status}
    Box>
  );
};

import { Box, type BoxProps } from "@chakra-ui/react";

type Status = "running" | "stopped" | "unknown";

interface Props {
  status: Status;
}

const styles: Record<Status, Required<Pick<BoxProps, "bg" | "color">>> = {
  running: { bg: "green.600", color: "white" },
  stopped: { bg: "red.600", color: "white" },
  unknown: { bg: "gray.200", color: "gray.600" },
};

export const ServerStatus = ({ status }: Props) => {
  return (
    <Box
      w="200px"
      p={2}
      textAlign="center"
      borderRadius="md"
      textTransform="capitalize"
      {...styles[status]}
    >
      {status}
    Box>
  );
};

const styles: Record<Status, BoxProps> = {
  running: { bg: "green.600", color: "white" },
  stopped: { bg: "red.600", color: "white" },
  unknown: { bg: "gray.200", borderColor: "gray.800" },
};

import { Box, defineRecipe, useRecipe } from "@chakra-ui/react";

type Status = "running" | "stopped" | "unknown";

interface Props {
  status: Status;
}

const serverStatusRecipe = defineRecipe({
  base: {
    textAlign: "center",
    w: "200px",
    p: 2,
    borderRadius: "md",
    textTransform: "capitalize",
  },
  variants: {
    status: {
      running: { bg: "green.200", color: "white" },
      stopped: { bg: "red.600", color: "white" },
      unknown: { bg: "gray.200", color: "gray.600" },
    },
  },
});

export const ServerStatus = ({ status }: Props) => {
  const recipe = useRecipe({ recipe: serverStatusRecipe });
  const styles = recipe({ status });

  return <Box css={styles}>{status}Box>;
};