chore: badge variants

pull/4036/head
Arik Chakma 1 year ago
parent d1315325ec
commit ad1a18e1d8
  1. 4
      src/components/RoadCard/LongBadge.tsx
  2. 82
      src/components/RoadCard/RoadCardPage.tsx
  3. 4
      src/components/RoadCard/WideBadge.tsx

@ -22,13 +22,13 @@ export function LongBadge({ badgeUrl }: BadgeProps) {
<div className="mt-3 grid grid-cols-2 gap-2"> <div className="mt-3 grid grid-cols-2 gap-2">
<a <a
className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none hover:opacity-75" className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none hover:opacity-75"
href={badgeUrl + '?type=png'} href={badgeUrl + '&type=png'}
download download
> >
Download Download
</a> </a>
<button <button
className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none hover:opacity-75" className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none cursor-pointer hover:opacity-75"
onClick={() => handleCopy(badgeUrl)} onClick={() => handleCopy(badgeUrl)}
> >
{isCopied ? 'Copied!' : 'Copy Link'} {isCopied ? 'Copied!' : 'Copy Link'}

@ -1,4 +1,4 @@
import { useEffect, useState } from 'preact/hooks'; import { useState } from 'preact/hooks';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import { TOKEN_COOKIE_NAME, decodeToken } from '../../lib/jwt'; import { TOKEN_COOKIE_NAME, decodeToken } from '../../lib/jwt';
import { WideBadge } from './WideBadge'; import { WideBadge } from './WideBadge';
@ -13,6 +13,9 @@ export type BadgeProps = {
export function RoadCardPage() { export function RoadCardPage() {
const [selectedBadge, setSelectedBadge] = useState<'long' | 'wide'>('long'); const [selectedBadge, setSelectedBadge] = useState<'long' | 'wide'>('long');
const [selectedVariant, setSelectedVariant] = useState<'dark' | 'light'>(
'dark'
);
const { isCopied, handleCopy } = useIsCopied(); const { isCopied, handleCopy } = useIsCopied();
const token = Cookies.get(TOKEN_COOKIE_NAME); const token = Cookies.get(TOKEN_COOKIE_NAME);
@ -23,7 +26,7 @@ export function RoadCardPage() {
const badgeUrl = `${ const badgeUrl = `${
import.meta.env.PUBLIC_API_URL import.meta.env.PUBLIC_API_URL
}/v1-badge/${selectedBadge}/${user.id}`; }/v1-badge/${selectedBadge}/${user.id}?variant=${selectedVariant}`;
const textareaContent = ` const textareaContent = `
<a <a
@ -56,7 +59,10 @@ export function RoadCardPage() {
? 'shadow-[inset_0_-1px_0_var(--tw-shadow-color)]' ? 'shadow-[inset_0_-1px_0_var(--tw-shadow-color)]'
: 'text-gray-600' : 'text-gray-600'
}`} }`}
onClick={() => setSelectedBadge('long')} onClick={() => {
setSelectedBadge('long');
setSelectedVariant('dark');
}}
> >
Long Long
</button> </button>
@ -67,7 +73,10 @@ export function RoadCardPage() {
? 'shadow-[inset_0_-1px_0_var(--tw-shadow-color)]' ? 'shadow-[inset_0_-1px_0_var(--tw-shadow-color)]'
: 'text-gray-600' : 'text-gray-600'
}`} }`}
onClick={() => setSelectedBadge('wide')} onClick={() => {
setSelectedBadge('wide');
setSelectedVariant('dark');
}}
> >
Wide Wide
</button> </button>
@ -85,22 +94,59 @@ export function RoadCardPage() {
{selectedBadge === 'wide' && <WideBadge badgeUrl={badgeUrl} />} {selectedBadge === 'wide' && <WideBadge badgeUrl={badgeUrl} />}
<div className={`${selectedBadge === 'long' && 'sm:col-span-3'}`}> <div className={`${selectedBadge === 'long' && 'sm:col-span-3'}`}>
<div className="flex items-center gap-2 text-xs uppercase leading-none text-gray-400"> <div>
Embed <span className="text-xs uppercase leading-none text-gray-400">
<button Variation
className="flex items-center" </span>
onClick={() => handleCopy(textareaContent)}
<div className="mt-2 flex items-center gap-2">
<button
className={`flex h-7 items-center justify-center rounded-lg border border-gray-200 px-3 text-sm leading-none hover:opacity-80 ${
selectedVariant === 'dark' && 'border-gray-300 bg-gray-100'
}`}
onClick={() => setSelectedVariant('dark')}
>
Dark
</button>
<button
className={`flex h-7 items-center justify-center rounded-lg border border-gray-200 px-3 text-sm leading-none hover:opacity-80 ${
selectedVariant === 'light' && 'border-gray-300 bg-gray-100'
}`}
onClick={() => setSelectedVariant('light')}
>
Light
</button>
</div>
</div>
<div className="mt-6 overflow-hidden rounded border border-gray-300 bg-gray-50">
<div className="flex items-center justify-between gap-2 border-b border-gray-300 p-3">
<span className="text-xs uppercase leading-none text-gray-400">
Embed
</span>
<button
className="flex items-center"
onClick={() => handleCopy(textareaContent)}
>
{isCopied && (
<span className="mr-2 text-xs leading-none text-green-500">
Copied!
</span>
)}
<img
src={CopyIcon}
alt="Copy"
className="inline-block h-4 w-4"
/>
</button>
</div>
<textarea
className="no-scrollbar block h-32 w-full bg-gray-200/70 p-3 text-gray-900"
readOnly
> >
<img src={CopyIcon} alt="Copy" className="inline-block h-4 w-4" /> {textareaContent}
{isCopied && <span className="ml-2 text-green-500">Copied!</span>} </textarea>
</button>
</div> </div>
<textarea
className="no-scrollbar mt-3 h-32 w-full rounded-md border border-gray-300 bg-gray-50 p-3 text-gray-900"
readOnly
>
{textareaContent}
</textarea>
<p className="mt-3"> <p className="mt-3">
You can include it on your website or follow the instructions to{' '} You can include it on your website or follow the instructions to{' '}
<a <a

@ -21,13 +21,13 @@ export function WideBadge({ badgeUrl }: BadgeProps) {
<div className="mt-3 grid grid-cols-2 gap-2"> <div className="mt-3 grid grid-cols-2 gap-2">
<a <a
className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none hover:opacity-75" className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none hover:opacity-75"
href={badgeUrl + '?type=png'} href={badgeUrl + '&type=png'}
download download
> >
Download Download
</a> </a>
<a <a
className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none hover:opacity-75" className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none cursor-pointer hover:opacity-75"
onClick={() => handleCopy(badgeUrl)} onClick={() => handleCopy(badgeUrl)}
> >
{isCopied ? 'Copied!' : 'Copy Link'} {isCopied ? 'Copied!' : 'Copy Link'}

Loading…
Cancel
Save