mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 18:45:41 +00:00
Updated project card styling
This commit is contained in:
parent
83702463d5
commit
a5a9346f99
@ -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>
|
||||||
)
|
)
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user