Browse Source

better gumroad button

pull/3/head
remorses 1 year ago
parent
commit
a03024879a
2 changed files with 30 additions and 18 deletions
  1. +3
    -1
      demos/src/pages/demos/gumroad.tsx
  2. +27
    -17
      react-landing/src/GumroadButton.tsx

+ 3
- 1
demos/src/pages/demos/gumroad.tsx View File

@ -39,7 +39,9 @@ const Page = () => (
heading='Create, your way'
subheading='Part spreadsheet, part database, and entirely flexible, teams use Airtable to organize their work, their way.'
image={<img width='500px' src='/airtable/hero.png' />}
cta={<GumroadButton singlePurchase productId='demo'></GumroadButton>}
cta={
<GumroadButton singlePurchase productId='demo'></GumroadButton>
}
fingerprint='Already using Airtable? Sign in'
/>
<Feature

+ 27
- 17
react-landing/src/GumroadButton.tsx View File

@ -19,32 +19,42 @@ export type GumroadButtonProps = {
productId: string
}
const Placeholder = (props) => {
const { colorMode } = useColorMode()
return (
<Link
display='flex'
flexDir='column'
alignItems='center'
justifyContent='center'
borderRadius='6px'
color='gray.300'
width='230px'
h='50px'
bg={{ light: 'gray.100', dark: 'rgba(255,255,255,.1)' }[colorMode]}
{...props}
/>
)
}
export const GumroadButton = forwardRef(
(
{ singlePurchase = false, productId='demo', ...props }: GumroadButtonProps,
{
singlePurchase = false,
productId = 'demo',
...props
}: GumroadButtonProps,
ref,
) => {
const [loading, error] = useScript({
src: 'https://gumroad.com/js/gumroad.js',
})
const { colorMode } = useColorMode()
if (loading) {
return (
<Box
borderRadius='6px'
width='230px'
h='50px'
bg={
{ light: 'gray.100', dark: 'rgba(255,255,255,.1)' }[
colorMode
]
}
/>
)
if (loading || error) {
return <Placeholder children={error} />
}
return (
<a
<Placeholder
ref={ref as any}
className='gumroad-button'
href={`https://gum.co/${productId}?wanted=true`}
@ -53,7 +63,7 @@ export const GumroadButton = forwardRef(
{...props}
>
Buy Now My Product
</a>
</Placeholder>
)
// return <B {...props} />
},

Loading…
Cancel
Save