chore: adding the new changes for the web-stories. (Phase II) (#66)

* adding changes pt1 Signed-off-by: Aditya-eddy <[email protected]> * adding changes Signed-off-by: Aditya-eddy <[email protected]> * final_version Signed-off-by: Aditya-eddy <[email protected]> * adding final webstories changes Signed-off-by: Aditya-eddy <[email protected]> * chore: add bg color and margin to hero Signed-off-by: Neha Gupta <[email protected]> * addding hovering scaling Signed-off-by: Aditya-eddy <[email protected]> * adding rest changes Signed-off-by: Aditya-eddy <[email protected]> * Adding required changes Signed-off-by: Aditya-eddy <[email protected]> * Adding requested changes Signed-off-by: Aditya-eddy <[email protected]> * Adding the changes Signed-off-by: Aditya-eddy <[email protected]> * adding the hidden class in /slug in webstories Signed-off-by: Aditya-eddy <[email protected]> --------- Signed-off-by: Aditya-eddy <[email protected]> Signed-off-by: Neha Gupta <[email protected]> Co-authored-by: Neha Gupta <[email protected]>
keploy · Sep 3, 2024 · 234f3dd · 234f3dd
1 parent 470426f
commit 234f3dd
Show file tree

Hide file tree

Showing 20 changed files with 402 additions and 227 deletions.
diff --git a/app/(default)/webstories/[slug]/page.tsx b/app/(default)/webstories/[slug]/page.tsx
@@ -1,123 +1,78 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import WebStories from "@/components/webstories/Webstories";
 import { DataFiles } from "../../../../components/utils/data";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import Image from "next/image";
 import CloseIcon from "@/components/webstories/components/CloseIcon";
-
-interface PreloadedImage {
-  url: string;
-  img: HTMLImageElement;
-}
+import RootLayout from "@/app/layout";
+import AOS from "aos";
+import { useEffect , useState } from "react";
+import "aos/dist/aos.css";
 
 const Index: React.FC = () => {
   const { slug } = useParams<{ slug: string }>();
-  const [windowWidth, setWindowWidth] = useState<number>(0);
-  const [isPreloading, setIsPreloading] = useState<boolean>(true);
-  const [preloadedImages, setPreloadedImages] = useState<PreloadedImage[]>([]);
+  const router = useRouter();
   const [currentStoryIndex, setCurrentStoryIndex] = useState(0);
   const storyData = DataFiles.find((item) => item.Slug === slug)?.Story;
 
   if (!storyData) {
     return <div className="m-auto">Story not found!</div>;
   }
 
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      setWindowWidth(window.innerWidth);
-      const handleResize = () => setWindowWidth(window.innerWidth);
-      window.addEventListener("resize", handleResize);
-      return () => window.removeEventListener("resize", handleResize);
-    }
-  }, []);
-
-  const preloadImages = async (images: string[]) => {
-    const loadedImages = await Promise.all(
-      images.map(
-        (url) =>
-          new Promise<PreloadedImage>((resolve) => {
-            const img = new (window as any).Image();
-            img.src = url;
-            img.onload = () => resolve({ url, img });
-          })
-      )
-    );
-    setPreloadedImages(loadedImages);
-    setIsPreloading(false);
-  };
-
-  const loadCurrentAndNextImage = (index: number) => {
-    if (storyData) {
-      const imageUrls = [
-        storyData[index]?.imageUrl,
-        storyData[index + 1]?.imageUrl,
-      ].filter(Boolean) as string[];
-      preloadImages(imageUrls);
-    }
+  const metadata = {
+    title: storyData[0]?.Heading || "Webstory",
+    description: storyData[0]?.text || "A webstory",
+    keywords: "webstories, stories, entertainment, reading",
   };
 
   useEffect(() => {
-    loadCurrentAndNextImage(currentStoryIndex);
-  }, [currentStoryIndex, storyData]);
+    AOS.init({ duration: 800 });
+  }, []);
 
   const handleClose = () => {
-    window.close();
+    router.push("/webstories");
   };
 
   const handleStoryIndexChange = (index: number) => {
     setCurrentStoryIndex(index);
   };
 
