feat: add selected state for about steps (#5584)

* refactor: move steps and cards into config * selected state * css only

feat: add selected state for about steps (#5584)
* refactor: move steps and cards into config * selected state * css only
09511b06 · Vignesh Mohankumar · GitHub · 9def6863 · 09511b06 · 09511b06
Commit 09511b06 authored Dec 08, 2022 by Vignesh Mohankumar Committed by GitHub Dec 08, 2022
Hide whitespace changes
Inline Side-by-side

Showing with 62 additions and 34 deletions

Step.tsx src/pages/About/Step.tsx +12 -6

index.tsx src/pages/About/index.tsx +50 -28

No files found.
--- a/src/pages/About/Step.tsx
+++ b/src/pages/About/Step.tsx
 import styled from 'styled-components/macro'

-const StyledStep = styled.div<{ isLast?: boolean }>`
+const StyledStep = styled.div`
+  cursor: pointer;
  display: flex;
  gap: 36px;
  padding: 24px 0;
-  border-bottom: ${({ isLast, theme }) => !isLast && `1px solid ${theme.backgroundOutline}`};
+
+  &:not(:last-of-type) {
+    border-bottom: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
+  }
 `

 const StepTitle = styled.div`
@@ -30,19 +34,21 @@ const Step = ({
  index,
  title,
  description,
-  isLast,
+  expanded,
+  onClick,
 }: {
  index: number
  title: string
  description: string
-  isLast?: boolean
+  onClick: () => void
+  expanded?: boolean
 }) => {
  return (
-    <StyledStep isLast={isLast}>
+    <StyledStep onClick={onClick}>
      <StepIndex>{index + 1}</StepIndex>
      <div>
        <StepTitle>{title}</StepTitle>
-        <StepDescription>{description}</StepDescription>
+        {expanded && <StepDescription>{description}</StepDescription>}
      </div>
    </StyledStep>
  )

--- a/src/pages/About/index.tsx
+++ b/src/pages/About/index.tsx
@@ -6,7 +6,7 @@ import walletConnectIcon from 'assets/images/walletConnectIcon.svg'
 import { ButtonOutlined } from 'components/Button'
 import { Box } from 'nft/components/Box'
 import { DiscordIconMenu, GithubIconMenu, TwitterIconMenu } from 'nft/components/icons'
-import { ReactNode } from 'react'
+import { ReactNode, useState } from 'react'
 import { useIsDarkMode } from 'state/user/hooks'
 import styled, { useTheme } from 'styled-components/macro'
 import { BREAKPOINTS } from 'theme'
@@ -149,10 +149,47 @@ const GetStarted = styled.div`
  margin-bottom: 100px;
 `

+const CARDS = [
+  {
+    to: '/swap',
+    title: 'Swap tokens',
+    description: 'Discover and swap top tokens on Ethereum, Polygon, Optimism, and more.',
+  },
+  {
+    to: '/nfts',
+    title: 'Trade NFTs',
+    description: 'Buy & sell NFTs across marketplaces to find more listings at better prices.',
+  },
+  {
+    to: '/pool',
+    title: 'Earn fees',
+    description: 'Provide liquidity to pools on Uniswap and earn fees on swaps.',
+  },
+  {
+    to: 'https://support.uniswap.org/',
+    external: true,
+    title: 'Build dApps',
+    description: 'Build on the largest DeFi protocol on Ethereum with our tools.',
+  },
+]
+
+const STEPS = [
+  {
+    title: 'Connect a wallet',
+    description: 'Connect your preferred crypto wallet to the Uniswap Interface.',
+  },
+  {
+    title: 'Swap!',
+    description: 'Trade crypto and NFTs through Uniswap’s platform',
+  },
+]
+
 export default function About() {
  const isDarkMode = useIsDarkMode()
  const theme = useTheme()

+  const [selectedStepIndex, setSelectedStepIndex] = useState(0)
+
  return (
    <Page isDarkMode={isDarkMode}>
      <Content>
@@ -173,27 +210,9 @@ export default function About() {
          </Intro>
        </Body>
        <CardGrid>
-          <Card
-            to="/swap"
-            title="Swap tokens"
-            description="Discover and swap top tokens on Ethereum, Polygon, Optimism, and more."
-          />
-          <Card
-            to="/nfts"
-            title="Trade NFTs"
-            description="Buy & sell NFTs across marketplaces to find more listings at better prices."
-          />
-          <Card
-            to="/pool"
-            title="Earn fees"
-            description="Provide liquidity to pools on Uniswap and earn fees on swaps."
-          />
-          <Card
-            to="https://support.uniswap.org/"
-            external
-            title="Build dApps"
-            description="Build on the largest DeFi protocol on Ethereum with our tools."
-          />
+          {CARDS.map((card) => (
+            <Card key={card.title} {...card} />
+          ))}
        </CardGrid>
        <Body>
          <div>
@@ -214,12 +233,15 @@ export default function About() {
            </WalletIconGrid>
          </div>
          <StepList>
-            <Step
-              index={0}
-              title="Connect a wallet"
-              description="Connect your preferred crypto wallet to the Uniswap Interface."
-            />
-            <Step isLast index={1} title="Swap!" description="Trade crypto and NFTs through Uniswap’s platform" />
+            {STEPS.map((step, index) => (
+              <Step
+                expanded={selectedStepIndex === index}
+                onClick={() => setSelectedStepIndex(index)}
+                index={index}
+                key={step.title}
+                {...step}
+              />
+            ))}
          </StepList>
        </Body>
        <IconRow>