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 tabs

Browse Source
pull/4036/head
Arik Chakma 1 year ago
parent 07b911066a
commit e9c5b6907c
4 changed files with 141 additions and 88 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. 34
      src/components/RoadCard/LongBadge.tsx
  2. 158
      src/components/RoadCard/RoadCardPage.tsx
  3. 34
      src/components/RoadCard/WideBadge.tsx
  4. 3
      src/icons/copy.svg

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

@ -0,0 +1,34 @@
import type { BadgeProps } from './RoadCardPage';
export function LongBadge({ badgeUrl }: BadgeProps) {
return (
<div className="col-span-2">
<a
href={badgeUrl}
target="_blank"
rel="noopener noreferrer"
className="relative block aspect-[300/392] w-full hover:cursor-pointer"
>
<img
src={badgeUrl}
alt="Road Card"
className="absolute left-0 top-0 h-full w-full object-cover"
/>
</a>
<div className="mt-3 grid grid-cols-2 gap-2">
<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">
Download
</button>
<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}
target="_blank"
rel="noopener noreferrer"
>
Copy Link
</a>
</div>
</div>
);
}

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

@ -1,14 +1,27 @@
import { useEffect, useState } from 'preact/hooks';
import Cookies from 'js-cookie';
import { TOKEN_COOKIE_NAME, decodeToken } from '../../lib/jwt';
import { WideBadge } from './WideBadge';
import { LongBadge } from './LongBadge';
import CopyIcon from '../../icons/copy.svg';
export type BadgeProps = {
badgeUrl: string;
};
export function RoadCardPage() {
const [selectedBadge, setSelectedBadge] = useState<'long' | 'wide'>('long');
const [isCopied, setIsCopied] = useState(false);
const token = Cookies.get(TOKEN_COOKIE_NAME);
if (!token) {
return null;
}
const user = decodeToken(token);
console.log(user);
const badgeUrl = `${
import.meta.env.PUBLIC_API_URL
}/v1-badge/${selectedBadge}/${user.id}`;
const textareaContent = `
<a
@ -23,8 +36,23 @@ export function RoadCardPage() {
</a>
`.trim();
const handleCopyEmbed = () => {
navigator.clipboard.writeText(textareaContent);
setIsCopied(true);
};
useEffect(() => {
let timeout: ReturnType<typeof setTimeout>;
if (isCopied) {
timeout = setTimeout(() => {
setIsCopied(false);
}, 2000);
}
return () => clearTimeout(timeout);
}, [isCopied]);
return (
<div>
<>
<div className="mb-8">
<h2 className="text-3xl font-bold sm:text-4xl">Grab your #RoadCard</h2>
<p className="mt-2">
@ -32,100 +60,54 @@ export function RoadCardPage() {
</p>
</div>
<div className="grid grid-cols-5 gap-6">
<div className="col-span-2">
<a
href={`${import.meta.env.PUBLIC_API_URL}/v1-badge/long/${user.id}`}
target="_blank"
rel="noopener noreferrer"
className="block w-full hover:cursor-pointer"
>
<img
src={`${import.meta.env.PUBLIC_API_URL}/v1-badge/long/${user.id}`}
alt="Road Card"
width={300}
height={390}
className="aspect-[1/1.3]"
/>
</a>
<div className="mt-3 grid grid-cols-2 gap-2">
<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">
Download
<div>
<div className="mb-10 flex items-center border-b">
<div className="flex items-center">
<button
className={`relative top-px flex items-center justify-center px-3 py-2 leading-none shadow-gray-600 ${
selectedBadge === 'long'
? 'shadow-[inset_0_-1px_0_var(--tw-shadow-color)]'
: 'text-gray-600'
}`}
onClick={() => setSelectedBadge('long')}
>
Long
</button>
<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={`${import.meta.env.PUBLIC_API_URL}/v1-badge/long/${
user.id
<button
className={`relative top-px flex items-center justify-center px-3 py-2 leading-none shadow-gray-600 ${
selectedBadge === 'wide'
? 'shadow-[inset_0_-1px_0_var(--tw-shadow-color)]'
: 'text-gray-600'
}`}
target="_blank"
rel="noopener noreferrer"
onClick={() => setSelectedBadge('wide')}
>
Copy Link
</a>
Wide
</button>
</div>
</div>
<div className="col-span-3">
<span className="">Embed</span>
<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
href="#"
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 underline hover:no-underline"
>
include it on your GitHub profile.
</a>
</p>
</div>
</div>
<div className="mt-6 flex flex-col gap-6">
<div className="col-span-3">
<a
href={`${import.meta.env.PUBLIC_API_URL}/v1-badge/long/${user.id}`}
target="_blank"
rel="noopener noreferrer"
className="relative block aspect-[2.63/1] w-full hover:cursor-pointer"
>
<img
src={`${import.meta.env.PUBLIC_API_URL}/v1-badge/wide/${user.id}`}
alt="Road Card"
className="absolute left-0 top-0 h-full w-full object-cover"
/>
</a>
<div
className={`${selectedBadge === 'long' && 'grid grid-cols-5 gap-6'} ${
selectedBadge === 'wide' && 'flex flex-col gap-6'
}`}
>
{selectedBadge === 'long' && <LongBadge badgeUrl={badgeUrl} />}
<div className="mt-3 grid grid-cols-2 gap-2">
<a
href={`${import.meta.env.PUBLIC_API_URL}/v1-badge/wide/${
user.id
}`}
download={`${user.name}-road-card.`}
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"
>
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"
href={`${import.meta.env.PUBLIC_API_URL}/v1-badge/long/${
user.id
}`}
target="_blank"
rel="noopener noreferrer"
{selectedBadge === 'wide' && <WideBadge badgeUrl={badgeUrl} />}
<div className={`${selectedBadge === 'long' && 'col-span-3'}`}>
<div className="flex items-center gap-2 text-xs uppercase text-gray-400 leading-none">
Embed
<button
className="flex items-center"
onClick={handleCopyEmbed}
>
Copy Link
</a>
<img src={CopyIcon} alt="Copy" className="inline-block h-4 w-4" />
{isCopied && <span className="ml-2 text-green-500">Copied!</span>}
</button>
</div>
</div>
<div className="col-span-2">
<span className="">Embed</span>
<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
@ -145,6 +127,6 @@ export function RoadCardPage() {
</p>
</div>
</div>
</div>
</>
);
}

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

@ -0,0 +1,34 @@
import type { BadgeProps } from './RoadCardPage';
export function WideBadge({ badgeUrl }: BadgeProps) {
return (
<div>
<a
href={badgeUrl}
target="_blank"
rel="noopener noreferrer"
className="relative block aspect-[2.63/1] w-full hover:cursor-pointer"
>
<img
src={badgeUrl}
alt="Road Card"
className="absolute left-0 top-0 h-full w-full object-cover"
/>
</a>
<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">
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"
href={badgeUrl}
target="_blank"
rel="noopener noreferrer"
>
Copy Link
</a>
</div>
</div>
);
}

3
src/icons/copy.svg
Unescape View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 559 B

Write Preview
Loading…
Cancel
Save