fix: repos cards

This commit is contained in:
marcelines 2023-06-07 14:42:52 +01:00
parent a35371dc60
commit a4797bb5db
No known key found for this signature in database
GPG Key ID: 56B1E53E2A3F43C7
1 changed files with 61 additions and 24 deletions

View File

@ -1,4 +1,5 @@
import { Text } from '@status-im/components' import { Shadow, Text } from '@status-im/components'
import { OpenIcon, UnlockedIcon } from '@status-im/icons'
import { Link } from '@/components/link' import { Link } from '@/components/link'
import { InsightsLayout } from '@/layouts/insights-layout' import { InsightsLayout } from '@/layouts/insights-layout'
@ -30,6 +31,24 @@ const repos = [
issues: 10, issues: 10,
stars: 5, stars: 5,
}, },
{
name: 'nim-waku',
description: 'a free (libre) open source, mobile OS for Ethereum.',
issues: 10,
stars: 5,
},
{
name: 'go-waku',
description: 'a free (libre) open source, mobile OS for Ethereum.',
issues: 10,
stars: 5,
},
{
name: 'js-waku',
description: 'a free (libre) open source, mobile OS for Ethereum.',
issues: 10,
stars: 5,
},
{ {
name: 'nimbus-eth2', name: 'nimbus-eth2',
description: 'a free (libre) open source, mobile OS for Ethereum.', description: 'a free (libre) open source, mobile OS for Ethereum.',
@ -55,30 +74,48 @@ const ReposPage: Page = () => {
<div className="grid grid-cols-3 gap-5"> <div className="grid grid-cols-3 gap-5">
{repos.map(repo => ( {repos.map(repo => (
<Shadow key={repo.name}>
<Link <Link
key={repo.name}
href={`https://github.com/status-im/${repo.name}`} href={`https://github.com/status-im/${repo.name}`}
className="border-neutral-10 hover:border-neutral-40 flex h-[124px] flex-col rounded-2xl border px-4 py-3 transition-colors duration-200" className="border-neutral-10 hover:border-neutral-40 flex h-[124px] flex-col justify-between rounded-2xl border px-4 py-3 transition-colors duration-200"
> >
<div className="flex flex-col">
<Text size={15} weight="semibold"> <Text size={15} weight="semibold">
{repo.name} {repo.name}
</Text> </Text>
<Text size={15} color="$neutral-50"> <Text size={15} color="$neutral-50">
{repo.description} {repo.description}
</Text> </Text>
</div>
<div className="flex gap-3 pt-4"> <div className="flex gap-3 pt-4">
<Text size={13} weight="medium" color="$neutral-50"> <div className="flex items-center">
<div className="pr-1">
<UnlockedIcon size={12} color="$neutral-50" />
</div>
<Text size={13} weight="medium" color="$neutral-100">
Public Public
</Text> </Text>
<Text size={13} weight="medium" color="$neutral-50"> </div>
42 Issues <div className="flex items-center">
<div className="pr-1">
<OpenIcon size={12} color="$neutral-50" />
</div>
<Text size={13} weight="medium" color="$neutral-100">
42 issues
</Text> </Text>
<Text size={13} weight="medium" color="$neutral-50"> </div>
<div className="flex items-center">
<div className="pr-1">
<OpenIcon size={12} color="$neutral-50" />
</div>
<Text size={13} weight="medium" color="$neutral-100">
32 32
</Text> </Text>
</div> </div>
</div>
</Link> </Link>
</Shadow>
))} ))}
</div> </div>
</div> </div>