Prettier Formatting

Author: Eshvar-Thevar

src/app/layout.tsx

@@ -7,7 +7,7 @@ import { type Metadata } from 'next';
 import { GoogleAnalytics } from '@next/third-parties/google';
 
 import theme from '@src/utils/theme';
-import { ToastProvider } from "@src/components/toast/ToastProvider";
+import { ToastProvider } from '@src/components/toast/ToastProvider';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -56,9 +56,7 @@ export default function RootLayout({
       >
         <AppRouterCacheProvider>
           <ThemeProvider theme={theme}>
-            <ToastProvider>
-              {children}
-            </ToastProvider>
+            <ToastProvider>{children}</ToastProvider>
           </ThemeProvider>
         </AppRouterCacheProvider>
         {process.env.NEXT_PUBLIC_VERCEL_ENV === 'production' && (
@@ -68,4 +66,3 @@ export default function RootLayout({
     </html>
   );
 }
-

src/components/toast/ToastProvider.tsx

@@ -1,8 +1,15 @@
-"use client";
-import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+'use client';
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 // toast types (style variants)
-type ToastVariant = "success" | "error" | "info" | "warning";
+type ToastVariant = 'success' | 'error' | 'info' | 'warning';
 
 // structure for each toast item
 export type Toast = {
@@ -15,18 +22,31 @@ export type Toast = {
 
 // methods exposed by the toast context
 type ToastContextValue = {
-  show: (t: Omit<Toast, "id">) => string;
+  show: (t: Omit<Toast, 'id'>) => string;
   dismiss: (id: string) => void;
-  success: (message: string, opts?: Omit<Toast, "id" | "message" | "variant">) => string;
-  error: (message: string, opts?: Omit<Toast, "id" | "message" | "variant">) => string;
-  info: (message: string, opts?: Omit<Toast, "id" | "message" | "variant">) => string;
-  warning: (message: string, opts?: Omit<Toast, "id" | "message" | "variant">) => string;
+  success: (
+    message: string,
+    opts?: Omit<Toast, 'id' | 'message' | 'variant'>,
+  ) => string;
+  error: (
+    message: string,
+    opts?: Omit<Toast, 'id' | 'message' | 'variant'>,
+  ) => string;
+  info: (
+    message: string,
+    opts?: Omit<Toast, 'id' | 'message' | 'variant'>,
+  ) => string;
+  warning: (
+    message: string,
+    opts?: Omit<Toast, 'id' | 'message' | 'variant'>,
+  ) => string;
 };
 
 const ToastContext = createContext<ToastContextValue | null>(null);
 
 // generate simple random id
-const makeId = () => Math.random().toString(36).slice(2) + Date.now().toString(36);
+const makeId = () =>
+  Math.random().toString(36).slice(2) + Date.now().toString(36);
 
 // provider wraps app and manages toast state
 export function ToastProvider({ children }: { children: React.ReactNode }) {
@@ -45,33 +65,38 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
 
   // create and display a new toast
   const show = useCallback(
-    ({ title, message, variant = "info", duration = 4000 }: Omit<Toast, "id">) => {
+    ({
+      title,
+      message,
+      variant = 'info',
+      duration = 4000,
+    }: Omit<Toast, 'id'>) => {
       const id = makeId();
       const toast: Toast = { id, title, message, variant, duration };
       setToasts((prev) => [toast, ...prev]);
       timers.current[id] = window.setTimeout(() => dismiss(id), duration);
       return id;
     },
-    [dismiss]
+    [dismiss],
   );
 
   // quick helpers for each variant (success, error, etc.)
   const factory =
     (variant: ToastVariant) =>
-    (message: string, opts?: Omit<Toast, "id" | "message" | "variant">) =>
+    (message: string, opts?: Omit<Toast, 'id' | 'message' | 'variant'>) =>
       show({ message, variant, ...opts });
 
   // memoized context value
   const value = useMemo<ToastContextValue>(
     () => ({
       show,
       dismiss,
-      success: factory("success"),
-      error: factory("error"),
-      info: factory("info"),
-      warning: factory("warning"),
+      success: factory('success'),
+      error: factory('error'),
+      info: factory('info'),
+      warning: factory('warning'),
     }),
-    [show, dismiss]
+    [show, dismiss],
   );
 
   return (
@@ -86,7 +111,7 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
 export function useToast() {
   const ctx = useContext(ToastContext);
   if (!ctx) {
-    throw new Error("useToast must be used within <ToastProvider>");
+    throw new Error('useToast must be used within <ToastProvider>');
   }
   return ctx;
 }
@@ -114,33 +139,38 @@ function ToastViewport({
 }
 
 // single toast card UI
-function ToastCard({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }) {
-  const { title, message, variant = "info" } = toast;
+function ToastCard({
+  toast,
+  onDismiss,
+}: {
+  toast: Toast;
+  onDismiss: () => void;
+}) {
+  const { title, message, variant = 'info' } = toast;
 
   // variant-specific styling
   const styles: Record<ToastVariant, string> = {
     success:
-      "border-green-200 bg-green-50 text-green-900 dark:border-green-900/30 dark:bg-green-950 dark:text-green-100",
+      'border-green-200 bg-green-50 text-green-900 dark:border-green-900/30 dark:bg-green-950 dark:text-green-100',
     error:
-      "border-red-200 bg-red-50 text-red-900 dark:border-red-900/30 dark:bg-red-950 dark:text-red-100",
-    info:
-      "border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-900/30 dark:bg-blue-950 dark:text-blue-100",
+      'border-red-200 bg-red-50 text-red-900 dark:border-red-900/30 dark:bg-red-950 dark:text-red-100',
+    info: 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-900/30 dark:bg-blue-950 dark:text-blue-100',
     warning:
-      "border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900/30 dark:bg-amber-950 dark:text-amber-100",
+      'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900/30 dark:bg-amber-950 dark:text-amber-100',
   };
 
   const badge: Record<ToastVariant, string> = {
-    success: "✓",
-    error: "✕",
-    info: "ℹ",
-    warning: "⚠",
+    success: '✓',
+    error: '✕',
+    info: 'ℹ',
+    warning: '⚠',
   };
 
   return (
     <div
       className={`pointer-events-auto w-full rounded-2xl border p-4 shadow-lg backdrop-blur-sm ${styles[variant]}`}
-      role={variant === "error" ? "alert" : "status"}
-      aria-live={variant === "error" ? "assertive" : "polite"}
+      role={variant === 'error' ? 'alert' : 'status'}
+      aria-live={variant === 'error' ? 'assertive' : 'polite'}
     >
       <div className="flex items-start gap-3">
         <div className="mt-0.5 text-xl leading-none">{badge[variant]}</div>
@@ -151,7 +181,7 @@ function ToastCard({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
         <button
           type="button"
           onClick={onDismiss}
-          className="ml-2 inline-flex h-7 w-7 items-center justify-center rounded-full text-sm hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-offset-2"
+          className="ml-2 inline-flex h-7 w-7 items-center justify-center rounded-full text-sm hover:opacity-80 focus:ring-2 focus:ring-offset-2 focus:outline-none"
           aria-label="Dismiss notification"
         >
           ✖