fix: event page error

sanity.config.ts

@@ -30,7 +30,7 @@ import {schema} from './sanity/schema'
 // Define the actions that should be available for singleton documents
 const singletonActions = new Set(["publish", "discardChanges", "restore"])
 
-const multiInstanceSchemas=["gallery","event","testimonial","contact"]
+const multiInstanceSchemas=["gallery","events","testimonial","contact"]
 const multiInstanceTypes = schema.types.filter(type=>multiInstanceSchemas.includes(type.name))
 const singletonTypes = schema.types.filter(type=>!multiInstanceSchemas.includes(type.name))
 

sanity/schemaTypes/event.ts

@@ -2,7 +2,7 @@ import { defineField, defineType } from 'sanity'
 import { baseLanguage } from './locale'
 
 export default defineType({
-  name: 'event',
+  name: 'events',
   title: 'Event',
   type: 'document',
   fields: [

src/app/(main)/[locale]/events/page.tsx

@@ -1,9 +1,11 @@
+import { getLocale } from 'next-intl/server';
 import Events from '~/components/Events/Events'
 import { fetchEvents } from '~/lib/queries'
 
 
 export default async function page() {
-  const events = await fetchEvents();
+  const locale = await getLocale();
+  const events = await fetchEvents(locale);
   return (
     <main className='mt-20 min-h-screen mb-8 '>
         <Events events={events}/>

src/app/globals.css

@@ -47,7 +47,7 @@
 
 /* layout */
 .content-container {
-  @apply max-w-screen-xl;
+  @apply max-w-screen-2xl;
   @apply mx-auto;
   @apply p-3 py-6 md:p-12 md:py-12;
 }
@@ -66,7 +66,15 @@ body {
 }
 
 dialog::backdrop {
-  background-color: rgba(64, 56, 56, 0.401);
+  background-color: rgba(32, 31, 31, 0.853);
+}
+
+dialog[open]{
+  body{
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+  }
 }
 
 .eventdialog[open] {

src/components/ContactForm/ContactForm.tsx

@@ -106,7 +106,7 @@ const ContactForm = () => {
         </div>
       </form>
 
-      <dialog ref={dialogRef} className="sm:max-w-[425px] bg-white rounded-lg relative" onClick={() => dialogRef.current?.close()}>
+      <dialog ref={dialogRef} className="sm:max-w-[425px] bg-white rounded-lg relative " onClick={() => dialogRef.current?.close()}>
         <Button className="absolute top-5 right-2">
           <X />
         </Button>

src/components/Events/Events.tsx

@@ -44,7 +44,7 @@ function Events({ events }: { events: EventType[] }) {
               width={500}
               height={500}
               alt={selectedEvent.title}
-              className="rounded"
+              className="rounded object-contain"
             />
             <div className="space-y-4 md:min-w-52">
               <h1 className="font-bold text-4xl">{selectedEvent.title}</h1>

src/components/Gallery/Gallery.tsx

@@ -45,7 +45,9 @@ export function Gallery({ images }: { images: ImageType[] }) {
         ref={dialogRef}
         className="w-[80%] h-[80%] bg-primary-200 rounded  photodialog"
         onClick={onClose}
+        onScroll={e=>e.stopPropagation()}
       >
+        <div className="w-full h-full" onClick={e=>e.stopPropagation()}>
         <ThumbnailCarousel
           thumbnails={thumbnails}
           onThumbnailClick={onSelect}
@@ -55,7 +57,8 @@ export function Gallery({ images }: { images: ImageType[] }) {
           <button className="m-4" onClick={onClose}>
             <CircleX className="text-red-500" size={32} />
           </button>
-        </form> *
+        </form>
+        </div>
       </dialog>
     </section>
   );

src/components/Header/Header.tsx

@@ -10,7 +10,7 @@ const Header = () => {
   const t = useTranslations("links");
   const router = usePathname();
   return (
-    <nav className="fixed top-0 left-0 w-full z-50 bg-secondary-300 text-gray-900">
+    <nav className="fixed top-0 left-0 w-full z-50 bg-secondary-200/95 backdrop:blur-lg text-gray-900 shadow-lg">
       <div className="max-w-screen-xl flex flex-row justify-between items-center px-3 md:px-12 mx-auto">
         <LocaleLink href="/" className="flex items-center">
           Logo

src/components/ThumbnailCarousel/ThumbnailCarousel.tsx

@@ -59,7 +59,7 @@ const ThumbnailCarousel: React.FC<PropType> = ({ thumbnails, options, onThumbnai
                 width={500}
                 height={500}
                 alt={thumbnail.alt}
-                className="rounded-t aspect-[1.2]"
+                className="rounded-t  object-contain"
               />
               <div className="p-2">
                 <h2 className="text-xl">{thumbnail.title}</h2>
@@ -79,7 +79,7 @@ const ThumbnailCarousel: React.FC<PropType> = ({ thumbnails, options, onThumbnai
                   width={100}
                   height={100}
                   alt={thumbnail.alt}
-                  className="rounded aspect-[1.2] "
+                  className="rounded object-cover aspect-square"
                 />
               </div>
             ))}

src/lib/queries.ts

@@ -24,7 +24,7 @@ export async function fetchGalleryImages() {
     }))
 }
 
-const EVENT_QUERY = `*[_type == "event"]{'id':_id,title,date,description,image,"alt":image.alt}`
+const EVENT_QUERY = `*[_type == "events"]{'id':_id,title,date,description,image,"alt":image.alt}`
 
 interface EventResponse {
     id: string,
@@ -35,7 +35,14 @@ interface EventResponse {
     alt: string
 }
 
-export async function fetchEvents() {
+export async function fetchEvents(locale:string) {
+    const EVENT_QUERY = `*[_type == "events"]{
+        'id':_id,
+        "title":${coalesce("title",locale)},
+        date,
+        "description":${coalesce("description",locale)},
+        image,
+    }`
     let events = await client.fetch<EventResponse[]>(EVENT_QUERY);
     return events.map(event => ({
         ...event,