feat(tickets): add animation and btns

proofcarryingdata · Sep 25, 2024 · 904ce3d · 904ce3d
1 parent 97be0f5
commit 904ce3d
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 22 deletions.
diff --git a/apps/passport-client/components/shared/AppContainer.tsx b/apps/passport-client/components/shared/AppContainer.tsx
@@ -13,11 +13,13 @@ import { ScreenLoader } from "./ScreenLoader";
 export function AppContainer({
   children,
   bg,
-  fullscreen
+  fullscreen,
+  noPadding
 }: {
   bg: "primary" | "gray";
   children?: ReactNode;
   fullscreen?: boolean;
+  noPadding?: boolean;
 }): JSX.Element {
   const dispatch = useDispatch();
   const error = useAppError();
@@ -34,7 +36,7 @@ export function AppContainer({
     <Container $fullscreen={!!fullscreen}>
       <GlobalBackground color={col} />
       <Background>
-        <CenterColumn>
+        <CenterColumn defaultPadding={!noPadding}>
           {children && (
             <Toaster
               toastOptions={{
@@ -66,7 +68,7 @@ export const Background = styled.div`
   min-height: 100%;
 `;
 
-export const CenterColumn = styled.div`
+export const CenterColumn = styled.div<{ defaultPadding: boolean }>`
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -75,7 +77,7 @@ export const CenterColumn = styled.div`
   max-width: 420px;
   margin: 0 auto;
   position: relative;
-  padding: 16px;
+  ${({ defaultPadding }): string => (defaultPadding ? "padding: 16px;" : "")}
 `;
 
 const Container = styled.div<{ $fullscreen: boolean }>`

diff --git a/apps/passport-client/new-components/screens/NewTicketsScreen.tsx b/apps/passport-client/new-components/screens/NewTicketsScreen.tsx
@@ -1,13 +1,18 @@
 import { EdDSATicketPCD } from "@pcd/eddsa-ticket-pcd";
-import { PCD } from "@pcd/pcd-types";
-import { ReactElement, useLayoutEffect, useRef, useState } from "react";
-import styled from "styled-components";
 import { AppContainer } from "../../components/shared/AppContainer";
 import { usePCDs } from "../../src/appHooks";
-import { Button2 } from "../shared/Button";
-import { FloatingMenu } from "../shared/FloatingMenu";
-import { SettingsBottomModal } from "../shared/SettingsBottomModal";
+import { PCD } from "@pcd/pcd-types";
+import {
+  ReactElement,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import styled, { css } from "styled-components";
 import { TicketCard } from "../shared/TicketCard";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/solid";
+import { Spacer } from "@pcd/passport-ui";
 
 const GAP = 4;
 const isEventTicketPCD = (
@@ -33,20 +38,73 @@ const useTickets = (): Map<string, EdDSATicketPCD[]> => {
   }
   return eventsMap;
 };
-
-const Scroller = styled.div<{ amount: number; scrollInPx: number }>`
+const Scroller = styled.div<{
+  amount: number;
+  scrollInPx: number;
+  padding: number;
+}>`
   display: flex;
   flex-direction: row;
   gap: ${GAP}px;
   position: relative;
+  transition: 0.2s cubic-bezier(0.25, 0.8, 0.5, 1);
   margin-left: ${({ scrollInPx }) => -scrollInPx}px;
+  left: ${({ padding }) => padding}px;
+`;
+
+const Line = styled.div<{ padding: number }>`
+  width: 5px;
+  position: absolute;
+  left: ${({ padding }) => padding}px;
+  top: 0;
+  bottom: 0;
+  background: pink;
+  z-index: 100;
 `;
 
 const Container = styled.div<{ elWidth: number }>`
-  width: ${({ elWidth }) => elWidth}px;
+  margin-top: 20px;
+  width: 100%;
   overflow: hidden;
+  position: relative;
+`;
+
+const disabledCSS = css`
+  cursor: not-allowed;
+  opacity: 0.2;
+  pointer-events: none;
 `;
 
+export const PageCircleButton = styled.button<{
+  diameter: number;
+  padding: number;
+  disabled: boolean;
+}>`
+  ${(p): string => {
+    const size = p.diameter + 2 * p.padding + "px";
+    return `width: ${size};height: ${size};`;
+  }};
+  cursor: pointer;
+  border-radius: 99px;
+  border: none;
+  margin: 0;
+  padding: ${(p): number => p.padding}px;
+  box-shadow:
+    0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+  background: rgba(255, 255, 255, 0.8);
+  ${({ disabled }) => (disabled ? disabledCSS : undefined)}
+`;
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  gap: 12px;
+`;
+
+const StyledAppContainer = styled(AppContainer)`
+  gap: 20px;
+`;
 const positionInPx = (currentPos: number, elWidth: number, len: number) => {
   const max = len * (elWidth + GAP);
   const truePos = currentPos * (elWidth + GAP);
@@ -66,17 +124,30 @@ export const NewTicketsScreen = (): ReactElement => {
   useLayoutEffect(() => {
     console.log("called");
     if (scrollRef.current) {
+      console.log(
+        (scrollRef.current.scrollWidth - GAP * tickets.size) / tickets.size
+      );
       setWidth(
         Math.ceil(
           (scrollRef.current.scrollWidth - GAP * tickets.size) / tickets.size
         )
       );
     }
   }, [setWidth, tickets.size]);
+
+  useEffect(() => {
+    console.log(
+      "padding,",
+      (window.screen.width - width) / 2,
+      window.screen.width,
+      width
+    );
+  }, [width]);
   return (
-    <AppContainer bg="gray">
+    <AppContainer bg="gray" noPadding>
       <Container elWidth={width}>
         <Scroller
+          padding={(window.screen.width - width) / 2}
           ref={scrollRef}
           scrollInPx={positionInPx(currentPos, width, tickets.size - 1)}
           amount={tickets.size - 1}
@@ -97,14 +168,46 @@ export const NewTicketsScreen = (): ReactElement => {
             );
           })}
         </Scroller>
+        <Line padding={(window.screen.width - width) / 2} />
       </Container>
-      <Button2
-        onClick={() => {
-          setCurrentPos((old) => old + 1);
-        }}
-      >
-        click me
-      </Button2>
+      <Spacer h={20} />
+      <ButtonsContainer>
+        <PageCircleButton
+          disabled={currentPos === 0}
+          padding={6}
+          diameter={28}
+          onClick={() => {
+            setCurrentPos((old) => {
+              if (old === 0) return old;
+              return old - 1;
+            });
+          }}
+        >
+          <ChevronLeftIcon
+            width={20}
+            height={20}
+            color="var(--text-tertiary)"
+          />
+        </PageCircleButton>
+        <PageCircleButton
+          disabled={currentPos === tickets.size - 1}
+          padding={6}
+          diameter={28}
+          onClick={() => {
+            setCurrentPos((old) => {
+              if (old === tickets.size - 1) return old;
+              return old + 1;
+            });
+          }}
+        >
+          <ChevronRightIcon
+            width={20}
+            height={20}
+            color="var(--text-tertiary)"
+          />
+        </PageCircleButton>
+      </ButtonsContainer>
+      <Spacer h={20} />
       <FloatingMenu />
       <SettingsBottomModal />
     </AppContainer>

diff --git a/apps/passport-client/new-components/shared/TicketCard.tsx b/apps/passport-client/new-components/shared/TicketCard.tsx
@@ -23,6 +23,7 @@ const TicketCardContainer = styled.div<{ $borderColor: Property.Color }>`
   box-shadow:
     0px 2px 4px -1px rgba(0, 0, 0, 0.06),
     0px 4px 6px -1px rgba(0, 0, 0, 0.1);
+  max-width: 345px;
 `;
 
 const TicketCardImage = styled.img`
@@ -33,7 +34,7 @@ const TicketCardImage = styled.img`
 const TicketCardImageContainer = styled.div`
   position: relative;
   width: 100%;
-  min-width: 350px;
+  min-width: 325px;
   height: 215px;
   border-radius: 8px;
   overflow: hidden;