[ui] add toasts

apps/portal/src/pages/_app.tsx

@@ -3,6 +3,7 @@ import type { Session } from 'next-auth';
 import { SessionProvider } from 'next-auth/react';
 import React from 'react';
 import superjson from 'superjson';
+import { ToastsProvider } from '@tih/ui';
 import { httpBatchLink } from '@trpc/client/links/httpBatchLink';
 import { loggerLink } from '@trpc/client/links/loggerLink';
 import { withTRPC } from '@trpc/next';
@@ -19,9 +20,11 @@ const MyApp: AppType<{ session: Session | null }> = ({
 }) => {
   return (
     <SessionProvider session={session}>
-      <AppShell>
-        <Component {...pageProps} />
-      </AppShell>
+      <ToastsProvider>
+        <AppShell>
+          <Component {...pageProps} />
+        </AppShell>
+      </ToastsProvider>
     </SessionProvider>
   );
 };

apps/portal/src/pages/index.tsx

@@ -1,32 +1,11 @@
-import { useState } from 'react';
-import type { TypeaheadOption } from '@tih/ui';
-import { HorizontalDivider } from '@tih/ui';
-
-import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
-import type { Month, MonthYear } from '~/components/shared/MonthYearPicker';
-import MonthYearPicker from '~/components/shared/MonthYearPicker';
-
 export default function HomePage() {
-  const [selectedCompany, setSelectedCompany] =
-    useState<TypeaheadOption | null>(null);
-  const [monthYear, setMonthYear] = useState<MonthYear>({
-    month: (new Date().getMonth() + 1) as Month,
-    year: new Date().getFullYear(),
-  });
-
   return (
     <main className="flex-1 overflow-y-auto">
       <div className="flex h-full items-center justify-center">
         <div className="space-y-4">
           <h1 className="text-primary-600 text-center text-4xl font-bold">
-            Homepage
+            Tech Interview Handbook Portal
           </h1>
-          <CompaniesTypeahead
-            onSelect={(option) => setSelectedCompany(option)}
-          />
-          <pre>{JSON.stringify(selectedCompany, null, 2)}</pre>
-          <HorizontalDivider />
-          <MonthYearPicker value={monthYear} onChange={setMonthYear} />
         </div>
       </div>
     </main>

apps/portal/src/pages/test__.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import type { TypeaheadOption } from '@tih/ui';
+import { Button } from '@tih/ui';
+import { useToast } from '@tih/ui';
+import { HorizontalDivider } from '@tih/ui';
+
+import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
+import type { Month, MonthYear } from '~/components/shared/MonthYearPicker';
+import MonthYearPicker from '~/components/shared/MonthYearPicker';
+
+export default function HomePage() {
+  const [selectedCompany, setSelectedCompany] =
+    useState<TypeaheadOption | null>(null);
+  const [monthYear, setMonthYear] = useState<MonthYear>({
+    month: (new Date().getMonth() + 1) as Month,
+    year: new Date().getFullYear(),
+  });
+
+  const { showToast } = useToast();
+
+  return (
+    <main className="flex-1 overflow-y-auto">
+      <div className="flex h-full items-center justify-center">
+        <div className="space-y-4">
+          <h1 className="text-primary-600 text-center text-4xl font-bold">
+            Test Page
+          </h1>
+          <CompaniesTypeahead
+            onSelect={(option) => setSelectedCompany(option)}
+          />
+          <pre>{JSON.stringify(selectedCompany, null, 2)}</pre>
+          <HorizontalDivider />
+          <MonthYearPicker value={monthYear} onChange={setMonthYear} />
+          <HorizontalDivider />
+          <Button
+            label="Add toast"
+            variant="primary"
+            onClick={() => {
+              showToast({
+                // Duration: 10000 (optional)
+                subtitle: `Some optional subtitle ${Date.now()}`,
+                title: `Hello World ${Date.now()}`,
+                variant: 'success',
+              });
+            }}
+          />
+        </div>
+      </div>
+    </main>
+  );
+}