Merge pull request #231 from posadev/communities-agenda

feat: add missing communities and improve agenda

Author: Yaidi

src/components/Header.tsx

@@ -38,7 +38,7 @@ const Header = () => {
         >
             <div className="container mx-auto px-4 pt-2">
                 <div className="flex items-center justify-between h-16">
-                        <a className="flex items-center space-x-2" onClick={() => navigate('/#inicio')}>
+                        <a className="flex items-center space-x-2" onClick={() => navigateMenu('/#inicio')}>
                             <img
                                 src={posadevLogo}
                                 alt="Posadev Logo"
@@ -105,7 +105,7 @@ const Header = () => {
                             </a>
                             <a
                                 onClick={() => navigateMenu('/#patrocinadores')}
-                                className={cn("w-full bg-gradient-to-r from-posadev-darkPink to-posadev-brightPink text-white px-4 py-3 rounded-lg flex items-center space-x-2", isActive('/#patrocinadores') && "underline shadow-posadev-brightPink/25")}
+                                className={cn("w-full bg-gradient-to-r from-posadev-darkPink to-posadev-brightPink text-white px-4 py-3 rounded-lg flex items-center space-x-2 gap-2", isActive('/#patrocinadores') && "underline shadow-posadev-brightPink/25")}
                             >
                                 <UserStar className="w-4 h-4" aria-hidden="true"/>
                                 Se un patrocinador

src/components/agenda/AgendaContent.tsx

@@ -4,7 +4,6 @@ import {useEffect} from "react";
 import {getAgenda} from "@/https/fetch.ts";
 import {useAppContext} from "@/context/AppContext.tsx";
 import AgendaRow from "@/components/agenda/AgendaRow.tsx";
-import {ScrollArea} from "@/components/ui/scroll-area.tsx";
 
 const AgendaContent = () => {
     const {setAgenda, agenda, savedSessions} = useAppContext()
@@ -19,7 +18,7 @@ const AgendaContent = () => {
     if (agenda.length === 0) return (<></>)
 
     if (!displayAll && savedSessions.size === 0) {
-        return (<Card className="w-full pb-8 md:px-6 relative shadow-gray-500">
+        return (<Card className="w-full pb-8 md:px-6 relative shadow-gray-500 min-h-60">
             <nav className="flex gap-4 pt-8 pb-2 sticky bg-white w-full h-20">
                 <Badge variant={`${displayAll ? "default" : "ghost"}`} onClick={() => setDisplayAll(true)} role="button">Mostrar todos</Badge>
                 <Badge variant={`${displayAll ? "ghost" : "default"}`} onClick={() => setDisplayAll(false)} role="button">Mostrar guardados</Badge>
@@ -30,7 +29,7 @@ const AgendaContent = () => {
 
   return (
       <Card className="w-full pb-8 md:px-6 relative shadow-gray-500">
-          <nav className="flex gap-4 pt-8 pb-2 sticky top-[80px] z-10 bg-white w-full h-20">
+          <nav className="flex gap-4 mt-4 py-2 px-4 sticky top-[80px] z-20 bg-white w-full h-14">
               <Badge variant={`${displayAll ? "default" : "ghost"}`} onClick={() => setDisplayAll(true)} role="button">Mostrar todos</Badge>
               <Badge variant={`${displayAll ? "ghost" : "default"}`} onClick={() => setDisplayAll(false)} role="button">Mostrar guardados</Badge>
           </nav>

src/components/agenda/AgendaRow.tsx

@@ -1,10 +1,11 @@
 import React, {useEffect, useState} from "react";
-import RoomsExpandable from "@/components/agenda/RoomsExpandable.tsx";
 import Rooms from "@/components/agenda/Rooms.tsx";
 import {useIsMobile} from "@/hooks/use-mobile.tsx";
 import {IRoomAgenda} from "@/types/agenda.ts";
 import {formatTime} from "@/lib/utils.ts";
 import {useAppContext} from "@/context/AppContext.tsx";
+import Adorno from "@/components/icons/Adorno.tsx";
+import {Card} from "@/components/ui/card.tsx";
 
 interface AgendaRowProps {
     slotStart: string;
@@ -49,8 +50,14 @@ const AgendaRow: React.FC<AgendaRowProps> = ({slotStart, rooms}) => {
               hasPassed ? "opacity-0 pointer-events-none" : "opacity-100"
           }`}
       >
+          <Card className="flex items-center gap-4 p-2 bg-alternative-700 border-alternative-700 sticky top-[136px] z-10">
+              <Adorno className="h-8 w-8" />
+              <time className="font-bold text-2xl text-white">{formatTime(slotStart)}</time>
+              <span aria-label="a" className="font-bold text-2xl text-gray-500">-</span>
+              <time className="font-bold text-2xl text-white">{endTime}</time>
+              <h2 className="font-bold text-2xl text-gray-700"></h2>
+          </Card>
           <Rooms rooms={rooms} slotStart={slotStart} endsAt={endTime} hide={false} />
-          <RoomsExpandable rooms={rooms} slotStart={slotStart} endsAt={endTime} hide={true} />
       </section>
   )
 }

src/components/agenda/Rooms.tsx

@@ -1,20 +1,10 @@
 import React from "react";
-import Adorno from "@/components/icons/Adorno.tsx";
 import CardCharla from "@/components/agenda/CardCharla.tsx";
-import {Card} from "@/components/ui/card.tsx";
-import {formatTime} from "@/lib/utils.ts";
 
 const Rooms = ({rooms, slotStart, hide, endsAt}) => {
     if (hide) return null;
   return (
       <>
-          <Card className="flex items-center gap-4 p-2 bg-alternative-700 border-alternative-700">
-              <Adorno className="h-8 w-8" />
-              <time className="font-bold text-2xl text-white">{formatTime(slotStart)}</time>
-              <span aria-label="a" className="font-bold text-2xl text-gray-500">-</span>
-                <time className="font-bold text-2xl text-white">{endsAt}</time>
-              <h2 className="font-bold text-2xl text-gray-700"></h2>
-          </Card>
           <div className="flex flex-col flex-wrap flex-grow  md:flex-row gap-6 px-10 w-full">
               {rooms.map((room) => {
                     return <CardCharla key={room.id} room={room} />

src/components/agenda/RoomsExpandable.tsx

@@ -3,31 +3,23 @@ import CardCharla from "@/components/agenda/CardCharla.tsx";
 import Adorno from "@/components/icons/Adorno.tsx";
 import React from "react";
 import {formatTime} from "@/lib/utils.ts";
+import Carousel from "@/components/Carousel.tsx";
+import {IRoomAgenda} from "@/types/agenda.ts";
+import {Card} from "@/components/ui/card.tsx";
 
 const RoomsExpandable = ({rooms, slotStart, endsAt, hide}) => {
     if (hide) return null;
     return (
-        <Accordion type="single" collapsible className="">
-            <AccordionItem value={slotStart}>
-            <div className="flex items-center gap-4">
-                <AccordionTrigger className="flex gap-6 px-2">
-                    <Adorno/>
-                    <time className="font-bold text-2xl">{formatTime(slotStart)}</time>
-                    <span aria-label="a" className="font-bold text-2xl text-gray-500">-</span>
-                    <time className="font-bold text-2xl text-white">{endsAt}</time>
-                    <h2 className="font-bold text-2xl text-gray-700"></h2>
-                    Ver mas
-                </AccordionTrigger>
-            </div>
-                <AccordionContent>
-                    {rooms.map((room) => (
-                        <div className="flex flex-col md:flex-row gap-6" key={room.id}>
-                            <CardCharla room={room}/>
-                        </div>
-                    ))}
-                </AccordionContent>
-            </AccordionItem>
-        </Accordion>
+        <section>
+            <Card className="flex items-center gap-4 p-2 bg-alternative-700 border-alternative-700">
+                <Adorno className="h-8 w-8" />
+                <time className="font-bold text-2xl text-white">{formatTime(slotStart)}</time>
+                <span aria-label="a" className="font-bold text-2xl text-gray-500">-</span>
+                <time className="font-bold text-2xl text-white">{endsAt}</time>
+                <h2 className="font-bold text-2xl text-gray-700"></h2>
+            </Card>
+            <Carousel items={rooms}  renderItem={(room: IRoomAgenda) => <CardCharla room={room} key={room.id}/>} />
+        </section>
     )
 }
 

src/context/AppContext.tsx

@@ -39,7 +39,6 @@ export const AppProvider = ({ children }) => {
 
 
     useEffect(() => {
-        console.log(savedSessions);
         localStorage.setItem("savedSessions", JSON.stringify([...savedSessions]));
     }, [savedSessions]);
 

src/data/communites.ts

@@ -8,6 +8,9 @@ import GDGLogo from "@/img/communities/2025/GDG-Guadalajara.png";
 import ajolotesAWSLogo from "@/img/communities/2025/ajolotes-aws.png";
 import calzadacode from "@/img/communities/2025/calzadacode.png";
 import linuxeroszapopan from "@/img/communities/2025/linuxeroszapopan.png";
+import techQuiero from "@/img/communities/2025/techquiero.png";
+import rubymx from "@/img/communities/2025/rubymx.png";
+import webdevtalksLogo from "@/img/communities/2025/webdevtalks.png";
 
 export const communitiesAllies: Array<ICommunity> = [
     {
@@ -180,5 +183,79 @@ export const communitiesAllies: Array<ICommunity> = [
                 linkType: LinkType.Twitter
             }
         ]
+    },
+    {
+        name: "TechQuiero",
+        description: "",
+        link: "https://techquiero.com/es",
+        image: techQuiero,
+        socials: [
+            {
+                title: "Instagram",
+                url: "https://www.instagram.com/techquieromx/",
+                linkType: LinkType.Instagram
+            },
+            {
+                title: "Facebook",
+                url: "https://www.facebook.com/TechQuiero",
+                linkType: LinkType.Facebook
+            },
+            {
+                title: "LinkedIn",
+                url: "https://www.linkedin.com/company/tech-quiero/posts/?feedView=all",
+                linkType: LinkType.LinkedIn
+            }
+        ]
+    },
+    {
+        name: "Comunidad RubyMX",
+        description: "",
+        link: "https://comunidadruby.mx/",
+        image: rubymx,
+        socials: [
+            {
+                title: "Facebook",
+                url: "https://www.facebook.com/comunidadrubymx",
+                linkType: LinkType.Facebook
+            },
+            {
+                title: "LinkedIn",
+                url: "https://mx.linkedin.com/company/comunidadrubymx",
+                linkType: LinkType.LinkedIn
+            },
+            {
+                title: "Twitter",
+                url: "https://x.com/comunidadrubymx",
+                linkType: LinkType.Twitter
+            },
+            {
+                title: "Instagram",
+                url: "https://www.instagram.com/comunidadrubymx",
+                linkType: LinkType.Instagram
+            }
+        ]
+    },
+    {
+        name: "WebDevTalks",
+        description: "",
+        link: "https://webdevtalks.mx",
+        image: webdevtalksLogo,
+        socials: [
+            {
+                title: "Instagram",
+                url: "https://www.instagram.com/webdevtalksmx",
+                linkType: LinkType.Instagram
+            },
+            {
+                title: "Facebook",
+                url: "https://www.facebook.com/ColimaWebDevTalks",
+                linkType: LinkType.Facebook
+            },
+            {
+                title: "LinkedIn",
+                url: "https://www.linkedin.com/company/web-dev-talks",
+                linkType: LinkType.LinkedIn
+            }
+        ]
     }
 ];