r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-23 00:05: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 Link from 'next/link'
import {ElementType} from 'react' import {ElementType} from 'react'
import clsx from 'clsx' import {twMerge} from 'tailwind-merge'
type SocialLink = { type SocialLink = {
href: string href: string
@ -10,10 +10,20 @@ type SocialLink = {
} }
export function SocialLink({icon: Icon, href, ariaLabel, className}: 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 ( return (
<Link className="group -m-1 p-1" href={href} aria-label={ariaLabel}> <Link className="group -m-1 p-1" href={href} aria-label={ariaLabel}>
<Icon <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> </Link>
) )
} }

13
package-lock.json generated
View File

@ -34,11 +34,12 @@
"remark-gfm": "^3.0.1", "remark-gfm": "^3.0.1",
"sharp": "^0.31.3", "sharp": "^0.31.3",
"swr": "^2.0.0", "swr": "^2.0.0",
"tailwindcss": "^3.2.4" "tailwind-merge": "^1.9.0"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^18.11.18", "@types/node": "^18.11.18",
"prisma": "^4.8.1", "prisma": "^4.8.1",
"tailwindcss": "^3.2.4",
"ts-node": "^10.9.1", "ts-node": "^10.9.1",
"typescript": "4.9.4" "typescript": "4.9.4"
} }
@ -8637,6 +8638,11 @@
"url": "https://opencollective.com/unts" "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": { "node_modules/tailwindcss": {
"version": "3.2.4", "version": "3.2.4",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
@ -16005,6 +16011,11 @@
"tslib": "^2.4.0" "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": { "tailwindcss": {
"version": "3.2.4", "version": "3.2.4",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz", "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", "react-dom": "18.2.0",
"remark-gfm": "^3.0.1", "remark-gfm": "^3.0.1",
"sharp": "^0.31.3", "sharp": "^0.31.3",
"swr": "^2.0.0" "swr": "^2.0.0",
"tailwind-merge": "^1.9.0"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^18.11.18", "@types/node": "^18.11.18",
"prisma": "^4.8.1", "prisma": "^4.8.1",
"tailwindcss": "^3.2.4",
"ts-node": "^10.9.1", "ts-node": "^10.9.1",
"typescript": "4.9.4", "typescript": "4.9.4"
"tailwindcss": "^3.2.4"
} }
} }

4
pages/projects.tsx
View File

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