refactor: some name and styling changes

app/api/confirmation/route.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import prisma from '../../../prisma/prisma';
 import { ApiResponse } from '../../../utils/apiResponse';
-import { ConfirmationSchema, ResponseSchema } from '../../../utils/types';
+import { ConfirmationSchema, ResponseSchema } from '../../../utils/schemas';
 
 export const dynamic = 'force-dynamic'; // defaults to force-static
 export async function POST(request: Request) {

app/api/cron/route.ts

@@ -2,8 +2,8 @@ import { NextResponse } from 'next/server';
 import { z } from 'zod';
 import NewsletterTemplate from '../../../components/emails/newsletter';
 import prisma from '../../../prisma/prisma';
+import { NewsDatabaseSchema, NewsSchema } from '../../../utils/schemas';
 import { sender } from '../../../utils/sender';
-import { NewsDatabaseSchema, NewsSchema } from '../../../utils/types';
 import { singleNews, topNews } from '../../../utils/urls';
 
 export async function GET(request: Request) {

app/api/subscribe/route.ts

@@ -1,10 +1,10 @@
 import * as crypto from 'crypto';
 import { z } from 'zod';
-import SubscribeTemplate from '../../../components/emails/subscribe';
+import ConfirmationTemplate from '../../../components/emails/confirmation';
 import prisma from '../../../prisma/prisma';
 import { ApiResponse } from '../../../utils/apiResponse';
+import { ResponseSchema, SubscribeFormSchema } from '../../../utils/schemas';
 import { sender } from '../../../utils/sender';
-import { ResponseSchema, SubscribeFormSchema } from '../../../utils/types';
 
 export const dynamic = 'force-dynamic'; // defaults to force-static
 export async function POST(request: Request) {
@@ -60,7 +60,7 @@ export async function POST(request: Request) {
     }
   });
 
-  const sent = await sender([email], SubscribeTemplate(code));
+  const sent = await sender([email], ConfirmationTemplate(code));
 
   if (!sent) {
     return ApiResponse(500, 'Internal server error');

app/api/unsubscribe/route.ts

@@ -2,8 +2,8 @@ import { z } from 'zod';
 import UnsubscribeTemplate from '../../../components/emails/unsubscribe';
 import prisma from '../../../prisma/prisma';
 import { ApiResponse } from '../../../utils/apiResponse';
+import { ResponseSchema, UnsubscribeFormSchema } from '../../../utils/schemas';
 import { sender } from '../../../utils/sender';
-import { ResponseSchema, UnsubscribeFormSchema } from '../../../utils/types';
 
 export const dynamic = 'force-dynamic'; // defaults to force-static
 export async function POST(request: Request) {

app/confirmation/page.tsx

@@ -3,7 +3,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { z } from 'zod';
 import { CustomCard } from '../../components/custom/card';
-import { ResponseSchema } from '../../utils/types';
+import { ResponseSchema } from '../../utils/schemas';
 
 export default function Confirmation() {
   const router = useRouter();

app/page.tsx

@@ -14,7 +14,7 @@ import {
   FormMessage
 } from '../components/ui/form';
 import { Input } from '../components/ui/input';
-import { ResponseSchema, SubscribeFormSchema } from '../utils/types';
+import { ResponseSchema, SubscribeFormSchema } from '../utils/schemas';
 
 export default function Home() {
   const [completed, setCompleted] = useState(false);

app/unsubscribe/page.tsx

@@ -14,7 +14,7 @@ import {
   FormMessage
 } from '../../components/ui/form';
 import { Input } from '../../components/ui/input';
-import { ResponseSchema, UnsubscribeFormSchema } from '../../utils/types';
+import { ResponseSchema, UnsubscribeFormSchema } from '../../utils/schemas';
 
 export default function Unsubscribe() {
   const [completed, setCompleted] = useState(false);

components/custom/background/background.tsx

@@ -1,4 +1,4 @@
-import { Tiles } from './components/tiles';
+import { Tiles } from './tile/tiles';
 
 type BackgroundProps = {
   children: React.ReactNode;

components/custom/background/tile/tile.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { z } from 'zod';
-import { NewsSchema } from '../../../../utils/types';
+import { NewsSchema } from '../../../../utils/schemas';
-import { CardContent } from './cardContent';
+import { TileContent } from './tileContent';
 
 type CardProps = {
   newsA?: z.infer<typeof NewsSchema>;
@@ -10,7 +10,7 @@ type CardProps = {
   height: number;
 };
 
-export function Card({ newsA, newsB, width, height }: CardProps) {
+export function Tile({ newsA, newsB, width, height }: CardProps) {
   const [switched, setSwitched] = useState(false);
   const [active, setActive] = useState(Math.random() < 0.5);
   const [delayed, setDelayed] = useState(true);
@@ -41,8 +41,8 @@ export function Card({ newsA, newsB, width, height }: CardProps) {
       <div className='transform-gpu'>
         <div className={`absolute left-0 top-0 w-full ${''}`}>
           {active
-            ? CardContent({ story: newsA, width, height, side: true })
+            ? TileContent({ story: newsA, width, height, side: true })
-            : CardContent({ story: newsB, width, height, side: false })}
+            : TileContent({ story: newsB, width, height, side: false })}
         </div>
       </div>
     </div>

components/custom/background/tile/tileContent.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { z } from 'zod';
-import { NewsSchema } from '../../../../utils/types';
+import { NewsSchema } from '../../../../utils/schemas';
 
 type CardContentProps = {
   story: z.infer<typeof NewsSchema>;
@@ -18,7 +18,7 @@ function getRandomColor() {
   return color;
 }
 
-export function CardContent({ story, width, height, side }: CardContentProps) {
+export function TileContent({ story, width, height, side }: CardContentProps) {
   const [firstColor, setFirstColor] = useState(getRandomColor());
   const [secondColor, setSecondColor] = useState(getRandomColor());
   const [switched, setSwitched] = useState(true);

components/custom/background/tile/tiles.tsx

@@ -3,8 +3,8 @@
 import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { z } from 'zod';
-import { NewsSchema } from '../../../../utils/types';
+import { NewsSchema } from '../../../../utils/schemas';
-import { Card } from './card';
+import { Tile } from './tile';
 
 type TilesProps = {
   children: React.ReactNode;
@@ -74,7 +74,7 @@ export const Tiles = ({ children }: TilesProps) => {
           width: `${baseWidth * 4}px`
         }}
       >
-        <Card
+        <Tile
           newsA={news[randomA]}
           newsB={news[randomB]}
           width={baseHeight}
@@ -110,5 +110,5 @@ export const Tiles = ({ children }: TilesProps) => {
     );
   }
 
-  return <div className='flex flex-col justify-between'>{renderGrid()}</div>;
+  return <div className='flex h-[100vh] overflow-hidden'>{renderGrid()}</div>;
 };

components/custom/footer.tsx

@@ -1,27 +1,39 @@
 import { usePathname } from 'next/navigation';
 import { Link } from './link';
 
-const links = [
+const links = [{ name: 'Subscribe', path: '/' }];
-  { name: 'Subscribe', path: '/' },
-  { name: 'Privacy Policy', path: '/privacy' },
-];
 
 function Footer() {
   const pathname = usePathname();
 
   return (
-    <ul className="flex justify-center space-x-4">
+    <div>
+      {pathname === '/' ? (
+        <p className='text-center text-xs text-gray-600'>
+          By subscribing, you agree to our{' '}
+          <a
+            className='font-medium text-indigo-600 hover:text-indigo-500'
+            href='/privacy'
+          >
+            Privacy Policy
+          </a>
+          .
+        </p>
+      ) : (
+        <ul className='flex justify-center space-x-4'>
           {links.map(
-        (link) =>
+            link =>
               pathname !== link.path &&
-          !(pathname === '/confirmation' && link.path === '/subscribe') && (
+              !(pathname === '/confirmation' && link.path === '/') && (
                 <Link key={link.path} path={link.path} text={link.name} />
               )
           )}
           {pathname === '/privacy' && (
-        <Link path="/unsubscribe" text="Unsubscribe" />
+            <Link path='/unsubscribe' text='Unsubscribe' />
           )}
         </ul>
+      )}
+    </div>
   );
 }
 

components/emails/confirmation.tsx

@@ -1,6 +1,6 @@
 import Email from './template';
 
-export default function ConfirmationEmail(code: string) {
+export default function ConfirmationTemplate(code: string) {
   return {
     subject: 'Welcome!',
     template: (

components/emails/newsletter.tsx

@@ -3,7 +3,7 @@ import { Html } from '@react-email/html';
 import { Section } from '@react-email/section';
 import { Text } from '@react-email/text';
 import { z } from 'zod';
-import { NewsSchema } from '../../utils/types';
+import { NewsSchema } from '../../utils/schemas';
 
 export default function NewsletterTemplate(
   stories: z.infer<typeof NewsSchema>[]

components/ui/card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'bg-card text-card-foreground rounded-lg border shadow-sm',
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
       className
     )}
     {...props}
@@ -49,7 +49,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ));
@@ -59,7 +59,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  <div ref={ref} className={cn('px-8 py-4', className)} {...props} />
 ));
 CardContent.displayName = 'CardContent';
 
@@ -69,7 +69,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('flex items-center p-6 pt-0', className)}
+    className={cn('flex items-center p-8', className)}
     {...props}
   />
 ));

tailwind.config.ts

@@ -6,8 +6,7 @@ module.exports = {
   content: [
     './pages/**/*.{ts,tsx}',
     './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}'
-    './src/**/*.{ts,tsx}'
   ],
   theme: {
     container: {