fix responsiveness on the new landing page (#1496)

Co-authored-by: Mind Apivessa <[email protected]>
coinbase · Oct 24, 2024 · b675cb9 · b675cb9
1 parent d1a948d
commit b675cb9
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 133 deletions.
diff --git a/site/docs/components/landing/ComponentPreview.tsx b/site/docs/components/landing/ComponentPreview.tsx
@@ -1,6 +1,7 @@
+import type React from 'react';
 import { useEffect, useState } from 'react';
-import CopyIcon from '../svg/CopySvg.tsx';
-import CheckIcon from '../svg/checkSvg.tsx';
+import CopyIcon from '../svg/CopySvg.js';
+import CheckIcon from '../svg/checkSvg.js';
 
 // Demo components and code snippets
 import CheckoutDemo, { checkoutDemoCode } from './CheckoutDemo.tsx';
@@ -83,7 +84,7 @@ function ComponentPreview() {
 
   return (
     <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
-      <div className="flex flex-col gap-8 lg:flex-row lg:items-start">
+      <div className="flex flex-col items-center gap-8 lg:flex-row lg:items-start">
         <ComponentList
           activeTab={activeTab}
           setActiveTab={setActiveTab}
@@ -154,6 +155,12 @@ type PreviewContainerProps = {
   copyToClipboard: (text: string, index: number) => void;
 };
 
+type TabButtonProps = {
+  isActive: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+};
+
 function PreviewContainer({
   activeTab,
   activeSubTab,
@@ -164,77 +171,75 @@ function PreviewContainer({
   const ActiveComponent = components[activeTab].component;
 
   return (
-    <div className="w-full flex-shrink-0 lg:w-[640px] xl:w-[720px]">
-      <div className="rounded-lg border border-zinc-200 dark:border-zinc-900">
-        <div className="relative w-full overflow-hidden rounded-lg bg-zinc-100 dark:bg-[#0F0F0F]">
-          <div className="flex items-center justify-between border-zinc-200 border-b dark:border-zinc-900">
-            <div className="flex">
-              <button
-                type="button"
-                className={`mt-2 ml-2 px-4 py-2 text-sm ${
-                  activeSubTab === 'preview'
-                    ? 'border-indigo-600 border-b-2 bg-zinc-100 text-zinc-950 dark:border-indigo-400 dark:bg-[#0F0F0F] dark:text-zinc-50'
-                    : 'text-zinc-700 dark:text-zinc-300'
-                }`}
-                onClick={() => setActiveSubTab('preview')}
-              >
-                Preview
-              </button>
-              <button
-                type="button"
-                className={`mt-2 px-4 py-2 text-sm ${
-                  activeSubTab === 'code'
-                    ? 'border-indigo-600 border-b-2 text-zinc-950 dark:border-indigo-400 dark:text-zinc-50'
-                    : 'text-zinc-700 dark:text-zinc-300'
-                }`}
-                onClick={() => setActiveSubTab('code')}
-              >
-                Code
-              </button>
-            </div>
-            {activeSubTab === 'code' && (
-              <button
-                type="button"
-                className="mr-2 rounded-md p-2 hover:bg-zinc-200 dark:hover:bg-zinc-800"
-                onClick={() =>
-                  copyToClipboard(components[activeTab].code, activeTab)
-                }
-                title={
-                  copiedIndex === activeTab ? 'Copied!' : 'Copy to clipboard'
-                }
-              >
-                {copiedIndex === activeTab ? (
-                  <CheckIcon className="h-5 w-5 text-green-500 dark:text-green-400" />
-                ) : (
-                  <CopyIcon className="h-5 w-5 text-zinc-700 dark:text-zinc-300" />
-                )}
-              </button>
+    <div className="h-[550px] w-[375px] overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50 sm:w-[640px] md:h-[600px] md:w-[700px] dark:border-zinc-900 dark:bg-zinc-950">
+      <div className="mt-2 flex items-center justify-between border-zinc-200 border-b px-3 dark:border-zinc-900">
+        <div className="flex">
+          <TabButton
+            isActive={activeSubTab === 'preview'}
+            onClick={() => setActiveSubTab('preview')}
+          >
+            Preview
+          </TabButton>
+          <TabButton
+            isActive={activeSubTab === 'code'}
+            onClick={() => setActiveSubTab('code')}
+          >
+            Code
+          </TabButton>
+        </div>
+        {activeSubTab === 'code' && (
+          <button
+            type="button"
+            className="p-2 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
+            onClick={() =>
+              copyToClipboard(components[activeTab].code, activeTab)
+            }
+            title={copiedIndex === activeTab ? 'Copied!' : 'Copy to clipboard'}
+          >
+            {copiedIndex === activeTab ? (
+              <CheckIcon className="h-5 w-5" />
+            ) : (
+              <CopyIcon className="h-5 w-5" />
             )}
-          </div>
-          <div className="h-[500px] overflow-auto">
-            <div
-              className={`${
-                activeSubTab === 'preview' ? 'flex' : 'hidden'
-              } h-full w-full items-center justify-center p-4`}
-            >
-              <div className="flex w-full max-w-[360px] items-center justify-center lg:max-w-none">
-                <ActiveComponent />
-              </div>
-            </div>
-            <div
-              className={`${
-                activeSubTab === 'code' ? 'block' : 'hidden'
-              } h-full w-full p-4`}
-            >
-              <pre className="h-full w-full overflow-auto bg-zinc-100 text-sm dark:bg-[#0F0F0F]">
-                <code>{components[activeTab].code}</code>
-              </pre>
-            </div>
-          </div>
+          </button>
+        )}
+      </div>
+      <div className="flex overflow-auto">
+        <div
+          className={`${
+            activeSubTab === 'preview' ? 'flex' : 'hidden'
+          } h-[500px] w-full items-center justify-center md:h-[550px]`}
+        >
+          <ActiveComponent />
+        </div>
+        <div
+          className={`${
+            activeSubTab === 'code' ? 'flex' : 'hidden'
+          } overflow-auto p-4`}
+        >
+          <pre className="overflow-autos h-[450px] whitespace-pre-wrap break-words text-sm md:h-[600px]">
+            <code>{components[activeTab].code}</code>
+          </pre>
         </div>
       </div>
     </div>
   );
 }
 
+function TabButton({ isActive, onClick, children }: TabButtonProps) {
+  return (
+    <button
+      type="button"
+      className={`px-4 py-2 font-medium text-sm ${
+        isActive
+          ? 'border-indigo-600 border-b-2 text-indigo-600 dark:border-indigo-400 dark:text-indigo-400'
+          : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100'
+      }`}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
 export default ComponentPreview;
diff --git a/site/docs/components/landing/SwapDemo.tsx b/site/docs/components/landing/SwapDemo.tsx
@@ -32,7 +32,7 @@ export const swapDemoCode = `
     decimals: 18,
     name: "Ethereum",
     symbol: "ETH",
-    image: "https://dynamic-assets.coinbase.com/dbb4b4983bde81309ddab83eb598358eb44375b930b94687ebe38bc22e52c3b2125258ffb8477a5ef22e33d6bd72e32a506c391caa13af64c00e46613c3e5806/asset_icons/4113b082d21cc5fab17fc8f2d19fb996165bcce635e6900f7fc2d57c4ef33ae9.png",
+    image: "",
   };
  
   const USDCToken: Token = {
@@ -41,7 +41,7 @@ export const swapDemoCode = `
     decimals: 6,
     name: "USDC",
     symbol: "USDC",
-    image: "https://dynamic-assets.coinbase.com/3c15df5e2ac7d4abbe9499ed9335041f00c620f28e8de2f93474a9f432058742cdf4674bd43f309e69778a26969372310135be97eb183d91c492154176d455b8/asset_icons/9d67b728b6c8f457717154b3a35f9ddc702eae7e76c4684ee39302c4d7fd0bb8.png",
+    image: "",
   };
  
   const swappableTokens: Token[] = [ETHToken, USDCToken];
@@ -54,13 +54,13 @@ export const swapDemoCode = `
 
 function SwapDemo() {
   return (
-    <div className="mx-auto flex w-full max-w-[360px] flex-col items-center justify-center">
+    <div className="mx-auto flex flex-col items-center justify-center">
       <App>
         <SwapWrapper>
           {({ address, swappableTokens }) => {
             if (address) {
               return (
-                <Swap>
+                <Swap className="w-[360px] sm:w-[500px]">
                   <SwapAmountInput
                     label="Sell"
                     swappableTokens={swappableTokens}

diff --git a/site/docs/components/landing/Tweets.tsx b/site/docs/components/landing/Tweets.tsx
@@ -7,7 +7,7 @@ interface TweetCardProps {
 }
 
 const TweetCard: React.FC<TweetCardProps> = ({ children, className }) => (
-  <div className={`w-full flex-shrink-0 md:w-[400px] ${className || ''}`}>
+  <div className={`mx-auto w-full max-w-[400px] ${className || ''}`}>
     <blockquote className="twitter-tweet" data-dnt="true" data-theme="light">
       {children}
     </blockquote>
@@ -43,66 +43,68 @@ const Tweets: React.FC = () => {
 
   return (
     <section className="w-full py-12 md:py-24">
-      <div className="mb-8 px-4 text-center md:mb-8">
-        <h3 className="font-medium text-2xl text-gray-950 md:text-3xl dark:text-gray-50">
-          Builders ship faster with OnchainKit
-        </h3>
-      </div>
-      <div className="relative w-full">
-        <div className="flex flex-col gap-8 md:snap-x md:snap-mandatory md:flex-row md:gap-4 md:overflow-x-auto">
-          <TweetCard className="tweet1 md:snap-center">
-            <p lang="en" dir="ltr">
-              🟣 Excited to announce that Basenames are now integrated into the
-              Fit Club app! <br />
-              <br />
-              Thanks to{' '}
-              <a href="https://twitter.com/OnchainKit?ref_src=twsrc%5Etfw">
-                @OnchainKit
-              </a>{' '}
-              for making it smooth and easy! 💜
-              <br />
-              <br />
-              More updates on the way, stay fit. 🏋️‍♀️🏋️‍♂️{' '}
-              <a href="https://t.co/5BlIm5kSx3">pic.twitter.com/5BlIm5kSx3</a>
-            </p>
-            — Fit Club (@fitclubonbase){' '}
-            <a href="https://twitter.com/fitclubonbase/status/1826969613294334172?ref_src=twsrc%5Etfw">
-              August 23, 2024
-            </a>
-          </TweetCard>
-          <TweetCard className="tweet2 md:snap-center">
-            <p lang="en" dir="ltr">
-              Building with
-              <a href="https://twitter.com/OnchainKit?ref_src=twsrc%5Etfw">
-                @OnchainKit
-              </a>{' '}
-              has been such a great experience so far. We&#39;re builders, and
-              we like to build things from scratch. But with{' '}
-              <a href="https://twitter.com/OnchainKit?ref_src=twsrc%5Etfw">
-                @OnchainKit
+      <div className="container mx-auto px-4">
+        <div className="mb-8 text-center md:mb-12">
+          <h3 className="font-medium text-2xl text-gray-950 md:text-3xl dark:text-gray-50">
+            Builders ship faster with OnchainKit
+          </h3>
+        </div>
+        <div className="relative w-full">
+          <div className="flex flex-col items-center gap-8 md:flex-row md:items-stretch md:justify-center md:gap-4 md:overflow-x-auto md:pb-4">
+            <TweetCard className="tweet1 md:flex-shrink-0">
+              <p lang="en" dir="ltr">
+                🟣 Excited to announce that Basenames are now integrated into
+                the Fit Club app! <br />
+                <br />
+                Thanks to{' '}
+                <a href="https://twitter.com/OnchainKit?ref_src=twsrc%5Etfw">
+                  @OnchainKit
+                </a>{' '}
+                for making it smooth and easy! 💜
+                <br />
+                <br />
+                More updates on the way, stay fit. 🏋️‍♀️🏋️‍♂️{' '}
+                <a href="https://t.co/5BlIm5kSx3">pic.twitter.com/5BlIm5kSx3</a>
+              </p>
+              — Fit Club (@fitclubonbase){' '}
+              <a href="https://twitter.com/fitclubonbase/status/1826969613294334172?ref_src=twsrc%5Etfw">
+                August 23, 2024
+              </a>
+            </TweetCard>
+            <TweetCard className="tweet2 md:flex-shrink-0">
+              <p lang="en" dir="ltr">
+                Building with
+                <a href="https://twitter.com/OnchainKit?ref_src=twsrc%5Etfw">
+                  @OnchainKit
+                </a>{' '}
+                has been such a great experience so far. We&#39;re builders, and
+                we like to build things from scratch. But with{' '}
+                <a href="https://twitter.com/OnchainKit?ref_src=twsrc%5Etfw">
+                  @OnchainKit
+                </a>
+                , there was a real boost in productivity, allowing us to ship
+                dApps with seamless functionality in a matter of minutes. <br />
+                <br />
+                Onto the next…{' '}
+                <a href="https://t.co/QzlJ4RIKLG">https://t.co/QzlJ4RIKLG</a>
+              </p>
+              &mdash; Coinfever (@coinfeverapp){' '}
+              <a href="https://twitter.com/coinfeverapp/status/1842230362337915205?ref_src=twsrc%5Etfw">
+                October 4, 2024
+              </a>
+            </TweetCard>
+            <TweetCard className="tweet3 md:flex-shrink-0">
+              <p lang="en" dir="ltr">
+                Swap is now live on our website! Feels good to be based, thanks
+                guys 💙{' '}
+                <a href="https://t.co/vunDYrnT2j">pic.twitter.com/vunDYrnT2j</a>
+              </p>
+              &mdash; KEYCAT (@KeyboardCatBase){' '}
+              <a href="https://twitter.com/KeyboardCatBase/status/1838710257809252581?ref_src=twsrc%5Etfw">
+                September 24, 2024
               </a>
-              , there was a real boost in productivity, allowing us to ship
-              dApps with seamless functionality in a matter of minutes. <br />
-              <br />
-              Onto the next…{' '}
-              <a href="https://t.co/QzlJ4RIKLG">https://t.co/QzlJ4RIKLG</a>
-            </p>
-            &mdash; Coinfever (@coinfeverapp){' '}
-            <a href="https://twitter.com/coinfeverapp/status/1842230362337915205?ref_src=twsrc%5Etfw">
-              October 4, 2024
-            </a>
-          </TweetCard>
-          <TweetCard className="tweet3 md:snap-center">
-            <p lang="en" dir="ltr">
-              Swap is now live on our website! Feels good to be based, thanks
-              guys 💙{' '}
-              <a href="https://t.co/vunDYrnT2j">pic.twitter.com/vunDYrnT2j</a>
-            </p>
-            &mdash; KEYCAT (@KeyboardCatBase){' '}
-            <a href="https://twitter.com/KeyboardCatBase/status/1838710257809252581?ref_src=twsrc%5Etfw">
-              September 24, 2024
-            </a>
-          </TweetCard>
+            </TweetCard>
+          </div>
         </div>
       </div>
     </section>