How can I use StatsGrid multiple times? for different use

[crude rune]

Actually I'm trying to smt like this. You can see the different in screenshot that I've removed up & down arrow from the upper cards. Now I also want to remove the paragraph from the upper cards. I don't wanna use multiple component for same thing

export function StatsGridIcons({
  data,
  withArrow = true,
}: StatsGridIconsProps) {
  const { classes } = useStyles();
  const stats = data.map((stat) => {
    const DiffIcon = stat.diff > 0 ? ArrowUpRight : ArrowDownRight;

    return (
      <Paper withBorder p="md" radius="md" key={stat.title}>
        <Group position="apart">
          <div>
            <Text
              color="dimmed"
              transform="uppercase"
              weight={700}
              size="xs"
              className={classes.label}
            >
              {stat.title}
            </Text>
            <Text weight={700} size="xl">
              {stat.value}
            </Text>
          </div>
          {withArrow && (
            <ThemeIcon
              color="gray"
              variant="light"
              sx={(theme) => ({
                color:
                  stat.diff > 0 ? theme.colors.teal[6] : theme.colors.red[6],
              })}
              size={38}
              radius="md"
            >
              <DiffIcon size={28} />
            </ThemeIcon>
          )}
        </Group>
        <Text color="dimmed" size="sm" mt="md">
          <Text
            component="span"
            color={stat.diff > 0 ? "teal" : "red"}
            weight={700}
          >
            {stat.diff}%
          </Text>{" "}
          {stat.diff > 0 ? "increase" : "decrease"} compared to last
          month
        </Text>
      </Paper>
    );
  });

  return (
    <div className={classes.root}>
      <SimpleGrid cols={4} breakpoints={[{ maxWidth: "sm", cols: 1 }]}>
        {stats}
      </SimpleGrid>
    </div>
  );
}
``` This is my function

[nimble fog]

Unless I’m misunderstanding can you not do the same thing you did for the arrow and just create a prop for it

Also a tip for sharing code: after adding the code syntax add the language and it will highlight the code to make it easier to read

[crude rune]

Sure bro I understood

Well

I've to create another component for this because I want to change the text styling too so