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 => (
<Link <Shadow key={repo.name}>
key={repo.name} <Link
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"
> >
<Text size={15} weight="semibold"> <div className="flex flex-col">
{repo.name} <Text size={15} weight="semibold">
</Text> {repo.name}
<Text size={15} color="$neutral-50"> </Text>
{repo.description} <Text size={15} color="$neutral-50">
</Text> {repo.description}
</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">
Public <div className="pr-1">
</Text> <UnlockedIcon size={12} color="$neutral-50" />
<Text size={13} weight="medium" color="$neutral-50"> </div>
42 Issues <Text size={13} weight="medium" color="$neutral-100">
</Text> Public
<Text size={13} weight="medium" color="$neutral-50"> </Text>
32 </div>
</Text> <div className="flex items-center">
</div> <div className="pr-1">
</Link> <OpenIcon size={12} color="$neutral-50" />
</div>
<Text size={13} weight="medium" color="$neutral-100">
42 issues
</Text>
</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
</Text>
</div>
</div>
</Link>
</Shadow>
))} ))}
</div> </div>
</div> </div>