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

Updated project card styling

Browse Source
This commit is contained in:
r-freeman 2023-02-08 21:38:41 +00:00
parent 83702463d5
commit a5a9346f99
2 changed files with 18 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/Card.tsx
View File

@ -110,7 +110,16 @@ Card.Title = function CardTitle({as: Component = 'h2', href, children}: CardTitl
Card.Description = function CardDescription({children, className}: CardDescription) { Card.Description = function CardDescription({children, className}: CardDescription) {
return ( return (
<p className={clsx(className ? className : "mt-2 text-sm text-zinc-600 dark:text-zinc-400", "relative z-10")}> <p className={
twMerge(`
mt-2
text-sm
text-zinc-600
dark:text-zinc-400
relative
z-10
${className ?? ""}
`)}>
{children} {children}
</p> </p>
) )

27
pages/projects.tsx
View File

@ -2,7 +2,6 @@ import {GetStaticProps} from 'next'
import Head from 'next/head' import Head from 'next/head'
import {Card} from '@/components/Card' import {Card} from '@/components/Card'
import {SimpleLayout} from '@/components/layouts/SimpleLayout' import {SimpleLayout} from '@/components/layouts/SimpleLayout'
import {SocialLink} from '@/components/SocialLink'
import {StarIcon} from '@/components/icons/StarIcon' import {StarIcon} from '@/components/icons/StarIcon'
import {ForkIcon} from '@/components/icons/ForkIcon' import {ForkIcon} from '@/components/icons/ForkIcon'
import {getPinnedRepos} from '@/lib/github' import {getPinnedRepos} from '@/lib/github'
@ -43,32 +42,22 @@ export default function Projects({pinnedRepos}: { pinnedRepos: Repo[] }) {
</h2> </h2>
<Card.Description>{repo.description}</Card.Description> <Card.Description>{repo.description}</Card.Description>
<div <div
className="z-10 flex space-x-8 md:justify-between mt-6 items-center w-full group text-sm text-zinc-500 dark:text-zinc-400"> className="z-10 flex space-x-16 sm:space-x-0 sm:justify-between mt-8 items-center w-full group text-sm text-zinc-500 dark:text-zinc-400">
<p <p
className="flex items-center"> className="flex items-center">
<span className="ml-2">{repo.primaryLanguage.name}</span> <span>{repo.primaryLanguage.name}</span>
<span <span
className="w-4 h-4 rounded-full order-first" className="mr-2 w-4 h-4 rounded-full order-first"
style={{backgroundColor: repo.primaryLanguage.color}}/> style={{backgroundColor: repo.primaryLanguage.color}}/>
</p> </p>
<div className="flex space-x-4"> <div className="flex space-x-6">
<p className="flex items-center"> <p className="flex items-center">
<span className="ml-2 order-last">{numberFormat(repo.stargazerCount)}</span> {numberFormat(repo.stargazerCount)}
<SocialLink <StarIcon className="order-first mr-2 w-5 h-5 fill-zinc-400 dark:fill-zinc-500"/>
href={repo.url}
ariaLabel={`Star ${repo.name} on GitHub`}
icon={StarIcon}
className={'w-5 h-5 fill-zinc-400 dark:fill-zinc-500'}
/>
</p> </p>
<p className="flex items-center"> <p className="flex items-center">
<span className="ml-2 order-last">{numberFormat(repo.forkCount)}</span> {numberFormat(repo.forkCount)}
<SocialLink <ForkIcon className="order-first mr-2 w-5 h-5 fill-zinc-400 dark:fill-zinc-500"/>
href={repo.url}
ariaLabel={`Fork ${repo.name} on GitHub`}
icon={ForkIcon}
className={'w-5 h-5 fill-zinc-400 dark:fill-zinc-500'}
/>
</p> </p>
</div> </div>
</div> </div>