-  if (isPreloading) {
-    return (
-      <div className="fixed w-full h-full top-0 z-50 flex items-center justify-center">
-        <div className="loaderLoading"></div>
-      </div>
-    );
-  }
-
-  const getImageElement = (url: string) => {
-    const preloadedImage = preloadedImages.find((img) => img.url === url);
-    return preloadedImage ? preloadedImage.img : null;
-  };
-
-  const nextImageIndex = currentStoryIndex + 1;
-
   return (
-    <div className="fixed w-full h-full top-0 z-50 flex items-center justify-center">
-      <div className="absolute w-full h-full top-0 opacity-90 bg-black">
-        <Image
-          src={storyData[0].imageUrl}
-          alt="image"
-          layout="fill"
-          objectFit="cover"
-          className="relative z-10 h-full object-cover w-full blur-2xl opacity-60 md:rounded-xl lg:rounded-xl xl:rounded-xl"
-        />
-      </div>
-      <div className="relative flex flex-col w-full h-full justify-center">
-        {windowWidth > 1024 && (
+    <RootLayout metadata={metadata} HeaderDisplayed={false}>
+      <div className="fixed w-full h-full top-0 z-50 flex items-center justify-center" data-aos="fade-up">
+        <div className="absolute w-full h-full top-0 opacity-95 bg-black">
+          <Image
+            src={
+              typeof storyData[0].imageUrl === "string"
+                ? storyData[0].imageUrl
+                : storyData[0].imageUrl.src
+            }
+            alt="image"
+            layout="fill"
+            objectFit="cover"
+            className="relative z-10 h-full object-cover w-full blur-2xl opacity-60 md:rounded-xl lg:rounded-xl xl:rounded-xl"
+          />
+        </div>
+        <div className="relative flex flex-col w-full h-full justify-center">
           <button
             onClick={handleClose}
-            className="text-slate-200 border border-solid font-medium bg-secondary-300 p-3 rounded-full shadow-lg absolute top-4 right-4"
+            className="hidden lg:block text-slate-200 border border-solid font-medium bg-secondary-300 p-3 rounded-full shadow-lg absolute top-4 right-4"
           >
-            <CloseIcon  />
+            <CloseIcon />
           </button>
-        )}
-        {storyData ? (
-          <WebStories
-            data={storyData.map((story) => ({
-              ...story,
-              imageElement: getImageElement(story.imageUrl),
-            }))}
-            slug={slug}
-            onStoryIndexChange={handleStoryIndexChange}
-          />
-        ) : (
-          <div>Content Not Available</div>
-        )}
+          {storyData ? (
+            <WebStories
+              data={storyData}
+              slug={slug}
+              onStoryIndexChange={handleStoryIndexChange}
+            />
+          ) : (
+            <div>Content Not Available</div>
+          )}
+        </div>
       </div>
-    </div>
+    </RootLayout>
   );
 };
 

diff --git a/app/(default)/webstories/css/styles.css b/app/(default)/webstories/css/styles.css
@@ -90,3 +90,13 @@
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
+
+
+.input_search {
+  outline: none;
+}
+
+.input_search:focus {
+  outline: none;
+  box-shadow: none;
+}
diff --git a/app/(default)/webstories/layout.tsx b/app/(default)/webstories/layout.tsx
@@ -1,4 +1,4 @@
-import "./css/styles.css";
+"use client";
 
 import { Inter } from "next/font/google";
 const inter = Inter({
@@ -14,7 +14,7 @@ export default function RootLayout({children}: {
       <body
         className={` ${inter.className} font-inter antialiased bg-white text-gray-900 tracking-tight`}
       >
-        <div className={`flex flex-col min-h-screen  `}>
+        <div className={`flex flex-col  overflow-hidden  `}>
           {children}
         </div>
       </body>

diff --git a/app/(default)/webstories/page.tsx b/app/(default)/webstories/page.tsx
@@ -1,20 +1,31 @@
-import React from "react";
+"use client";
+import React, { useState } from "react";
 import StoriesCards from "@/components/webstories/StoriesCards";
-import { DataFiles } from "../../../components/utils/data"; // Import Data from data file
-import Header from "@/components/ui/header";
-const page = () => {
-  const Data = DataFiles.map((item) => ({
-    CardImage: item.CardImage,
-    CardDescription: item.CardDescription,
-    Slug: item.Slug,
-    Category: item.Categories,
-  }));
+import { DataFiles } from "@/components/utils/data";
+import Header from "@/components/webstories/components/Header";
+import RootLayout from "@/app/layout";
+
+const Data = DataFiles.map((item) => ({
+  CardImage: item.CardImage,
+  CardDescription: item.CardDescription,
+  Slug: item.Slug,
+  Category: item.Categories,
+}));
+
+const Page = () => {
+  const metadata = {
+    title: "WebStories - Explore and Enjoy",
+    description: "Discover amazing stories with our WebStories collection.",
+    keywords: "webstories, stories, entertainment, reading",
+  };
+
   return (
-    <>
-      <Header />
-      <StoriesCards data={Data.reverse()} />
-    </>
+    <RootLayout metadata={metadata}>
+      <div className="flex flex-row justify-end my-2 mt-10 border bg-neutral-100 min-h-screen overflow-hidden">
+        <StoriesCards data={Data.reverse()} />
+      </div>
+    </RootLayout>
   );
 };
 
-export default page;
+export default Page;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,5 @@
 import './css/style.css';
+import '@/app/(default)/webstories/css/styles.css'
 import { Inter } from 'next/font/google';
 import Header from '@/components/ui/header';
 import React, { ReactNode } from 'react';
@@ -24,11 +25,12 @@ export const defaultMetadata: Metadata = {
 };
 
 interface RootLayoutProps {
-    children: ReactNode;
-    metadata?: Metadata;
+  children: ReactNode;
+  metadata?: Metadata;
+  HeaderDisplayed?:boolean;
 }
 
-export default function RootLayout({ children, metadata }: RootLayoutProps) {
+export default function RootLayout({ children, metadata , HeaderDisplayed=true }: RootLayoutProps) {
   const finalMetadata = {
     title: metadata?.title || defaultMetadata.title,
     keywords: metadata?.keywords || defaultMetadata.keywords,
@@ -161,8 +163,8 @@ export default function RootLayout({ children, metadata }: RootLayoutProps) {
         </head>
         <body className={`${inter.variable} font-inter antialiased bg-white text-gray-900 tracking-tight`}>
         <div className="flex flex-col overflow-hidden supports-[overflow:clip]:overflow-clip">
-            <Header />
-            {children}
+         {HeaderDisplayed &&  <Header />}
+          {children}
         </div>
         </body>
         </html>