box

Author: ckwilde

public/lines.svg

@@ -1,8 +1,28 @@
+import { ReactNode } from 'react';
 import {styled, theme} from 'stitches-config';
 
-export const Box = styled('div', {
+const ForegroundBox = styled('div', {
+  position: 'relative',
   border: '1px solid',
   borderColor: theme.colors.neutral900,
   borderRadius: theme.radii.medium,
   padding: '32px',
-});
+  zIndex: '1',
+});
+
+const BackgroundBox = styled('div', {
+});
+
+type BoxProps = {
+  children: ReactNode;
+}
+
+export function Box({ children }: BoxProps) {
+  return (
+    <BackgroundBox>
+      <ForegroundBox>
+        {children}
+      </ForegroundBox>
+    </BackgroundBox>
+  )
+}

public/star.svg

@@ -16,7 +16,7 @@ const GoSection = styled(Common.Box, {
 export function Submit() {
   return (
     <GoSection>
-      <Common.Text size='h3' as='h3'>Ready to go?</Common.Text>
+      <Common.Text size='h3' as='h3' css={{color: theme.colors.green800}}>Ready to go?</Common.Text>
       <Common.Button type='primary' arrow>Proceed</Common.Button>
     </GoSection>
   )

public/waves.svg

@@ -28,6 +28,7 @@ export function HeroSection() {
       <Container>
         <Hero.Notifications />
         <Common.Text size='h1' as='h1' css={{maxWidth: '400px'}}>Keep your community informed</Common.Text>
+        <Hero.Notifications />
       </Container>
     </Section>
   );

src/components/common/Box.tsx

@@ -32,9 +32,7 @@ const NotificationsSection = styled('div', {
 const NotificationsWrap = styled('div');
 
 export function Notifications() {
-  const [transform, setTransform] = useState(false);
-
-  const [notifications] = useState([
+  const [notifications, setNotifications] = useState([
     {
       name: 'Test1',
     },
@@ -53,19 +51,41 @@ export function Notifications() {
     {
       name: 'Test6',
     },
+    {
+      name: 'Test7',
+    },
+    {
+      name: 'Test8',
+    },
+    {
+      name: 'Test9',
+    },
+    {
+      name: 'Test10',
+    },
+    {
+      name: 'Test11',
+    },
+    {
+      name: 'Test12',
+    },
   ]);
 
-  useEffect(() => {
+/*  useEffect(() => {
     const interval = setInterval(() => {
-      setTransform(!transform);
+      const state = notifications;
+      state.unshift(state.pop());
+
+      setNotifications(state);
+      console.log(notifications);
     }, 2000);
 
     return () => clearInterval(interval);
-  });
+  }, [notifications]); */
 
   return (
     <NotificationsSection>
-      <NotificationsWrap css={{transform: `translateY(${transform ? '124px' : '0'})`}}>
+      <NotificationsWrap>
         {notifications.map((user, index) => (<Notification key={index} name={user.name} />))}
       </NotificationsWrap>
     </NotificationsSection>