r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-22 18:15:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updated styling of icons on projects page

Browse Source
This commit is contained in:
r-freeman 2023-02-02 20:57:26 +00:00
parent 77574bce22
commit 8672675a52
4 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/SocialLink.tsx
View File

@ -1,6 +1,6 @@
import Link from 'next/link'
import {ElementType} from 'react'
import clsx from 'clsx'
import {twMerge} from 'tailwind-merge'
type SocialLink = {
href: string
@ -10,10 +10,20 @@ type SocialLink = {
}
export function SocialLink({icon: Icon, href, ariaLabel, className}: SocialLink) {
const iconStyles = twMerge(`
w-6 h-6
fill-zinc-500
transition
group-hover:fill-zinc-600
dark:fill-zinc-400
dark:group-hover:fill-zinc-300
${className ?? ""}
`)
return (
<Link className="group -m-1 p-1" href={href} aria-label={ariaLabel}>
<Icon
className={clsx(className, "w-6 h-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300")}/>
className={iconStyles}/>
</Link>
)
}

13
package-lock.json generated
View File

@ -34,11 +34,12 @@
"remark-gfm": "^3.0.1",
"sharp": "^0.31.3",
"swr": "^2.0.0",
"tailwindcss": "^3.2.4"
"tailwind-merge": "^1.9.0"
},
"devDependencies": {
"@types/node": "^18.11.18",
"prisma": "^4.8.1",
"tailwindcss": "^3.2.4",
"ts-node": "^10.9.1",
"typescript": "4.9.4"
}
@ -8637,6 +8638,11 @@
"url": "https://opencollective.com/unts"
}
},
"node_modules/tailwind-merge": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.9.0.tgz",
"integrity": "sha512-coziXxViLHbVtFvD1+jwSu+UmDJSFX4dhj9ZuqHCuhTzu9Wk5wMedAz5AVY3uUYw95TaO7NwgUS/dLGcWvtgqw=="
},
"node_modules/tailwindcss": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
@ -16005,6 +16011,11 @@
"tslib": "^2.4.0"
}
},
"tailwind-merge": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.9.0.tgz",
"integrity": "sha512-coziXxViLHbVtFvD1+jwSu+UmDJSFX4dhj9ZuqHCuhTzu9Wk5wMedAz5AVY3uUYw95TaO7NwgUS/dLGcWvtgqw=="
},
"tailwindcss": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",

7
package.json
View File

@ -35,13 +35,14 @@
"react-dom": "18.2.0",
"remark-gfm": "^3.0.1",
"sharp": "^0.31.3",
"swr": "^2.0.0"
"swr": "^2.0.0",
"tailwind-merge": "^1.9.0"
},
"devDependencies": {
"@types/node": "^18.11.18",
"prisma": "^4.8.1",
"tailwindcss": "^3.2.4",
"ts-node": "^10.9.1",
"typescript": "4.9.4",
"tailwindcss": "^3.2.4"
"typescript": "4.9.4"
}
}

4
pages/projects.tsx
View File

@ -58,7 +58,7 @@ export default function Projects({pinnedRepos}: { pinnedRepos: Repo[] }) {
href={repo.url}
ariaLabel={`Star ${repo.name} on GitHub`}
icon={StarIcon}
className={'w-5 h-5'}
className={'w-5 h-5 group-hover:fill-zinc-500 dark:group-hover:fill-zinc-400'}
/>
</p>
<p className="relative z-10 flex items-center">
@ -67,7 +67,7 @@ export default function Projects({pinnedRepos}: { pinnedRepos: Repo[] }) {
href={repo.url}
ariaLabel={`Fork ${repo.name} on GitHub`}
icon={ForkIcon}
className={'w-5 h-5'}
className={'w-5 h-5 group-hover:fill-zinc-500 dark:group-hover:fill-zinc-400'}
/>
</p>
</div>