refactor: some renaming and corrections

components/custom/background/tile/tile.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 import { z } from 'zod';
-import { NewsSchema } from '../../../../utils/schemas';
+import { NewsTileSchema } from '../../../../utils/schemas';
 import { TileContent } from './tileContent';
 
 type CardProps = {
-  newsA?: z.infer<typeof NewsSchema>;
-  newsB?: z.infer<typeof NewsSchema>;
+  newsA?: z.infer<typeof NewsTileSchema>;
+  newsB?: z.infer<typeof NewsTileSchema>;
 };
 
 export function Tile({ newsA, newsB }: CardProps) {

components/custom/background/tile/tileContent.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { z } from 'zod';
 import { getRandomColor } from '../../../../utils/getRandomColor';
-import { NewsSchema } from '../../../../utils/schemas';
+import { NewsTileSchema } from '../../../../utils/schemas';
 
 type CardContentProps = {
-  story: z.infer<typeof NewsSchema>;
+  story: z.infer<typeof NewsTileSchema>;
   side: boolean;
 };
 

components/custom/background/tile/tiles.tsx

@@ -3,7 +3,7 @@
 import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { z } from 'zod';
-import { NewsSchema } from '../../../../utils/schemas';
+import { NewsTile, NewsTileSchema } from '../../../../utils/schemas';
 import { Tile } from './tile';
 
 type TilesProps = {
@@ -19,11 +19,11 @@ export const Tiles = ({ children }: TilesProps) => {
     width: 0,
     height: 0
   });
-  const [news, setNews] = useState<z.infer<typeof NewsSchema>[]>();
+  const [news, setNews] = useState<z.infer<typeof NewsTileSchema>[]>();
 
   useEffect(() => {
     async function getNews() {
-      const news = await fetch('/api/news').then(res => res.json());
+      const news: NewsTile[] = await fetch('/api/news').then(res => res.json());
 
       if (news) {
         setNews(news);
@@ -83,7 +83,7 @@ export const Tiles = ({ children }: TilesProps) => {
 
     return (
       <div>
-        <div className='flex flex-col justify-between'>
+        <div className='-ml-12 -mt-10 flex flex-col justify-between'>
           {Array.from({ length: rows }).map((_, index) =>
             renderRow(columns, index)
           )}

components/custom/card.tsx

@@ -1,16 +1,16 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import {
-  Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
-  CardTitle
+  CardTitle,
+  Card as CardUI
 } from '../../components/ui/card';
 import Footer from './footer';
 
-type CustomCardProps = {
+type CardProps = {
   title: string;
   description?: string;
   content: ReactNode;
@@ -18,13 +18,13 @@ type CustomCardProps = {
   footer?: boolean;
 };
 
-export const CustomCard = ({
+export const Card = ({
   title,
   description,
   content,
   style,
   footer = true
-}: CustomCardProps) => {
+}: CardProps) => {
   const [isLoaded, setIsLoaded] = useState(false);
   const isMobile = useMediaQuery({ query: '(max-width: 767px)' });
 
@@ -39,7 +39,7 @@ export const CustomCard = ({
   if (isMobile) {
     console.log(isMobile);
     return (
-      <Card className={`max-h-[90vh] w-[90%] p-4`}>
+      <CardUI className={`max-h-[90vh] w-[90%] p-4`}>
         <CardHeader className='text-center'>
           <CardTitle>{title}</CardTitle>
           <CardDescription>{description}</CardDescription>
@@ -52,12 +52,16 @@ export const CustomCard = ({
             <Footer />
           </CardFooter>
         )}
-      </Card>
+      </CardUI>
     );
   }
 
   return (
-    <Card className={`${style ?? 'sm:w-2/3 md:w-2/5 lg:w-1/3 xl:w-1/4'} p-4`}>
+    <CardUI
+      className={`${
+        style ?? 'sm:w-2/3 md:w-2/5 lg:w-1/3 xl:w-1/4'
+      } p-4 shadow-2xl`}
+    >
       <CardHeader className='text-center'>
         <CardTitle>{title}</CardTitle>
         <CardDescription>{description}</CardDescription>
@@ -70,6 +74,6 @@ export const CustomCard = ({
           <Footer />
         </CardFooter>
       )}
-    </Card>
+    </CardUI>
   );
 };

components/custom/link.tsx

@@ -1,4 +1,3 @@
-import NextLink from 'next/link';
 import { Button } from '../ui/button';
 
 type LinkProps = {
@@ -9,7 +8,7 @@ type LinkProps = {
 export function Link({ path, text }: LinkProps) {
   return (
     <Button asChild>
-      <NextLink href={path}>{text}</NextLink>
+      <a href={path}>{text}</a>
     </Button>
   );
 }

components/emails/components/footer.tsx

@@ -11,10 +11,13 @@ export function Footer() {
       <div className='ml-8 flex items-center justify-between pb-4'>
         <div>
           <h4 className='text-lg font-semibold'>Contact Us</h4>
-          <p>{process.env.BRAND_NAME}</p>
-          <a href={`mailto:${process.env.BRAND_EMAIL}`}>
-            Email: {process.env.BRAND_EMAIL}
-          </a>
+          <p>{process.env.NEXT_PUBLIC_BRAND_NAME}</p>
+          <p>
+            Email:{' '}
+            <a href={`mailto:${process.env.NEXT_PUBLIC_BRAND_EMAIL}`}>
+              Email: {process.env.NEXT_PUBLIC_BRAND_EMAIL}
+            </a>
+          </p>
         </div>
       </div>
     </footer>