correcting layout

Signed-off-by: Aditya-eddy <[email protected]>
keploy · Apr 10, 2024 · 6a96401 · 6a96401
1 parent 0770775
commit 6a96401
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 79 deletions.
diff --git a/app/(default)/webstories/css/styles.css b/app/(default)/webstories/css/styles.css
@@ -1,3 +1,8 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+
+/* Additional styles */
+
 @keyframes growAnimation {
   from {
     max-height: 50;

diff --git a/app/(default)/webstories/data.ts b/app/(default)/webstories/data.ts
@@ -1,36 +1,36 @@
 import BunnyImage from "@/public/images/community-bunny.png";
-export const dummyData = [
+
+export const DummyData = [
   {
-    imageUrl:
-      "https://i.pinimg.com/originals/df/6d/9b/df6d9b173e3e4b0521d5134548f3e4a5.jpg",
-    text: "Story 1",
-    swipeText: "Swipe to read more",
-    swipeLink: "https://example.com/story1",
     CardImage: BunnyImage,
     CardDescription: "This is Story 1 text",
     Slug: "webstory-1",
+    Story: [
+      {
+        imageUrl:
+          "https://i.pinimg.com/originals/df/6d/9b/df6d9b173e3e4b0521d5134548f3e4a5.jpg",
+        Heading: "Story 1",
+        text:"this is text-1",
+        swipeText: "Swipe to read more",
+        swipeLink: "https://example.com/story1",
+      },
+    ],
   },
   {
-    imageUrl: "https://example.com/image2.jpg",
-    text: "Story 2",
-    swipeText: "Swipe to read more",
-    swipeLink: "https://example.com/story2",
-    CardImage: BunnyImage,
-    CardDescription: "This is Story 2 text",
-    Slug: "webstory-2",
-  },
-  {
-    imageUrl: "https://example.com/image3.jpg",
-    text: "Story 3",
-    swipeText: "Swipe to read more",
-    swipeLink: "https://example.com/story3",
     CardImage: BunnyImage,
-    CardDescription: "This is Story 3 text",
-    Slug: "webstory-3",
+    CardDescription: "This is Story 1 text",
+    Slug: "webstory-1",
+    Story: [
+      {
+        imageUrl:
+          "https://i.pinimg.com/originals/df/6d/9b/df6d9b173e3e4b0521d5134548f3e4a5.jpg",
+        Heading: "Story 1",
+        text:"this is text-1",
+        swipeText: "Swipe to read more",
+        swipeLink: "https://example.com/story1",
+      },
+    ],
   },
-];
-
-export const DummyData = [
   {
     CardImage: BunnyImage,
     CardDescription: "This is Story 1 text",
@@ -39,7 +39,8 @@ export const DummyData = [
       {
         imageUrl:
           "https://i.pinimg.com/originals/df/6d/9b/df6d9b173e3e4b0521d5134548f3e4a5.jpg",
-        text: "Story 1",
+        Heading: "Story 1",
+        text:"this is text-1",
         swipeText: "Swipe to read more",
         swipeLink: "https://example.com/story1",
       },
@@ -52,10 +53,25 @@ export const DummyData = [
     Story: [
       {
         imageUrl: "https://example.com/image3.jpg",
-        text: "Story 3",
+        Heading: "Story 2",
+        text:"this is text-2",
         swipeText: "Swipe to read more",
         swipeLink: "https://example.com/story3",
       },
+      {
+        imageUrl: "https://example.com/image3.jpg",
+        Heading: "Story 2",
+        text:"this is text-2",
+        swipeText: "Swipe to read more",
+        swipeLink: "https://example.com/story3",
+      },
+      {
+        imageUrl: "https://example.com/image3.jpg",
+        Heading: "Story 2",
+        text:"this is text-2",
+        swipeText: "Swipe to read more",
+        swipeLink: "https://example.com/story3",
+      }
     ],
   },
   {
@@ -65,7 +81,8 @@ export const DummyData = [
     Story: [
       {
         imageUrl: "https://example.com/image3.jpg",
-        text: "Story 3",
+        Heading: "Story 3",
+        text:"this is text-3",
         swipeText: "Swipe to read more",
         swipeLink: "https://example.com/story3",
       },

diff --git a/app/(default)/webstories/layout.tsx b/app/(default)/webstories/layout.tsx
@@ -8,12 +8,7 @@ const inter = Inter({
   display: 'swap'
 })
 
-const architects_daughter = Architects_Daughter({
-  subsets: ['latin'],
-  variable: '--font-architects-daughter',
-  weight: '400',
-  display: 'swap'
-})
+
 
 export const metadata = {
   title: 'Create Next App',
@@ -28,8 +23,8 @@ export default function RootLayout({
   return (
       <html lang="en">
       <title>WebStories</title>
-      <body>
-      <div className="flex flex-col min-h-screen overflow-hidden">
+      <body className={`${inter.variable} font-inter antialiased bg-white text-gray-900 tracking-tight`}>
+      <div className={`flex flex-col min-h-screen overflow-hidden  bg-neutral-100`}>
         <Header/>
         {children}
       </div>

diff --git a/app/(default)/webstories/page.tsx b/app/(default)/webstories/page.tsx
@@ -4,7 +4,6 @@ import StoriesCards from "@/components/webstories/StoriesCards";
 import { DummyData } from "./data"; // Import DummyData from data file
 
 const page = () => {
-  // Map DummyData to extract the required properties
   const Data = DummyData.map((item) => ({
     CardImage: item.CardImage,
     CardDescription: item.CardDescription,

diff --git a/components/webstories/Stories.tsx b/components/webstories/Stories.tsx
@@ -4,6 +4,7 @@ import { faLink, faArrowUp } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 type StoriesProps = {
   imageUrl: string;
+  Heading:string;
   text: string;
   swipeText?: string;
   swipeLink?: string;
@@ -39,14 +40,11 @@ const Stories = ({
             />
           ))}
         </div>
-        <div className={`absolute  bottom-0 animate-grow `}>
+        <div className={`absolute w-full bottom-0 animate-grow `}>
           <div className="bg-orange-500 opacity-70 p-8 rounded-xl">
-            <h1 className="text-2xl text-slate-50">{Story.text}</h1>
+            <h1 className="text-2xl text-slate-50">{Story.Heading}</h1>
             <p className="text-slate-50">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
-              inventore eum praesentium quos aspernatur! Sunt itaque praesentium
-              mollitia culpa nisi eum accusantium qui sequi a veniam. Nostrum
-              itaque ullam nobis!
+            {Story.text}
             </p>
           </div>
           {Story.swipeLink && Story.swipeText && (

diff --git a/components/webstories/StoriesCards.tsx b/components/webstories/StoriesCards.tsx
@@ -4,7 +4,7 @@ import { StaticImageData } from "next/image";
 type StoriesCardProps = {
   CardImage: string | StaticImageData;
   CardDescription: string;
-  Slug:string;
+  Slug: string;
 };
 
 type StoriesCardsProps = {
@@ -14,8 +14,13 @@ type StoriesCardsProps = {
 const StoriesCards = ({ data }: StoriesCardsProps) => {
   return (
     <>
-      <h1 className="text-2xl text-center mt-5 mb-5">Web-Stories</h1>
-      <div className="grid grid-cols-1 xl:grid-cols-3 lg:grid-cols-2 md:gap-x-8 lg:gap-x-8 gap-y-16 md:gap-y-16 mb-16">
+      <h1 className="lg:text-5xl text-4xl text-secondary-300 font-extrabold leading-tighter tracking-tighter my-4  text-center ">Keploy Web-Stories</h1>
+      <p className="text-center text-gray-500">
+        Discover what's going on in and around Keploy. Learn about Keploy and
+        everything related to testing. Tap right to read visual stories.
+      </p>
+      <hr className="my-10 border-t border-gray-300"/>
+      <div className="grid grid-cols-1 xl:grid-cols-4 md:grid-cols-2 lg:grid-cols-3 md:gap-x-8 lg:gap-x-8 gap-y-16 md:gap-y-16 mb-16 mt-5">
         {data.map((card, index) => {
           return (
             <div key={index}>

diff --git a/components/webstories/StoryCard.tsx b/components/webstories/StoryCard.tsx
@@ -5,24 +5,24 @@ import { StaticImageData } from "next/image";
 type StoryCardProps = {
   imagesrc: string | StaticImageData;
   CardDescription: string;
-  slug:string;
+  slug: string;
 };
 
-const StoryCard = ({ imagesrc, CardDescription , slug }: StoryCardProps) => {
+const StoryCard = ({ imagesrc, CardDescription, slug }: StoryCardProps) => {
   return (
-    <div className="flex flex-col items-center justify-center border border-slate-200 bg-gray-100 rounded-md mx-auto w-11/12 hover:scale-101 duration-150">
-        <Link href={`/webstories/${slug}`}>
-      <Image
-        src={imagesrc}
-        alt={CardDescription}
-        width="0"
-        height="0"
-        sizes="100vw"
+    <div className="flex flex-col items-center justify-center border border-gray-300 bg-gray-100 rounded-md mx-auto  hover:scale-101 duration-150">
+      <Link href={`/webstories/${slug}`}>
+        <Image
+          src={imagesrc}
+          alt={CardDescription}
+          width="0"
+          height="0"
+          sizes="100vw"
         />
-      <div className="p-3 border border-slate-200">
-        <p>{CardDescription}</p>
-      </div>
-        </Link>
+        <div className="p-3 border border-slate-200">
+          <p>{CardDescription}</p>
+        </div>
+      </Link>
     </div>
   );
 };

diff --git a/components/webstories/Webstories.tsx b/components/webstories/Webstories.tsx
@@ -1,9 +1,9 @@
-"use client";
 import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faChevronLeft,
   faChevronRight,
+  faRedoAlt,
 } from "@fortawesome/free-solid-svg-icons";
 import Stories from "./Stories";
 
@@ -47,11 +47,16 @@ const WebStories = ({ data }: WebStoriesProps) => {
     );
   };
 
+  const handleReplay = () => {
+    setCurrentStoryIndex(0);
+    setStack([0]);
+  };
+
   const currentStory = data[currentStoryIndex];
 
   return (
     <div>
-      <div className="flex flex-row h-screen mt-5  gap-10 justify-center backdrop-blur overflow-hidden ">
+      <div className="flex flex-row h-screen mt-5 gap-10 justify-center backdrop-blur overflow-hidden ">
         <button
           onClick={handlePrev}
           className={`bg-gradient-300 text-gradient-200 w-10 h-10 rounded-full border border-solid my-auto ${
@@ -60,28 +65,36 @@ const WebStories = ({ data }: WebStoriesProps) => {
               : ""
           }`}
           disabled={currentStoryIndex === 0}
-
         >
           <FontAwesomeIcon icon={faChevronLeft} />
         </button>
-        <div key={currentStoryIndex} className="basis-4/5 md:basis-7/12 lg:basis-4/12 xl:basis-3/12 self-center h-5/6">
-          <Stories
-            Story={currentStory}
-            totalLen={data.length}
-            Stack={stack}
-          />
-        </div>
-        <button
-          onClick={handleNext}
-          className={`bg-gradient-300 text-gradient-200 w-10 h-10 rounded-full border border-solid my-auto ${
-            currentStoryIndex === data.length-1
-              ? "disabled:bg-orange-600 disabled:text-orange-200 cursor-not-allowed"
-              : ""
-          }`}
-          disabled={currentStoryIndex===data.length-1}
+        <div
+          key={currentStoryIndex}
+          className="basis-4/5 md:basis-7/12 lg:basis-4/12 xl:basis-3/12 self-center h-5/6"
         >
-          <FontAwesomeIcon icon={faChevronRight} />
-        </button>
+          <Stories Story={currentStory} totalLen={data.length} Stack={stack} />
+        </div>
+
+        {currentStoryIndex === data.length - 1 ? (
+          <button
+            onClick={handleReplay}
+            className="bg-gradient-300 text-gradient-200 w-10 h-10 rounded-full border border-solid my-auto"
+          >
+            <FontAwesomeIcon icon={faRedoAlt} />
+          </button>
+        ) : (
+          <button
+            onClick={handleNext}
+            className={`bg-gradient-300 text-gradient-200 w-10 h-10 rounded-full border border-solid my-auto ${
+              currentStoryIndex === data.length - 1
+                ? "disabled:bg-orange-600 disabled:text-orange-200 cursor-not-allowed"
+                : ""
+            }`}
+            disabled={currentStoryIndex === data.length - 1}
+          >
+            <FontAwesomeIcon icon={faChevronRight} />
+          </button>
+        )}
       </div>
     </div>
   );