wip: prepare components for animations

guildxyz · Jul 24, 2024 · 4ffc831 · 4ffc831
1 parent ac413d1
commit 4ffc831
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 38 deletions.
diff --git a/src/app/(marketing)/create-profile/_components/ChoosePass.tsx b/src/app/(marketing)/create-profile/_components/ChoosePass.tsx
@@ -1,5 +1,4 @@
 import { Button } from "@/components/ui/Button"
-import { Card } from "@/components/ui/Card"
 import {
   Carousel,
   CarouselApi,
@@ -29,7 +28,7 @@ export const ChoosePass: OnboardingChain = ({ dispatchChainAction }) => {
   }, [subscriptionIndex])
 
   return (
-    <Card className="mx-auto flex max-w-3lg flex-col bg-gradient-to-b from-card to-card-secondary shadow-2xl">
+    <div className="max-w-screen-lg">
       <h1 className="mt-8 mb-4 h-10 text-center font-bold font-display text-2xl leading-none tracking-tight ">
         Choose your pass
       </h1>
@@ -114,6 +113,6 @@ export const ChoosePass: OnboardingChain = ({ dispatchChainAction }) => {
       <div className="space-y-4 border-border border-t bg-background p-8">
         <Benefits />
       </div>
-    </Card>
+    </div>
   )
 }
diff --git a/src/app/(marketing)/create-profile/_components/ClaimPass.tsx b/src/app/(marketing)/create-profile/_components/ClaimPass.tsx
@@ -1,5 +1,4 @@
 import { Button } from "@/components/ui/Button"
-import { Card } from "@/components/ui/Card"
 import {
   FormControl,
   FormDescription,
@@ -33,7 +32,7 @@ export const ClaimPass: OnboardingChain = ({ dispatchChainAction }) => {
   }
 
   return (
-    <Card className="mx-auto max-w-md bg-gradient-to-b from-card to-card-secondary p-8">
+    <div className="max-w-md p-8">
       <div className="mb-12 h-48 w-full">
         <GuildPassScene />
       </div>
@@ -63,6 +62,6 @@ export const ClaimPass: OnboardingChain = ({ dispatchChainAction }) => {
           </Button>
         </form>
       </FormProvider>
-    </Card>
+    </div>
   )
 }
diff --git a/src/app/(marketing)/create-profile/_components/OnboardingDriver.tsx b/src/app/(marketing)/create-profile/_components/OnboardingDriver.tsx
@@ -1,7 +1,8 @@
 "use client"
 
 import { Button } from "@/components/ui/Button"
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup"
+import { cardClassName } from "@/components/ui/Card"
+import { cn } from "@/lib/utils"
 import { useState } from "react"
 import { SUBSCRIPTIONS } from "../constants"
 import { ChainData, DispatchChainAction, OnboardingChain } from "../types"
@@ -39,26 +40,45 @@ export const OnboardingDriver = () => {
 
   return (
     <>
-      <ToggleGroup
-        className="fixed bottom-4 left-4 z-10"
-        type="single"
-        value={chainIndex.toString()}
-        onValueChange={(value) => value && setChainIndex(Number.parseInt(value))}
-      >
-        {chains.map((pane, index) => (
-          <ToggleGroupItem value={index.toString()} key={pane.name}>
-            {pane.name}
-          </ToggleGroupItem>
-        ))}
-      </ToggleGroup>
       <div className="fixed right-4 bottom-4 z-10 space-x-2">
         <Button onClick={() => dispatchChainAction("previous")}>previous</Button>
         <Button onClick={() => dispatchChainAction("next")}>next</Button>
       </div>
-      <OnboardingCard
-        dispatchChainAction={dispatchChainAction}
-        chainData={chainData}
-      />
+
+      <div
+        className={cn(
+          cardClassName,
+          "mx-auto max-w-max bg-gradient-to-b from-card to-card-secondary shadow-2xl"
+        )}
+        // layout
+        // style={{
+        //   borderRadius: "16px",
+        // }}
+      >
+        {/* <AnimatePresence mode="popLayout" initial={false}>
+          <motion.div
+            key={chainIndex}
+            initial={{
+              opacity: 0,
+            }}
+            animate={{
+              opacity: 1,
+            }}
+            exit={{
+              opacity: 0,
+            }}
+            transition={{
+              duration: 0.24,
+            }}
+            className="overflow-hidden"
+          > */}
+        <OnboardingCard
+          dispatchChainAction={dispatchChainAction}
+          chainData={chainData}
+        />
+        {/* </motion.div>
+        </AnimatePresence> */}
+      </div>
     </>
   )
 }
diff --git a/src/app/(marketing)/create-profile/_components/PurchasePass.tsx b/src/app/(marketing)/create-profile/_components/PurchasePass.tsx
@@ -1,5 +1,4 @@
 import { Button } from "@/components/ui/Button"
-import { Card } from "@/components/ui/Card"
 import { Separator } from "@/components/ui/Separator"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
 import { DotLottiePlayer } from "@dotlottie/react-player"
@@ -19,11 +18,11 @@ export const PurchasePass: OnboardingChain = ({
   const { title, pricingShort } = chainData.chosenSubscription
 
   return (
-    <Card className="mx-auto flex max-w-md flex-col bg-gradient-to-b from-card to-card-secondary shadow-2xl">
+    <div className="w-[28rem]">
       <div className="mt-8 mb-4 px-8">
         <Button
           onClick={() => dispatchChainAction("previous")}
-          className="h-10 pl-0"
+          className="h-auto p-0"
           size="lg"
           variant="unstyled"
         >
@@ -100,6 +99,6 @@ export const PurchasePass: OnboardingChain = ({
           )}
         </div>
       </div>
-    </Card>
+    </div>
   )
 }
diff --git a/src/app/(marketing)/create-profile/_components/StartProfile.tsx b/src/app/(marketing)/create-profile/_components/StartProfile.tsx
@@ -1,6 +1,5 @@
 import { Avatar } from "@/components/ui/Avatar"
 import { Button } from "@/components/ui/Button"
-import { Card } from "@/components/ui/Card"
 import {
   FormControl,
   FormErrorMessage,
@@ -38,7 +37,7 @@ export const StartProfile: OnboardingChain = () => {
 
   const [startMethod, setStartMethod] = useState<"farcaster">()
   return (
-    <Card className="mx-auto flex max-w-md flex-col gap-3 bg-gradient-to-b from-card to-card-secondary p-8">
+    <div className="flex w-[28rem] flex-col gap-3 p-8">
       <h1 className="mb-10 text-pretty text-center font-bold font-display text-2xl leading-none tracking-tight">
         Start your Guild Profile!
       </h1>
@@ -98,6 +97,6 @@ export const StartProfile: OnboardingChain = () => {
           </Button>
         </>
       )}
-    </Card>
+    </div>
   )
 }
diff --git a/src/v2/components/ui/Card.tsx b/src/v2/components/ui/Card.tsx
@@ -1,16 +1,12 @@
 import { cn } from "@/lib/utils"
 import { HTMLAttributes, forwardRef } from "react"
 
+export const cardClassName =
+  "overflow-hidden rounded-2xl bg-card text-card-foreground shadow-md"
+
 const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        "overflow-hidden rounded-2xl bg-card text-card-foreground shadow-md",
-        className
-      )}
-      {...props}
-    />
+    <div ref={ref} className={cn(cardClassName, className)} {...props} />
   )
 )
 Card.displayName = "Card"