diff --git a/next.config.mjs b/next.config.mjs index 0e83b88..61900c1 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -2,10 +2,10 @@ const nextConfig = { images: { remotePatterns: [ - // { - // protocol: "https", - // hostname: "via.assets.so", - // }, + { + protocol: "https", + hostname: "picsum.photos", + }, ], }, }; diff --git a/package-lock.json b/package-lock.json index 6ebb7bd..ca3cdb3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@hookform/resolvers": "^3.6.0", "@prisma/client": "^5.15.1", + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-radio-group": "^1.1.3", @@ -1578,6 +1579,37 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@radix-ui/react-accordion": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.1.2.tgz", + "integrity": "sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collapsible": "1.0.3", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-arrow": { "version": "1.0.3", "license": "MIT", @@ -1600,6 +1632,36 @@ } } }, + "node_modules/@radix-ui/react-collapsible": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz", + "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.0.3", "license": "MIT", diff --git a/package.json b/package.json index 2ec7e4b..b521be0 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "dependencies": { "@hookform/resolvers": "^3.6.0", "@prisma/client": "^5.15.1", + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-radio-group": "^1.1.3", diff --git a/src/app/(app)/evenements/[id]/page.tsx b/src/app/(app)/evenements/[id]/page.tsx new file mode 100644 index 0000000..9f48fe7 --- /dev/null +++ b/src/app/(app)/evenements/[id]/page.tsx @@ -0,0 +1,82 @@ +import React from "react"; +import ParallaxImage from "@/components/clients/ParallaxImage"; +import Rating from "@/components/Rating"; +import { Icons } from "@/components/Icons"; + +type Params = { id: string }; + +const EventDetail = ({ params }: { params: Params }) => { + // get journey by id + return ( +
+ +
+
+
+ +

Facile

+
+
+ +

Intermédiaire

+
+
+

+ Sentier du biscuit sablé +

+
+ +

Normandie

+
+

TODO: Par Jean Blonblon, le 23/06/2024

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce + accumsan ligula tellus, a luctus eros lobortis eu. Fusce rhoncus + turpis in metus fermentum, nec hendrerit elit mattis. In ipsum diam, + pellentesque ut porttitor eu, laoreet et dolor. Sed bibendum nec nulla + eu fringilla. Aliquam erat volutpat. Nullam quis risus scelerisque, + aliquet sapien ultricies, vulputate urna. Aenean sed dolor a nisl + pellentesque venenatis at eget lectus. Vestibulum tempus at dui quis + faucibus. +

+
+

Accessibilité

+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+

+ Pré-requis +

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. + Necessitatibus facilis velit dolores consectetur ea, molestias autem + maiores dicta, laboriosam eaque, nesciunt esse accusamus libero + aperiam. +

+ +

+ Commentaires +

+
+ +
+
+
+ ); +}; + +export default EventDetail; diff --git a/src/app/(app)/evenements/page.tsx b/src/app/(app)/evenements/page.tsx new file mode 100644 index 0000000..7e620ea --- /dev/null +++ b/src/app/(app)/evenements/page.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import AddButton from "@/components/AddButton"; +import JourneyForm from "@/components/form/journey/JourneyForm"; +import TopBar from "@/components/TopBar"; +import EventsFeed from "@/components/EventsFeed"; + +const Event = () => { + return ( + <> + +
+
+ +
+ + +
+ + ); +}; + +export default Event; diff --git a/src/components/EventAccordion.tsx b/src/components/EventAccordion.tsx new file mode 100644 index 0000000..0b296e5 --- /dev/null +++ b/src/components/EventAccordion.tsx @@ -0,0 +1,86 @@ +"use client"; +import React, { useState } from "react"; +import { + Accordion, + AccordionItem, + AccordionTrigger, + AccordionContent, +} from "./ui/accordion"; +import { Event } from "@prisma/client"; +import Image from "next/image"; +import Link from "next/link"; + +interface EventAccordionProps { + events: Event[]; +} + +const EventAccordion: React.FC = ({ events }) => { + const groupedEvents = events.reduce( + (groups: Record, event) => { + const date = new Date(event.startAt).toISOString().split("T")[0]; + if (!groups[date]) { + groups[date] = []; + } + groups[date].push(event); + return groups; + }, + {}, + ); + + const sortedDates = Object.keys(groupedEvents).sort(); + + const formattedDates = sortedDates.map((date) => ({ + original: date, + formatted: new Date(date).toLocaleDateString("fr-FR", { + weekday: "long", + year: "numeric", + month: "long", + day: "numeric", + }), + })); + + const [openItem, setOpenItem] = useState(formattedDates[0].formatted); + + const handleToggle = (date: string) => { + setOpenItem((prev) => (prev === date ? "" : date)); + }; + + return ( + + {formattedDates.map(({ original, formatted }) => ( + + + {formatted} + + + {groupedEvents[original].map((event) => ( +
+ + {event.title} +

{event.title}

+

{event.description}

+

+ Participants: {event.numberPlayerMin} -{" "} + {event.numberPlayerMax} +

+ +
+ ))} + + + ))} + + ); +}; +export default EventAccordion; diff --git a/src/components/EventsFeed.tsx b/src/components/EventsFeed.tsx new file mode 100644 index 0000000..9e359f2 --- /dev/null +++ b/src/components/EventsFeed.tsx @@ -0,0 +1,16 @@ +import EventAccordion from "./EventAccordion"; +import { Suspense } from "react"; + +const EventsFeed = async () => { + const res = await fetch(`${process.env.BASE_URL}/api/events`, { + cache: "no-cache", + }); + const events = await res.json(); + return ( + Loading...}> + + + ); +}; + +export default EventsFeed; diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx index 3805ea9..bbc0660 100644 --- a/src/components/MobileNav.tsx +++ b/src/components/MobileNav.tsx @@ -8,7 +8,7 @@ const MobileNav = () => { const currentPath = usePathname(); const isMainPage = currentPath === "/" || currentPath === ""; return ( -