index.tsx

import GradientLayout from "../components/gradientLayout";
import { GetServerSidePropsContext } from "next";
import prisma from "../lib/prisma";
import { Box, Flex, Text } from "@chakra-ui/layout";
import { Image } from "@chakra-ui/react";
import { useMe } from "../lib/hooks";
import React from "react";

const Home = ({ artists }) => {
  const { user, isLoading } = useMe();

  return (
    <GradientLayout
      color="purple"
      roundImage
      title={`${user?.firstName}'s Artists`}
      subtitle="hello"
      description={`${user?.playlistCount} public playlists`}
      isLoading={isLoading}
      image="https://tinted-gym-f99.notion.site/image/https%3A%2F%2Fdl.dropboxusercontent.com%2Fs%2Fbgiv0ssz3xpotz9%2Fpeep.png%3Fdl%3D0?table=block&id=33f9771b-0e6f-4a72-832c-69ed2d41f290&spaceId=511cd811-5561-4a61-b550-c4086b4afafb&width=2000&userId=&cache=v2"
    >
      <Box color="white" paddingX="40px">
        <Box marginBottom="40px">
          <Text fontSize={"2xl"} fontWeight="bold">
            Top artists this month
          </Text>
        </Box>
        <Flex gap={"2rem"}>
          {artists?.map((artist: { id: number; name: string }) => (
            <Box
              key={artist.id}
              bg="gray.900"
              borderRadius={"4px"}
              padding="15px"
              width="20%"
            >
              <Image
                src="https://placekitten.com/300/300"
                borderRadius={"100%"}
              />
              <Box marginTop={"1rem"}>
                <Text fontSize={"large"}>{artist.name}</Text>
                <Text fontSize={"small"}>Artist</Text>
              </Box>
            </Box>
          ))}
        </Flex>
      </Box>
    </GradientLayout>
  );
};

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const artists = await prisma.artist.findMany({});
  return {
    props: {
      artists,
    },
  };
};

export default Home;