basic tab system

Author: noobG

devconnect-app/src/app/dashboard-sections.tsx

@@ -4,37 +4,67 @@ import { useFavorites } from './store.hooks';
 import NoEventsImage from 'lib/components/event-schedule-new/images/404.png';
 import moment from 'moment';
 import Image from 'next/image';
+import Button from 'lib/components/voxel-button/button';
+import { useUnifiedConnection } from '@/hooks/useUnifiedConnection';
+import { useNow } from 'lib/hooks/useNow';
+import { useState } from 'react';
 
 export function WelcomeSection() {
+  // const { email } = useUnifiedConnection();
+  const now = useNow();
+  const dummyEmail = 'example.eth';
+  const buenosAiresTime = moment(now).utc().subtract(3, 'hours');
+  const formattedDate = buenosAiresTime.format('h:mm A');
+
   return (
-    <div className="flex flex-col items-start justify-start gap-2">
-      <div className="text-2xl font-semibold bg-clip-text text-transparent bg-[linear-gradient(90.78deg,#F6B40E_2.23%,#FF85A6_25.74%,#74ACDF_86.85%)]">
-        ¡Buen dia!
+    <div className="flex flex-col items-start justify-start gap-2 mb-4">
+      <div className="flex justify-between w-full gap-2">
+        <div className="text-2xl font-semibold bg-clip-text text-transparent bg-[linear-gradient(90.78deg,#F6B40E_2.23%,#FF85A6_25.74%,#74ACDF_86.85%)]">
+          ¡Buen dia!
+        </div>
+        <div className="font-semibold text-sm">
+          {formattedDate} Buenos Aires (GMT-3)
+        </div>
       </div>
-      <div className="text-2xl font-bold">John Nethereum</div>
-      <div>Welcome to the Ethereum World's Fair!</div>
+      <div className="text-xl font-bold">{dummyEmail}</div>
+      <div>Welcome to the Ethereum World's Fair! </div>
     </div>
   );
 }
 
 export function TodaysSchedule({ atprotoEvents }: { atprotoEvents: any[] }) {
   const [favorites] = useFavorites();
+  const [selectedEvent, setSelectedEvent] = useState<any>(null);
   const events = atprotoEvents.filter((event) =>
     favorites.includes(event.id.toString())
   );
 
   const hasEventsToShow = events.length > 0;
 
   return (
-    <div className="flex flex-col items-start justify-start gap-2 p-4 bg-white border border-[rgba(234,234,234,1)]">
-      <div className="flex w-full items-start justify-between gap-2">
+    <div className="flex flex-col items-start justify-start gap-2 p-4 pt-3 bg-white border border-[rgba(234,234,234,1)]">
+      <div className="flex w-full items-center justify-between gap-2">
         <p className="font-semibold">Today's Schedule</p>
-        <p className="text-xs">{moment().format('dddd, D MMMM')}</p>
+        {/* <p className="text-xs">{moment().format('dddd, D MMMM')}</p> */}
       </div>
-      <p className="text-xs">
+      <p className="text-xs mb-2">
         These are your recommended events for today. Build your own schedule by
         adding events to your favorites.
       </p>
+
+      {selectedEvent && (
+        <div className="flex flex-col items-center justify-center gap-2 w-full">
+          <Event
+            event={selectedEvent}
+            selectedEvent={selectedEvent}
+            setSelectedEvent={setSelectedEvent}
+            setExports={() => {}}
+            className="w-full"
+            isDialog
+          />
+        </div>
+      )}
+
       {hasEventsToShow && (
         <div className="flex flex-col items-stretch gap-2 w-full">
           {events.map((event) => (
@@ -43,18 +73,26 @@ export function TodaysSchedule({ atprotoEvents }: { atprotoEvents: any[] }) {
               key={event.id}
               event={event}
               className="w-full"
-              selectedEvent={null}
-              setSelectedEvent={() => {}}
+              selectedEvent={selectedEvent}
+              setSelectedEvent={setSelectedEvent}
               setExports={() => {}}
             />
           ))}
         </div>
       )}
       {!hasEventsToShow && (
-        <div className="flex flex-col items-center justify-center gap-2 w-full">
-          <Image src={NoEventsImage} alt="No events" className="w-full" />
+        <div className="flex flex-col items-center justify-center gap-2 w-full ">
+          <Image
+            src={NoEventsImage}
+            alt="No events"
+            className="w-full max-w-[400px]"
+          />
         </div>
       )}
+
+      <Button size="sm" className="w-full md:w-auto self-start mt-2">
+        View full Schedule
+      </Button>
     </div>
   );
 }

devconnect-app/src/app/layout.tsx

@@ -98,7 +98,7 @@ export default async function RootLayout({
   // const image = `${process.env.NEXT_PUBLIC_APP_URL}/social.jpg`;
 
   // Check if Supabase is configured
-  const hasSupabase = !!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+  // const hasSupabase = !!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
 
   return (
     <html lang="en">

devconnect-app/src/app/page-content.tsx

@@ -4,16 +4,29 @@ import { useRouter } from 'next/navigation';
 import PageLayout from '@/components/PageLayout';
 import { useUnifiedConnection } from '@/hooks/useUnifiedConnection';
 import { WelcomeSection, TodaysSchedule } from './dashboard-sections';
+import { HomeIcon, CalendarIcon, TicketIcon } from 'lucide-react';
 
-const tabs = (atprotoEvents: any[]) => [
+export const homeTabs = () => [
   {
-    label: 'Dashboard',
-    component: () => (
-      <div className="bg-[rgba(246,250,254,1)] p-4">
-        <WelcomeSection />
-        <TodaysSchedule atprotoEvents={atprotoEvents} />
-      </div>
-    ),
+    label: 'Home',
+    labelIcon: HomeIcon,
+    href: '/',
+    component: () => null,
+    isActive: (pathname: string) => pathname === '/',
+  },
+  {
+    label: 'Schedule',
+    labelIcon: CalendarIcon,
+    href: '/schedule',
+    component: () => null,
+    isActive: (pathname: string) => pathname === '/schedule',
+  },
+  {
+    label: 'Tickets',
+    labelIcon: TicketIcon,
+    href: '/tickets',
+    component: () => null,
+    isActive: (pathname: string) => pathname === '/tickets',
   },
 ];
 
@@ -25,7 +38,6 @@ export default function HomePageContent({
   const router = useRouter();
   const { address } = useUnifiedConnection();
 
-  console.log('🔄 [HOME] atprotoEvents', atprotoEvents);
   useEffect(() => {
     const isSkipped = localStorage.getItem('loginIsSkipped');
 
@@ -35,5 +47,12 @@ export default function HomePageContent({
     }
   }, [router, address]);
 
-  return <PageLayout title="Home 😎" tabs={tabs(atprotoEvents)} />;
+  return (
+    <PageLayout title="Ethereum World's Fair" tabs={homeTabs()}>
+      <div className="bg-[rgba(246,250,254,1)] p-4 grow">
+        <WelcomeSection />
+        <TodaysSchedule atprotoEvents={atprotoEvents} />
+      </div>
+    </PageLayout>
+  );
 }

devconnect-app/src/app/schedule/page-content.tsx

@@ -0,0 +1,46 @@
+'use client';
+import PageLayout from '@/components/PageLayout';
+// import { CalendarRangeIcon } from 'lucide-react';
+// import ProgrammeTab from './ScheduleTab';
+// import { useUnifiedConnection } from '@/hooks/useUnifiedConnection';
+import { homeTabs } from '../page-content';
+import cn from 'classnames';
+import css from './schedule.module.scss';
+import { useFavorites } from '@/app/store.hooks';
+import { default as ScheduleLayout } from 'lib/components/event-schedule-new/layout-app';
+
+// const tabs = (atprotoEvents: any[]) => [
+//   {
+//     label: 'Event Schedule',
+//     labelIcon: CalendarRangeIcon,
+//     component: () => <ProgrammeTab atprotoEvents={atprotoEvents} />,
+//   },
+
+//   // {
+//   //   label: 'Favorites',
+//   //   component: () => <FavoritesTab />,
+//   // },
+// ];
+
+export default function ProgrammePageContent({
+  atprotoEvents,
+}: {
+  atprotoEvents: any;
+}) {
+  // useUnifiedConnection();
+  const [favoriteEvents, toggleFavoriteEvent] = useFavorites();
+
+  return (
+    <PageLayout title="Schedule" tabs={homeTabs()}>
+      <div className={cn('text-left touch-only:px-0 p-4', css['schedule-tab'])}>
+        <ScheduleLayout
+          isCommunityCalendar={false}
+          events={atprotoEvents}
+          favoriteEvents={favoriteEvents}
+          toggleFavoriteEvent={toggleFavoriteEvent}
+          // events={atprotoEvents.filter((event: any) => event.isCoreEvent)}
+        />
+      </div>
+    </PageLayout>
+  );
+}

devconnect-app/src/app/schedule/page.tsx

@@ -0,0 +1,29 @@
+import ProgrammePageContent from './page-content';
+import { apiResultToCalendarFormat } from 'lib/components/event-schedule-new/atproto-to-calendar-format';
+
+export async function getAtprotoEvents() {
+  try {
+    const atprotoEvents = await fetch(
+      process.env.NODE_ENV === 'development' && !process.env.FORCE_PROD_ENV
+        ? 'http://localhost:4000/calendar-events'
+        : 'https://at-slurper.onrender.com/calendar-events',
+      {
+        next: { revalidate: 300 }, // Cache for 5 minutes
+      }
+    );
+
+    const atprotoEventsData = await atprotoEvents.json();
+
+    const formattedAtprotoEvents = apiResultToCalendarFormat(atprotoEventsData);
+
+    return formattedAtprotoEvents;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+}
+
+export default async function ProgrammePage() {
+  const atprotoEvents = await getAtprotoEvents();
+  return <ProgrammePageContent atprotoEvents={atprotoEvents} />;
+}

devconnect-app/src/app/schedule/schedule.module.scss

@@ -0,0 +1,8 @@
+.schedule-tab {
+  [data-type="action-bar"] {
+    @media (pointer: coarse) {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+  }
+}

devconnect-app/src/app/store.ts

@@ -13,6 +13,10 @@ export interface AppState {
   logout: (state: AppState) => void;
 }
 
+export const useNow = () => {
+  return new Date();
+};
+
 // Lets keep global state for simplicity - useShallow for performance as needed
 export const useGlobalStore = create<AppState>()((set) => ({
   // Initial state