github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: badge variants

Browse Source
pull/4036/head
Arik Chakma 1 year ago
parent d1315325ec
commit ad1a18e1d8
3 changed files with 68 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/components/RoadCard/LongBadge.tsx
  2. 82
      src/components/RoadCard/RoadCardPage.tsx
  3. 4
      src/components/RoadCard/WideBadge.tsx

4
src/components/RoadCard/LongBadge.tsx
Unescape View File

@ -22,13 +22,13 @@ export function LongBadge({ badgeUrl }: BadgeProps) {
<div className="mt-3 grid grid-cols-2 gap-2">
<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"
href={badgeUrl + '?type=png'}
href={badgeUrl + '&type=png'}
download
>
Download
</a>
<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)}
>
{isCopied ? 'Copied!' : 'Copy Link'}

82
src/components/RoadCard/RoadCardPage.tsx
Unescape View File

@ -1,4 +1,4 @@
import { useEffect, useState } from 'preact/hooks';
import { useState } from 'preact/hooks';
import Cookies from 'js-cookie';
import { TOKEN_COOKIE_NAME, decodeToken } from '../../lib/jwt';
import { WideBadge } from './WideBadge';
@ -13,6 +13,9 @@ export type BadgeProps = {
export function RoadCardPage() {
const [selectedBadge, setSelectedBadge] = useState<'long' | 'wide'>('long');
const [selectedVariant, setSelectedVariant] = useState<'dark' | 'light'>(
'dark'
);
const { isCopied, handleCopy } = useIsCopied();
const token = Cookies.get(TOKEN_COOKIE_NAME);
@ -23,7 +26,7 @@ export function RoadCardPage() {
const badgeUrl = `${
import.meta.env.PUBLIC_API_URL
}/v1-badge/${selectedBadge}/${user.id}`;
}/v1-badge/${selectedBadge}/${user.id}?variant=${selectedVariant}`;
const textareaContent = `
<a
@ -56,7 +59,10 @@ export function RoadCardPage() {
? 'shadow-[inset_0_-1px_0_var(--tw-shadow-color)]'
: 'text-gray-600'
}`}
onClick={() => setSelectedBadge('long')}
onClick={() => {
setSelectedBadge('long');
setSelectedVariant('dark');
}}
>
Long
</button>
@ -67,7 +73,10 @@ export function RoadCardPage() {
? 'shadow-[inset_0_-1px_0_var(--tw-shadow-color)]'
: 'text-gray-600'
}`}
onClick={() => setSelectedBadge('wide')}
onClick={() => {
setSelectedBadge('wide');
setSelectedVariant('dark');
}}
>
Wide
</button>
@ -85,22 +94,59 @@ export function RoadCardPage() {
{selectedBadge === 'wide' && <WideBadge badgeUrl={badgeUrl} />}
<div className={`${selectedBadge === 'long' && 'sm:col-span-3'}`}>
<div className="flex items-center gap-2 text-xs uppercase leading-none text-gray-400">
Embed
<button
className="flex items-center"
onClick={() => handleCopy(textareaContent)}
<div>
<span className="text-xs uppercase leading-none text-gray-400">
Variation
</span>
<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" />
{isCopied && <span className="ml-2 text-green-500">Copied!</span>}
</button>
{textareaContent}
</textarea>
</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">
You can include it on your website or follow the instructions to{' '}
<a

4
src/components/RoadCard/WideBadge.tsx
Unescape View File

@ -21,13 +21,13 @@ export function WideBadge({ badgeUrl }: BadgeProps) {
<div className="mt-3 grid grid-cols-2 gap-2">
<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"
href={badgeUrl + '?type=png'}
href={badgeUrl + '&type=png'}
download
>
Download
</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)}
>
{isCopied ? 'Copied!' : 'Copy Link'}

Write Preview
Loading…
Cancel
Save