Skip to content

Commit 0fa9d76

Browse files
jkbktlCopilotfelicio
authored
discover section (#808)
* add ui for discover section * update assets, add skeleton, filtering, types * fix tag color * Create friendly-cats-draw.md * Update apps/hub/src/data/featured-apps.ts Co-authored-by: Copilot <[email protected]> * f bg-size styling * update link for get featured * u * u --------- Co-authored-by: Copilot <[email protected]> Co-authored-by: Felicio <[email protected]>
1 parent 512c80c commit 0fa9d76

File tree

21 files changed

+323
-656
lines changed

21 files changed

+323
-656
lines changed

‎.changeset/friendly-cats-draw.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@status-im/status-network": patch
3+
"hub": patch
4+
---
5+
6+
discover section

‎apps/hub/public/apps/cats-fishing-avatar.png‎

7.87 KB
Loading

‎apps/hub/public/apps/cats-fishing-cover.png‎

-218 KB
Loading

‎apps/hub/public/apps/hashvegas-avatar.png‎

-8.66 KB
Binary file not shown.

‎apps/hub/public/apps/hashvegas-cover.png‎

-108 KB
Binary file not shown.

‎apps/hub/public/apps/status-network-bridge-avatar.png‎

-2.46 KB
Loading

‎apps/hub/src/app/_components/app-card.tsx‎

Lines changed: 77 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,90 @@
11
'use client'
22

3-
interface AppCardProps {
3+
import { ExternalIcon } from '@status-im/icons/20'
4+
import { TwitterIcon } from '@status-im/icons/social'
5+
import { ButtonLink } from '@status-im/status-network/components'
6+
import Image from 'next/image'
7+
8+
type Props = {
49
name: string
510
description: string
6-
category: string
7-
onLaunch: () => void
11+
website: string
12+
twitter?: string
13+
cover: string
14+
icon: string
815
}
916

10-
export function AppCard({
11-
name,
12-
description,
13-
category,
14-
onLaunch,
15-
}: AppCardProps) {
17+
function AppCard(props: Props) {
18+
const { name, description, website, twitter, cover, icon } = props
19+
1620
return (
17-
<div className="rounded-16 border border-neutral-20 bg-white-100 p-5 shadow-1 transition-colors hover:border-neutral-30">
18-
<div className="mb-4">
19-
<div className="mb-2 flex items-center justify-between">
20-
<span className="rounded-full bg-customisation-purple-50/10 px-2 py-0.5 text-13 font-medium text-purple">
21-
{category}
22-
</span>
21+
<div className="flex h-full flex-col rounded-28 border border-neutral-20 bg-white-100 p-2 shadow-2 transition-colors hover:border-neutral-30">
22+
<div className="relative mb-4">
23+
<div className="flex aspect-[12/5] w-full items-center justify-center overflow-hidden rounded-24 bg-neutral-20">
24+
<Image
25+
src={cover}
26+
alt={name}
27+
fill
28+
className="overflow-hidden rounded-24 object-cover"
29+
/>
30+
</div>
31+
<div className="absolute bottom-[-15px] left-2 flex size-20 items-center justify-center overflow-hidden rounded-24 bg-neutral-40 text-11 text-neutral-60">
32+
<Image src={icon} alt={name} fill className="object-cover" />
2333
</div>
24-
<h4 className="mb-2 text-19 font-semibold text-neutral-90">{name}</h4>
25-
<p className="text-13 leading-relaxed text-neutral-60">{description}</p>
2634
</div>
2735

28-
<button
29-
onClick={onLaunch}
30-
className="w-full rounded-16 bg-neutral-10 px-3 py-2.5 text-13 font-medium text-neutral-90 transition-colors hover:bg-neutral-20"
31-
>
32-
Launch App
33-
</button>
36+
<div className="flex flex-1 flex-col gap-1 px-2 pb-2 pt-[10px]">
37+
<h3 className="mb-1 text-27 font-semibold text-neutral-90">{name}</h3>
38+
<p className="mb-auto text-15 font-400 text-neutral-100">
39+
{description}
40+
</p>
41+
<div className="mt-1 flex items-start gap-2">
42+
<ButtonLink
43+
href={website}
44+
target="_blank"
45+
rel="noopener noreferrer"
46+
variant="white"
47+
size="32"
48+
>
49+
{website.replace('https://', '')}{' '}
50+
<ExternalIcon className="size-4 text-neutral-50" />
51+
</ButtonLink>
52+
{twitter && (
53+
<ButtonLink
54+
href={`https://x.com/${twitter}`}
55+
target="_blank"
56+
rel="noopener noreferrer"
57+
variant="white"
58+
size="32"
59+
>
60+
<TwitterIcon className="size-4 text-neutral-50" />
61+
</ButtonLink>
62+
)}
63+
</div>
64+
</div>
3465
</div>
3566
)
3667
}
68+
69+
function AppCardSkeleton() {
70+
return (
71+
<div className="rounded-28 border border-neutral-20 bg-white-100 p-2 shadow-2">
72+
<div className="relative mb-4">
73+
<div className="aspect-[12/5] w-full animate-skeleton overflow-hidden rounded-24 bg-gradient-to-r from-neutral-10 via-white-100 to-neutral-10 bg-[size:400%_400%]" />
74+
<div className="absolute bottom-[-15px] left-2 size-20 animate-skeleton rounded-24 bg-gradient-to-r from-neutral-20 via-white-100 to-neutral-20 bg-[size:400%_400%]" />
75+
</div>
76+
77+
<div className="flex flex-col gap-1 px-2 pb-2 pt-[10px]">
78+
<div className="mb-1 h-8 w-3/4 animate-skeleton rounded-12 bg-gradient-to-r from-neutral-10 via-white-100 to-neutral-10 bg-[size:400%_400%]" />
79+
<div className="h-5 w-full animate-skeleton rounded-8 bg-gradient-to-r from-neutral-10 via-white-100 to-neutral-10 bg-[size:400%_400%]" />
80+
<div className="h-5 w-2/3 animate-skeleton rounded-8 bg-gradient-to-r from-neutral-10 via-white-100 to-neutral-10 bg-[size:400%_400%]" />
81+
<div className="mt-1 flex items-start gap-2">
82+
<div className="h-8 w-32 animate-skeleton rounded-12 bg-gradient-to-r from-neutral-10 via-white-100 to-neutral-10 bg-[size:400%_400%]" />
83+
<div className="size-8 animate-skeleton rounded-12 bg-gradient-to-r from-neutral-10 via-white-100 to-neutral-10 bg-[size:400%_400%]" />
84+
</div>
85+
</div>
86+
</div>
87+
)
88+
}
89+
90+
export { AppCard, AppCardSkeleton }

‎apps/hub/src/app/_components/apps.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import { Button } from '@status-im/components'
21
import { ExternalIcon } from '@status-im/icons/20'
32
import { TwitterIcon } from '@status-im/icons/social'
43
import { ButtonLink } from '@status-im/status-network/components'
54
import {
65
CATS_FISHING_URL,
7-
HASHVEGAS_URL,
86
STATUS_NETWORK_BRIDGE_URL,
97
} from '@status-im/status-network/config'
108
import { cx } from 'cva'
@@ -23,9 +21,9 @@ const Apps = () => {
2321
Explore curated Apps and services built on Status Network
2422
</p>
2523
</div>
26-
<Button variant="outline" size="32">
27-
All 254 apps
28-
</Button>
24+
<ButtonLink href="/discover" variant="outline" size="32">
25+
Explore all apps
26+
</ButtonLink>
2927
</div>
3028
<div className="mb-24 grid gap-6 lg:grid-cols-2 xl:grid-cols-3">
3129
<GameCard
@@ -44,14 +42,6 @@ const Apps = () => {
4442
twitter="StatusL2"
4543
icon="/apps/status-network-bridge-avatar.png"
4644
/>
47-
<GameCard
48-
title="Hash Vegas"
49-
description="Fair and transparent onchain gaming"
50-
image="/apps/hashvegas-cover.png"
51-
website={HASHVEGAS_URL}
52-
twitter="Hashvegas_Offi"
53-
icon="/apps/hashvegas-avatar.png"
54-
/>
5545
</div>
5646
</section>
5747
)

0 commit comments

Comments
 (0)