info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-16 22:23:59 +02: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
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 { useOutsideClick } from '../hooks/use-outside-click.ts';
import { useCopyText } from '../hooks/use-copy-text.ts'; import { useCopyText } from '../hooks/use-copy-text.ts';
import { cn } from '../lib/classname.ts'; import { cn } from '../lib/classname.ts';
import { TwitterIcon } from './ReactIcons/TwitterIcon.tsx';
type ShareRoadmapButtonProps = { type ShareRoadmapButtonProps = {
description: string; description: string;
@@ -62,7 +63,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
copyText(pageUrl); copyText(pageUrl);
setIsDropdownOpen(false); 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"> <div className="flex w-[20px] items-center justify-center">
<Copy size="15px" className="text-slate-400" /> <Copy size="15px" className="text-slate-400" />
@@ -72,17 +73,17 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
<a <a
href={twitterUrl} href={twitterUrl}
target={'_blank'} 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"> <div className="flex w-[20px] items-center justify-center">
<Twitter size="16px" className="text-slate-400" /> <TwitterIcon className="h-[16px] text-slate-400" />
</div> </div>
Twitter Twitter
</a> </a>
<a <a
href={fbUrl} href={fbUrl}
target={'_blank'} 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"> <div className="flex w-[20px] items-center justify-center">
<Facebook size="16px" className="text-slate-400" /> <Facebook size="16px" className="text-slate-400" />
@@ -92,7 +93,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
<a <a
href={hnUrl} href={hnUrl}
target={'_blank'} 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"> <div className="flex w-[20px] items-center justify-center">
<img <img
@@ -106,7 +107,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
<a <a
href={redditUrl} href={redditUrl}
target={'_blank'} 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"> <div className="flex w-[20px] items-center justify-center">
<img <img
@@ -120,7 +121,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
<a <a
href={linkedinUrl} href={linkedinUrl}
target={'_blank'} 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"> <div className="flex w-[20px] items-center justify-center">
<Linkedin size="16px" className="text-slate-400" /> <Linkedin size="16px" className="text-slate-400" />