refactor: corrigindo página news

next.config.js

@@ -23,7 +23,7 @@ const config = {
                 headers: [
                     {
                         key: 'Access-Control-Allow-Origin',
-                        value: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000',
+                        value: process.env.NEXT_PUBLIC_APP_URL ?? 'http://localhost:3000',
                     },
                     {
                         key: 'Access-Control-Allow-Methods',

src/app/(authenticated)/news/page.tsx

@@ -5,7 +5,11 @@ export default function NewsPage() {
   return (
     <DashboardShell className="p-0 md:p-8">
       <div className="flex justify-center w-full">
-        <ContentFeed className="w-full max-w-4xl"/>
+        <ContentFeed
+          className="w-full max-w-4xl"
+          postsPerPage={5}
+          enablePagination={true}
+        />
       </div>
     </DashboardShell>
   );

src/components/content-feed.tsx

@@ -95,13 +95,25 @@ interface FlyerWithAuthor {
 // Dynamically import EmojiPicker to avoid SSR issues
 const EmojiPicker = dynamic(() => import("emoji-picker-react").then((mod) => mod.default), { ssr: false })
 
-export function ContentFeed({ className }: { className?: string }) {
+interface ContentFeedProps {
+  className?: string
+  postsPerPage?: number
+  enablePagination?: boolean
+}
+
+export function ContentFeed({
+  className,
+  postsPerPage = 3,
+  enablePagination = false
+}: ContentFeedProps) {
   const [open, setOpen] = useState(false)
   const [fileUrl] = useState<string | undefined>(undefined)
   const [images, setImages] = useState<string[]>([])
   const [loading] = useState(false)
+  const [visiblePostsCount, setVisiblePostsCount] = useState(enablePagination ? postsPerPage : postsPerPage)
   const { toast } = useToast()
   const utils = api.useUtils()
+  const loadMoreRef = useRef<HTMLDivElement>(null)
 
   const { data: posts, isLoading: isLoadingPosts } = api.post.list.useQuery()
   const { data: events } = api.event.list.useQuery()
@@ -112,6 +124,31 @@ export function ContentFeed({ className }: { className?: string }) {
   const eventsWithRoleConfig = events as EventWithAuthor[] | undefined
   const flyersWithRoleConfig = flyers as FlyerWithAuthor[] | undefined
 
+  // Intersection Observer para carregar mais posts
+  useEffect(() => {
+    if (!enablePagination || !postsWithRoleConfig || visiblePostsCount >= postsWithRoleConfig.length) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          setVisiblePostsCount(prev => Math.min(prev + postsPerPage, postsWithRoleConfig.length))
+        }
+      },
+      { threshold: 0.1 }
+    )
+
+    const currentRef = loadMoreRef.current
+    if (currentRef) {
+      observer.observe(currentRef)
+    }
+
+    return () => {
+      if (currentRef) {
+        observer.unobserve(currentRef)
+      }
+    }
+  }, [enablePagination, postsWithRoleConfig, visiblePostsCount, postsPerPage])
+
   const createPost = api.post.create.useMutation({
     onSuccess: async () => {
       toast({
@@ -206,7 +243,7 @@ export function ContentFeed({ className }: { className?: string }) {
             <TabsContent value="posts" className="mt-4">
               {isLoadingPosts ? (
                 <div className="space-y-4">
-                  {Array.from({ length: 3 }).map((_, i) => (
+                  {Array.from({ length: enablePagination ? postsPerPage : 3 }).map((_, i) => (
                     <div key={i} className="space-y-2">
                       <Skeleton className="h-4 w-1/3" />
                       <Skeleton className="h-4 w-full" />
@@ -217,9 +254,17 @@ export function ContentFeed({ className }: { className?: string }) {
                 <p className="text-sm text-muted-foreground text-center py-4">Nenhum post publicado ainda.</p>
               ) : (
                 <div className="space-y-4">
-                  {postsWithRoleConfig?.map((post) => (
-                    <PostItem key={post.id} post={post} />
-                  ))}
+                  {postsWithRoleConfig
+                    ?.slice(0, enablePagination ? visiblePostsCount : postsWithRoleConfig.length)
+                    .map((post) => (
+                      <PostItem key={post.id} post={post} />
+                    ))}
+                  {/* Elemento de referência para carregar mais posts */}
+                  {enablePagination && visiblePostsCount < (postsWithRoleConfig?.length || 0) && (
+                    <div ref={loadMoreRef} className="flex justify-center py-4">
+                      <div className="text-sm text-muted-foreground">Carregando mais posts...</div>
+                    </div>
+                  )}
                 </div>
               )}
             </TabsContent>

src/components/dashboard/birthdays-carousel.tsx

@@ -58,7 +58,7 @@ export function BirthdaysCarousel({ itens, className }: BirthdayCarouselProps) {
       >
         <CarouselContent>
           {itens.map((item, index) => (
-            <CarouselItem key={index} className="aspect-square md:h-96">
+            <CarouselItem key={index} className="w-full h-96">
               <div className="relative w-full h-full">
                 <OptimizedImage
                   alt={item.title}

src/components/dashboard/main-carousel.tsx

@@ -56,7 +56,7 @@ export function MainCarousel({ itens, className }: MainCarouselProps) {
       >
         <CarouselContent>
           {itens.map((item, index) => (
-            <CarouselItem key={index} className="w-full md:h-96 aspect-video">
+            <CarouselItem key={index} className="w-full h-96">
               <div className="relative w-full h-full">
                 <OptimizedImage
                   alt={item.title}

src/components/ui/image-carousel.tsx

@@ -113,9 +113,9 @@ export function ImageCarousel({
           {validImages.map((image, index) => (
             <CarouselItem key={index} className={cn(
               "w-full",
-              aspectRatio === "square" && "aspect-square",
-              aspectRatio === "video" && "aspect-video",
-              aspectRatio === "auto" && "aspect-auto"
+              aspectRatio === "square" && "h-96",
+              aspectRatio === "video" && "h-56",
+              aspectRatio === "auto" && "h-64"
             )}>
               <OptimizedImage
                 src={image}

src/components/ui/optimized-image.tsx

@@ -1,6 +1,8 @@
 "use client"
 
 import Image from "next/image"
+import { useState } from "react"
+import { cn } from "@/lib/utils"
 
 interface OptimizedImageProps {
   src: string
@@ -10,6 +12,7 @@ interface OptimizedImageProps {
   className?: string
   priority?: boolean
   fill?: boolean
+  blurIntensity?: number
 }
 
 export function OptimizedImage({
@@ -19,19 +22,49 @@ export function OptimizedImage({
   height,
   className,
   priority = false,
-  fill = false
+  fill = false,
+  blurIntensity = 8
 }: OptimizedImageProps) {
+  const [isLoaded, setIsLoaded] = useState(false)
+
   return (
-    <Image
-      src={src}
-      alt={alt}
-      fill={fill}
-      width={!fill ? width : undefined}
-      height={!fill ? height : undefined}
-      className={className}
-      priority={priority}
-      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-    />
+    <div className="relative overflow-hidden w-full h-full">
+      {/* Imagem de fundo borrada - sempre preenche todo o espaço */}
+      <Image
+        src={src}
+        alt=""
+        fill={fill}
+        width={!fill ? width : undefined}
+        height={!fill ? height : undefined}
+        className={cn(
+          "absolute inset-0 scale-110",
+          `blur-[${blurIntensity}px]`,
+          "object-cover",
+          "transition-opacity duration-500",
+          isLoaded ? "opacity-100" : "opacity-0"
+        )}
+        priority={priority}
+        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+      />
+
+      {/* Imagem principal */}
+      <Image
+        src={src}
+        alt={alt}
+        fill={fill}
+        width={!fill ? width : undefined}
+        height={!fill ? height : undefined}
+        className={cn(
+          "relative z-10",
+          className, // Aplicar classes personalizadas à imagem principal
+          "transition-opacity duration-300",
+          isLoaded ? "opacity-100" : "opacity-0"
+        )}
+        priority={priority}
+        onLoad={() => setIsLoaded(true)}
+        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+      />
+    </div>
   )
 }