owo.tsx

import {
  Text,
  Flex,
  Heading,
  Image,
  Spacer,
  SimpleGrid,
  Box,
  HStack,
  Badge,
} from "@chakra-ui/react";
import React from "react";
import minigames from "../../../data/minigames.json";

interface MiniGame {
  id: number;
  name: string;
  imageUrl: string;
  description: string;
  isNew: boolean;
}

export default function MiniGamesSection() {
  return (
    <section id="minigames">
      <Heading textAlign="center">Minigames</Heading>

      <Flex p="8" flexDirection="row" justifyContent="center">
        <SimpleGrid
          columns={{
            base: 1,
            md: 2,
            xl: 3,
          }}
          spacing={10}
        >
          {minigames.map((minigame: MiniGame) => {
            return (
              <Box
                key={minigame.id}
                maxWidth="350px"
                borderWidth="1px"
                borderRadius="lg"
                overflow="hidden"
              >
                <Image src={minigame.imageUrl} />

                <Box p="6">
                  <Heading>
                    {minigame.name}{" "}
                    {minigame.isNew ? (
                      <Badge colorScheme="green">Novo</Badge>
                    ) : (
                      ""
                    )}
                  </Heading>
                  <Text>{minigame.description}</Text>
                </Box>
                <Box
                  display="flex"
                  flexDirection="row"
                  p="3"
                  backgroundColor="#f0f0f0"
                >
                  <Text>Players Online: 0</Text>
                  <HStack ml="19" spacing="5px">
                    <Box width="25px" height="25px">
                      <Image
                        borderRadius="5px"
                        src="assets/skin_placeholder.png"
                      ></Image>
                    </Box>
                    <Box width="25px" height="25px">
                      <Image
                        borderRadius="5px"
                        src="assets/skin_placeholder.png"
                      ></Image>
                    </Box>
                    <Box width="25px" height="25px">
                      <Image
                        borderRadius="5px"
                        src="assets/skin_placeholder.png"
                      ></Image>
                    </Box>
                    <Box width="25px" height="25px">
                      <Image
                        borderRadius="5px"
                        src="assets/skin_placeholder.png"
                      ></Image>
                    </Box>
                    <Box width="25px" height="25px">
                      <Image
                        borderRadius="5px"
                        src="assets/skin_placeholder.png"
                      ></Image>
                    </Box>
                    <Box width="25px" height="25px">
                      <Image
                        borderRadius="5px"
                        src="assets/skin_placeholder.png"
                      ></Image>
                    </Box>
                  </HStack>
                </Box>
              </Box>
            );
          })}
        </SimpleGrid>
      </Flex>
    </section>
  );
}