feat(website): add colorPage

salute-developers · Jul 9, 2024 · 7cf7d86 · 7cf7d86
1 parent d7988ca
commit 7cf7d86
Show file tree

Hide file tree

Showing 14 changed files with 314 additions and 297 deletions.
diff --git a/website/plasma-website/components/colors/Pallete.tsx b/website/plasma-website/components/colors/Pallete.tsx
diff --git a/...site/components/colors/GradientScroll.tsx → ...ite/components/palette/GradientScroll.tsx b/...site/components/colors/GradientScroll.tsx → ...ite/components/palette/GradientScroll.tsx
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-const GradientScrollContainer = styled.div`
+const fixPadding = 212;
+
+const GradientScrollContainer = styled.div<{ padding: number }>`
     position: fixed;
     top: 7.5rem;
-    height: calc(100vh - 208px);
+    height: calc(100vh - ${({ padding }) => padding}px);
     left: 0;
     width: 4rem;
     padding-left: 1.875rem;
@@ -64,16 +66,39 @@ const GradientScrollBottomText = styled.div`
 export const GradientScroll: React.FC<{
     hsl: number[];
     colors: string[];
-    scrollHeight: number;
-    scrollTop: number;
-    height: number;
-}> = ({ hsl, colors, scrollHeight, scrollTop, height }) => {
-    const heightAllScroll = height - 212;
-    const heightScroll = heightAllScroll / (scrollHeight / height);
-    const topScroll = heightAllScroll * (scrollTop / scrollHeight) + 2;
+    scrollRef: React.RefObject<HTMLDivElement>;
+}> = ({ hsl, colors, scrollRef }) => {
+    const [scrollPosition, setScrollPosition] = useState(0);
+
+    const scrollHeight = scrollRef?.current?.scrollHeight ?? 0;
+    const clientHeight = scrollRef?.current?.scrollHeight ?? 0;
+
+    const heightAllScroll = clientHeight - fixPadding;
+    const heightScroll = heightAllScroll / (scrollHeight / clientHeight);
+    const topScroll = heightAllScroll * (scrollPosition / scrollHeight) + 2;
+
+    const handlerScroll = () => {
+        if (scrollRef.current) {
+            const { scrollTop } = scrollRef.current;
+            setScrollPosition(scrollTop);
+        }
+    };
+
+    useEffect(() => {
+        if (scrollRef?.current) {
+            scrollRef.current.addEventListener('scroll', handlerScroll);
+            handlerScroll();
+
+            return () => {
+                if (scrollRef.current) {
+                    scrollRef.current.removeEventListener('scroll', handlerScroll);
+                }
+            };
+        }
+    }, []);
 
     return (
-        <GradientScrollContainer>
+        <GradientScrollContainer padding={fixPadding}>
             <GradientScrollContainerScroll>
                 <GradientScrollTopText>H:{hsl[0]}</GradientScrollTopText>
                 <GradientScrollHeight colors={colors} />

diff --git a/...asma-website/components/colors/Header.tsx → ...sma-website/components/palette/Header.tsx b/...asma-website/components/colors/Header.tsx → ...sma-website/components/palette/Header.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const HeaderWrapper = styled.div`
+const HeaderWrapper = styled.a`
     display: flex;
     top: 2rem;
     left: 1.625rem;
@@ -10,6 +10,8 @@ const HeaderWrapper = styled.div`
     align-items: center;
     cursor: pointer;
     z-index: 99999;
+    color: rgba(255, 255, 255, 1);
+    text-decoration: none;
 
     &:hover .hoverHeader {
         opacity: 1;
@@ -26,9 +28,9 @@ const HeaderTextBold = styled(HeaderText)`
     opacity: 1;
 `;
 
-export const Header: React.FC<{ text?: string; onClose?: () => void }> = ({ text, onClose }) => {
+export const Header: React.FC<{ text?: string; link?: string }> = ({ text, link }) => {
     return (
-        <HeaderWrapper onClick={() => onClose?.()}>
+        <HeaderWrapper href={link}>
             <HeaderText className="hoverHeader">←</HeaderText>
             <HeaderTextBold>{text}</HeaderTextBold>
         </HeaderWrapper>