Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix responsiveness on the new landing page #1496

Merged
merged 3 commits into from
Oct 24, 2024
Merged

fix responsiveness on the new landing page #1496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8ae4449
fix responsiveness for Tweets
Oct 24, 2024
e752f1d
fix responsiveness for Tweets
Oct 24, 2024
ca4241d
component preview responsiveness fix
Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 74 additions & 69 deletions site/docs/components/landing/ComponentPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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,
Expand All @@ -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;
8 changes: 4 additions & 4 deletions site/docs/components/landing/SwapDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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];
Expand All @@ -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}
Expand Down
122 changes: 62 additions & 60 deletions site/docs/components/landing/Tweets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading