Continue work on brewery page, implement like system

src/pages/beers/create.tsx

@@ -15,7 +15,7 @@ interface CreateBeerPageProps {
   types: BeerType[];
 }
 
-const Create: NextPage<CreateBeerPageProps> = ({ breweries, types }) => {
+const CreateBeerPost: NextPage<CreateBeerPageProps> = ({ breweries, types }) => {
   return (
     <FormPageLayout
       headingText="Create a new beer"
@@ -40,4 +40,4 @@ export const getServerSideProps = withPageAuthRequired<CreateBeerPageProps>(asyn
   };
 });
 
-export default Create;
+export default CreateBeerPost;

src/pages/beers/index.tsx

@@ -10,8 +10,8 @@ import { useInView } from 'react-intersection-observer';
 import Spinner from '@/components/ui/Spinner';
 
 import useBeerPosts from '@/hooks/useBeerPosts';
-import BeerPostLoadingCard from '@/components/BeerIndex/BeerPostLoadingCard';
 import { FaArrowUp, FaPlus } from 'react-icons/fa';
+import LoadingCard from '@/components/ui/LoadingCard';
 
 const BeerPage: NextPage = () => {
   const { user } = useContext(UserContext);
@@ -40,7 +40,10 @@ const BeerPage: NextPage = () => {
       <div className="flex items-center justify-center bg-base-100" ref={pageRef}>
         <div className="my-10 flex w-10/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12">
           <header className="my-10 flex justify-between lg:flex-row">
-            <h1 className="text-4xl font-bold lg:text-6xl">The Biergarten Index</h1>
+            <div>
+              <h1 className="text-4xl font-bold lg:text-6xl">The Biergarten Index</h1>
+              <h2 className="text-2xl font-bold lg:text-4xl">Beers</h2>
+            </div>
             {!!user && (
               <div
                 className="tooltip tooltip-left h-full"
@@ -70,7 +73,7 @@ const BeerPage: NextPage = () => {
             {(isLoading || isLoadingMore) && (
               <>
                 {Array.from({ length: PAGE_SIZE }, (_, i) => (
-                  <BeerPostLoadingCard key={i} />
+                  <LoadingCard key={i} />
                 ))}
               </>
             )}