r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-09-22 17:36:17 +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) {
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}
</p>
)

27
pages/projects.tsx
View File

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