WIP homepage module

storybookjs · May 16, 2024 · f4e3270 · f4e3270
1 parent 079f71b
commit f4e3270
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 56 deletions.
diff --git a/apps/frontpage/components/home/hero/index.tsx b/apps/frontpage/components/home/hero/index.tsx
@@ -64,30 +64,30 @@ export function Hero({
   contributorCount: string;
 }) {
   const [slide, setSlide] = useState(1);
-  const intervalId = useRef<number | null>(null);
+  // const intervalId = useRef<number | null>(null);
 
-  const setSlideInterval = () => {
-    if (intervalId.current !== null) {
-      window.clearInterval(intervalId.current);
-    }
+  // const setSlideInterval = () => {
+  //   if (intervalId.current !== null) {
+  //     window.clearInterval(intervalId.current);
+  //   }
 
-    intervalId.current = window.setInterval(() => {
-      setSlide((s) => (s === 4 ? 1 : s + 1));
-    }, 3000);
-  };
+  //   intervalId.current = window.setInterval(() => {
+  //     setSlide((s) => (s === 4 ? 1 : s + 1));
+  //   }, 3000);
+  // };
 
-  useEffect(() => {
-    setSlideInterval();
-    return () => {
-      if (intervalId.current) {
-        clearInterval(intervalId.current);
-      }
-    };
-  }, []);
+  // useEffect(() => {
+  //   setSlideInterval();
+  //   return () => {
+  //     if (intervalId.current) {
+  //       clearInterval(intervalId.current);
+  //     }
+  //   };
+  // }, []);
 
   const handleSlideChange = (newSlide: number) => {
     setSlide(newSlide);
-    setSlideInterval();
+    // setSlideInterval();
   };
 
   return (

diff --git a/apps/frontpage/components/home/hero/manager/canvas.tsx b/apps/frontpage/components/home/hero/manager/canvas.tsx
@@ -9,9 +9,8 @@ export const Canvas: FC<{ slide: number }> = ({ slide }) => {
     <motion.div
       animate={{ opacity: 1 }}
       className={cn(
-        'absolute w-full top-10 h-[calc(60%-40px)] flex items-center justify-center text-black bg-white transition-all px-4',
-        slide === 4 &&
-          'h-[calc(50%-40px)] sm:h-[calc(60%-40px)] lg:w-[calc(100%-400px)] lg:h-[calc(100%-40px)]',
+        'absolute w-full top-10 h-[calc(60%-40px)] flex items-center justify-center text-black bg-white transition-all px-4 sm:h-[calc(60%-40px)] lg:w-[calc(100%-400px)] lg:h-[calc(100%-40px)]',
+        slide === 4 && 'h-[calc(50%-40px)]',
       )}
       exit={{ opacity: 0 }}
       initial={{ opacity: 0 }}

diff --git a/apps/frontpage/components/home/hero/manager/panel-controls.tsx b/apps/frontpage/components/home/hero/manager/panel-controls.tsx
@@ -1,30 +1,82 @@
 import type { FC } from 'react';
 import { motion } from 'framer-motion';
 import { UndoIcon } from '@storybook/icons';
-import { Controls } from './controls';
+import { cn } from '@repo/utils';
 import { Tabs } from './tabs';
 
+const content = [
+  {
+    label: 'label',
+    description: 'Label of component',
+    default: 'Choose time frame',
+    control: 'Usage frequency',
+  },
+  {
+    label: 'startTime',
+    description: 'Start time in 24h notation',
+    default: 'undefined',
+    control: 'Edit string',
+    muted: true,
+  },
+  {
+    label: 'endTime',
+    description: 'End time in 24h notation',
+    default: 'undefined',
+    control: 'Edit string',
+    muted: true,
+  },
+];
+
 export const PanelControls: FC = () => {
   return (
     <motion.div
       animate={{ y: 0, opacity: 1 }}
-      className="absolute bottom-0 left-0 w-full h-[215px] sm:h-[40%] border-t border-t-[#D9E0E6] text-black"
+      className="absolute bottom-0 left-0 w-full h-[50%] sm:h-[40%] lg:bottom-auto lg:left-auto lg:top-0 lg:right-0 lg:h-full lg:w-[400px] border-t border-t-[#D9E0E6] lg:border-t-0 lg:border-l lg:border-l-[#D9E0E6] flex flex-col text-black"
       exit={{ y: 40, opacity: 0 }}
       initial={{ y: 40, opacity: 0 }}
     >
       <Tabs active={0} />
       <div className="flex h-10 items-center border-b border-b-[#D9E0E6]">
-        <div className="text-[13px] w-1/2 md:w-[28%] lg:w-[22%] pl-4">Name</div>
-        <div className="text-[13px] w-[38%] lg:w-[28%] hidden md:block">
-          Description
+        <div className="text-[13px] w-1/2 md:w-24 flex-shrink-0 pl-4">Name</div>
+        <div className="text-[13px] w-[25%] md:w-full hidden lg:block">
+          Default
         </div>
-        <div className="text-[13px] w-[25%] hidden lg:block">Default</div>
-        <div className="text-[13px] w-1/2 md:w-1/3 lg:w-[25%] flex justify-between items-center pr-4 ">
+        <div className="text-[13px] w-1/2 md:w-full flex justify-between items-center pr-4 ">
           <div>Controls</div>
           <UndoIcon className="text-[#73828C]" />
         </div>
       </div>
-      <Controls isPanel />
+      <div>
+        <div
+          className={cn(
+            'bg-[#F7F9FC] h-10 items-center px-4 text-[11px] tracking-widest uppercase font-bold text-[#2E3438] border-b border-b-[#D9E0E6] hidden sm:flex',
+          )}
+        >
+          Props
+        </div>
+        {content.map((item) => (
+          <div className="flex border-b border-b-[#D9E0E6]" key={item.label}>
+            <div className="text-[13px] w-1/2 md:w-24 pl-4 py-2 flex-shrink-0">
+              {item.label}
+            </div>
+            <div className="text-[13px] w-[25%] md:w-full hidden lg:flex py-2">
+              <div className="bg-[#F6F9FC] border border-[#D9E0E6] h-5 px-1.5 rounded flex items-center">
+                {item.default}
+              </div>
+            </div>
+            <div className="text-[13px] w-1/2 md:w-full flex py-2 pr-4">
+              <div
+                className={cn(
+                  'border border-[#D9E0E6] rounded w-full h-7 flex items-center px-2',
+                  item.muted && 'text-[#73828C]',
+                )}
+              >
+                {item.control}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
     </motion.div>
   );
 };
diff --git a/apps/frontpage/components/home/hero/manager/sidebar.tsx b/apps/frontpage/components/home/hero/manager/sidebar.tsx
@@ -27,8 +27,8 @@ export const Sidebar: FC<{ slide: number }> = ({ slide }) => {
         Find components
       </div>
       <SidebarLine ic="docs" label="Introduction" />
-      <SidebarLine ic="docs" label="Install and configure" />
-      <SidebarLine ic="docs" label="Changelog" />
+      {/* <SidebarLine ic="docs" label="Install and configure" />
+      <SidebarLine ic="docs" label="Changelog" /> */}
       <div className="text-[#73828C] text-[11px] uppercase font-bold tracking-wider pt-5 pb-2 flex items-center px-2 justify-between">
         <div className="flex gap-1">
           <ChevronSmallRightIcon className="text-[#73828C] group-hover:text-white" />

diff --git a/apps/frontpage/components/home/hero/manager/tabs.tsx b/apps/frontpage/components/home/hero/manager/tabs.tsx
@@ -10,14 +10,7 @@ export const Tabs: FC<{ active?: number; slide?: number }> = ({
   active = 0,
   slide,
 }) => {
-  let tabs = [
-    'Controls',
-    'Interactions',
-    'Visual tests',
-    'Accessibility',
-    'Design',
-  ];
-
+  let tabs = ['Controls', 'Interactions'];
   if (slide === 4) tabs = ['Controls', 'Visual tests'];
 
   return (

diff --git a/apps/frontpage/components/home/hero/manager/toolbar.tsx b/apps/frontpage/components/home/hero/manager/toolbar.tsx
@@ -18,8 +18,7 @@ export const Toolbar: FC<{ slide: number }> = ({ slide }) => {
     <motion.div
       animate={{ y: 0 }}
       className={cn(
-        'absolute top-0 left-0 h-10 border-b border-b-[#D9E0E6] flex items-center px-2 justify-between right-0 overflow-hidden',
-        slide === 4 && 'lg:right-[400px]',
+        'absolute top-0 left-0 h-10 border-b border-b-[#D9E0E6] flex items-center px-2 justify-between right-0 overflow-hidden lg:right-[400px]',
       )}
       exit={{ y: -40 }}
       initial={{ y: -40 }}

diff --git a/apps/frontpage/components/home/hero/social-proof.tsx b/apps/frontpage/components/home/hero/social-proof.tsx
@@ -1,56 +1,56 @@
-import Image from "next/image";
-import logoEu from "./logos/logo-eu.svg";
-import logoGithub from "./logos/logo-github.svg";
-import logoAirbnb from "./logos/logo-airbnb.svg";
-import logoVSCode from "./logos/logo-vscode.svg";
-import logoMozilla from "./logos/logo-mozilla.svg";
-import logoMonday from "./logos/logo-monday.svg";
-import logoBBC from "./logos/logo-bbc.svg";
+import Image from 'next/image';
+import logoEu from './logos/logo-eu.svg';
+import logoGithub from './logos/logo-github.svg';
+import logoAirbnb from './logos/logo-airbnb.svg';
+import logoVSCode from './logos/logo-vscode.svg';
+import logoMozilla from './logos/logo-mozilla.svg';
+import logoMonday from './logos/logo-monday.svg';
+import logoBBC from './logos/logo-bbc.svg';
 
 export default function SocialProof() {
   return (
     <div className="relative border-b border-b-white/20 z-10 m-auto px-8 md:px-16 py-12 sm:py-16 md:py-20 mb-12 md:mb-20">
       <div className="flex w-full justify-evenly items-center gap-8 sm:gap-8 md:gap-12 lg:gap-16 text-zinc-600">
         <div className="flex-initial flex-shrink-0 hidden sm:flex items-center justify-center h-10">
           <Image
-            src={logoVSCode}
             alt="VSCode"
             className="w-full h-full opacity-50"
+            src={logoVSCode}
           />
         </div>
         <div className="flex-initial flex-shrink-0 hidden sm:flex items-center justify-center h-8">
-          <Image src={logoEu} alt="EU" className="w-full h-full opacity-50" />
+          <Image alt="EU" className="w-full h-full opacity-50" src={logoEu} />
         </div>
         <div className="flex-grow-1 flex-shrink-0 flex items-center justify-center h-5 sm:h-6">
           <Image
-            src={logoGithub}
             alt="Github"
             className="w-full h-full opacity-50"
+            src={logoGithub}
           />
         </div>
         <div className="flex-grow-1 flex-shrink-0 flex items-center justify-center h-6 sm:h-8">
           <Image
-            src={logoAirbnb}
             alt="Airbnb"
             className="w-full h-full opacity-50"
+            src={logoAirbnb}
           />
         </div>
         <div className="flex-grow-1 flex-shrink-0 flex items-center justify-center h-6 sm:h-7">
           <Image
-            src={logoMozilla}
             alt="Mozilla"
             className="w-full h-full opacity-50"
+            src={logoMozilla}
           />
         </div>
         <div className="flex-grow-1 flex-shrink-0 hidden lg:flex items-center justify-center h-7">
           <Image
-            src={logoMonday}
             alt="Monday.com"
             className="w-full h-full opacity-50"
+            src={logoMonday}
           />
         </div>
         <div className="flex-grow-1 flex-shrink-0 hidden items-center justify-center h-6 xl:flex">
-          <Image src={logoBBC} alt="BBC" className="w-full h-full opacity-50" />
+          <Image alt="BBC" className="w-full h-full opacity-50" src={logoBBC} />
         </div>
       </div>
     </div>