style: added shadcn-ui

components/custom/card.tsx

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '../../components/ui/card';
+import Footer from './footer';
+
+type CustomCardProps = {
+  title: string;
+  description?: string;
+  content: ReactNode;
+  style?: string;
+  footer?: boolean;
+};
+
+export const CustomCard = ({
+  title,
+  description,
+  content,
+  style,
+  footer = true,
+}: CustomCardProps) => {
+  return (
+    <Card className={style ?? 'w-full sm:w-2/3 md:w-2/5 lg:w-1/3 xl:w-1/4'}>
+      <CardHeader className="text-center">
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>{content}</CardContent>
+      {footer && (
+        <CardFooter className="flex justify-center space-x-4">
+          <Footer />
+        </CardFooter>
+      )}
+    </Card>
+  );
+};

components/custom/error.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+export default function ErrorMessage() {
+  return 'Oops. Something went wrong. Please try later :(';
+}

components/custom/footer.tsx

@@ -0,0 +1,28 @@
+import { usePathname } from 'next/navigation';
+import { Link } from './link';
+
+const links = [
+  { name: 'Subscribe', path: '/' },
+  { name: 'Privacy Policy', path: '/privacy' },
+];
+
+function Footer() {
+  const pathname = usePathname();
+
+  return (
+    <ul className="flex justify-center space-x-4">
+      {links.map(
+        (link) =>
+          pathname !== link.path &&
+          !(pathname === '/confirmation' && link.path === '/subscribe') && (
+            <Link key={link.path} path={link.path} text={link.name} />
+          )
+      )}
+      {pathname === '/privacy' && (
+        <Link path="/unsubscribe" text="Unsubscribe" />
+      )}
+    </ul>
+  );
+}
+
+export default Footer;

components/custom/link.tsx

@@ -0,0 +1,15 @@
+import NextLink from 'next/link';
+import { Button } from '../ui/button';
+
+type LinkProps = {
+  path: string;
+  text: string;
+};
+
+export function Link({ path, text }: LinkProps) {
+  return (
+    <Button asChild>
+      <NextLink href={path}>{text}</NextLink>
+    </Button>
+  );
+}