Mantine & TailwindCSS

_app.js

import Navbar from "../lib/Navbar";
import {
  ClerkProvider,
  SignedIn,
  SignedOut,
  RedirectToSignIn,
} from "@clerk/nextjs";
import { useRouter } from "next/router";
import { MantineProvider } from "@mantine/core";
import "../styles/globals.css";

const publicPages = ["/", "/blogs/[id]"];

function MyApp({ Component, pageProps }) {
  const { pathname } = useRouter();
  const isPublicPages = publicPages.includes(pathname);
  console.log(Component.title);
  return (
    <ClerkProvider>
      <MantineProvider
        theme={{
          fontFamily: "Poppins, sans-serif",
          colorScheme: "light",
          headings: {
            sizes: {
              h1: { fontSize: "4.209rem", lineHeight: "1.3" },
              h2: { fontSize: "3.157rem", lineHeight: "1.3" },
              h3: { fontSize: "2.369rem", lineHeight: "1.3" },
              h4: { fontSize: "1.777rem", lineHeight: "1.3" },
              h5: { fontSize: "1.333rem", lineHeight: "1.3" },
              h6: { fontSize: "1rem", lineHeight: "1.3" },
            },
          },
        }}
        emotionOptions={{ key: "mantine", prepend: false }}
      >
        {isPublicPages ? (
          <>
            <Navbar />
            <Component {...pageProps} />
          </>
        ) : (
          <>
            <SignedIn>
              <Navbar />
              <Component {...pageProps} />
            </SignedIn>
            <SignedOut>
              <RedirectToSignIn />
            </SignedOut>
          </>
        )}
      </MantineProvider>
    </ClerkProvider>
  );
}

export default MyApp;

Cards.js

import {
  useMantineTheme,
  Grid,
  Card,
  Image,
  Group,
  Text,
  Button,
  Badge,
} from "@mantine/core";
import { useEffect, useState } from "react";
import { collection, getDocs } from "firebase/firestore";
import { database } from "./firebase";

export default function Cards() {
  const [blogs, setBlogs] = useState([]);
  useEffect(() => {
    async function getBlogs() {
      const blogCollection = collection(database, "blogs");
      const blogSnapshot = await getDocs(blogCollection);
      const blogs = blogSnapshot.docs.map((doc) => {
        const data = doc.data();
        data.id = doc.id;
        return data;
      });
      setBlogs(blogs);
    }
    getBlogs();
  }, []);

  useEffect(() => {
    console.log(blogs.length);
  }, [blogs]);

  const theme = useMantineTheme();

  if (blogs.length === 0) {
    return <h1>Loading</h1>;
  }

  return (
    <Grid justify="space-around">
      {blogs.map((cardObject, index) => (
        <Grid.Col style={{ maxWidth: 350 }} sm={4} xs={4} key={index}>
          <Card shadow="sm" padding="lg">
            <Card.Section>
              <Image
                height={160}
                alt={"Thing"}
                src="https://images.unsplash.com/photo-1508592931388-95bc7b61033d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
              />
            </Card.Section>
            <Group position="apart" style={{ marginTop: 5, marginBottom: 5 }}>
              <Text weight={500}>{cardObject?.title}</Text>
              <Badge color="pink">NEW!</Badge>
            </Group>
            <Text size="sm" style={{ lineHeight: 1.5 }}>
              {cardObject?.description}
            </Text>
            <Button fullWidth style={{ marginTop: 14 }} color="cyan">
              Read More
            </Button>
          </Card>
          <h1 className="text-justify">example</h1>
        </Grid.Col>
      ))}
    </Grid>
  );
}