info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-03-11 02:39:41 +01:00
Code Issues Releases Wiki Activity

Update twitter icon in sharing button

Browse Source
This commit is contained in:
Kamran Ahmed 2023-11-09 04:07:49 +00:00
parent fb3cb85c14
commit d83fe1279b
2 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/ReactIcons/TwitterIcon.tsx Normal file
View File

@ -0,0 +1,23 @@
type TwitterIconProps = {
className?: string;
};
export function TwitterIcon(props: TwitterIconProps) {
const { className } = props;
return (
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<path
d="M8.9285 6.35221L14.5135 0H13.1905L8.339 5.5144L4.467 0H0L5.8565 8.33955L0 15H1.323L6.443 9.17535L10.533 15H15M1.8005 0.976187H3.833L13.1895 14.0718H11.1565"
fill="currentColor"
/>
</svg>
);
}

15
src/components/ShareRoadmapButton.tsx
View File

@ -3,6 +3,7 @@ import { useRef, useState } from 'react';
import { useOutsideClick } from '../hooks/use-outside-click.ts';
import { useCopyText } from '../hooks/use-copy-text.ts';
import { cn } from '../lib/classname.ts';
import { TwitterIcon } from './ReactIcons/TwitterIcon.tsx';
type ShareRoadmapButtonProps = {
description: string;
@ -62,7 +63,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
copyText(pageUrl);
setIsDropdownOpen(false);
}}
className="flex w-full items-center rounded-sm gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
>
<div className="flex w-[20px] items-center justify-center">
<Copy size="15px" className="text-slate-400" />
@ -72,17 +73,17 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
<a
href={twitterUrl}
target={'_blank'}
className="mt-1 flex w-full items-center rounded-sm gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
className="mt-1 flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
>
<div className="flex w-[20px] items-center justify-center">
<Twitter size="16px" className="text-slate-400" />
<TwitterIcon className="h-[16px] text-slate-400" />
</div>
Twitter
</a>
<a
href={fbUrl}
target={'_blank'}
className="flex w-full items-center rounded-sm gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
>
<div className="flex w-[20px] items-center justify-center">
<Facebook size="16px" className="text-slate-400" />
@ -92,7 +93,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
<a
href={hnUrl}
target={'_blank'}
className="flex w-full items-center rounded-sm gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
>
<div className="flex w-[20px] items-center justify-center">
<img
@ -106,7 +107,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
<a
href={redditUrl}
target={'_blank'}
className="flex w-full items-center rounded-sm gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
>
<div className="flex w-[20px] items-center justify-center">
<img
@ -120,7 +121,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
<a
href={linkedinUrl}
target={'_blank'}
className="flex w-full items-center rounded-sm gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
>
<div className="flex w-[20px] items-center justify-center">
<Linkedin size="16px" className="text-slate-400" />