Skip to content

Commit dd8ce85

Browse files
tpSpacetpSpace
committed
re style
1 parent 7021570 commit dd8ce85

2 files changed

Lines changed: 22 additions & 23 deletions

File tree

‎app/marketplace/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function MarketplaceLayout({
1212
<MarketplaceFilterProvider>
1313
<div className="flex min-h-screen w-full flex-row overflow-hidden font-sans antialiased selection:bg-accent-lime selection:text-ink">
1414
<MarketplaceSidebar />
15-
<main className="flex-1 flex flex-col h-screen overflow-hidden relative bg-background-light">
15+
<main className="flex-1 flex flex-col h-screen overflow-y-auto relative bg-background-light">
1616
{children}
1717
</main>
1818
</div>

‎app/marketplace/page.tsx‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export default function MarketplacePage() {
140140
</div>
141141
</header>
142142

143-
<div className="px-8 mt-6">
143+
<div className="px-8 mt-6 pb-12">
144144
<div className="flex items-center justify-between mb-6">
145145
<h2 className="text-xl font-bold tracking-tight text-ink flex items-center gap-2">
146146
All Listings <span className="text-gray-400 text-base font-normal ml-1">({validListings.length} items)</span>
@@ -193,9 +193,8 @@ export default function MarketplacePage() {
193193
<article
194194
key={listing.id}
195195
onClick={() => handleViewListing(listing)}
196-
className={`flex flex-col rounded-xl border-2 border-ink bg-white overflow-hidden cursor-pointer hover:shadow-hard transition-all ${
197-
isOwner(listing) ? 'ring-2 ring-primary ring-offset-2' : ''
198-
}`}
196+
className={`flex flex-col rounded-xl border-2 border-ink bg-white overflow-hidden cursor-pointer hover:shadow-hard transition-all ${isOwner(listing) ? 'ring-2 ring-primary ring-offset-2' : ''
197+
}`}
199198
>
200199
{/* Image/Preview Area */}
201200
<div className="relative h-36 bg-linear-to-br from-gray-800 to-gray-900 flex items-center justify-center">
@@ -206,14 +205,14 @@ export default function MarketplacePage() {
206205
</svg>
207206
</div>
208207
<span className="material-symbols-outlined text-5xl text-gray-600">dataset</span>
209-
208+
210209
<div className="absolute top-3 left-3 flex flex-col gap-1">
211210
<span className="rounded bg-accent-lime text-ink px-2 py-0.5 text-[10px] font-bold border border-ink">ACTIVE</span>
212211
{isOwner(listing) && (
213212
<span className="rounded bg-primary text-white px-2 py-0.5 text-[10px] font-bold">YOUR LISTING</span>
214213
)}
215214
</div>
216-
215+
217216
{/* Explorer Links */}
218217
<div className="absolute top-3 right-3 flex gap-1" onClick={(e) => e.stopPropagation()}>
219218
<a
@@ -224,10 +223,10 @@ export default function MarketplacePage() {
224223
title="View on SuiScan"
225224
>
226225
<svg className="w-4 h-4" viewBox="0 0 234 234" fill="none">
227-
<path d="M0 100C0 65 0 47.5 6.8 33C12.7 21.3 22.3 11.8 34 5.8C47.3 0 64.7 0 99.5 0H133.8C168.6 0 186 0 199.3 6.8C211 12.8 220.6 22.3 226.5 34C233.3 47.4 233.3 64.9 233.3 99.8V134.2C233.3 169.1 233.3 186.6 226.5 199.9C220.6 211.6 211 221.2 199.3 227.2C186 234 168.6 234 133.8 234H99.5C64.7 234 47.3 234 34 227.2C22.3 221.2 12.7 211.7 6.8 200C0 186.6 0 169.1 0 134.2V100Z" fill="#4C72FF"/>
228-
<path d="M177 87C178.7 85.9 180.8 85.6 182.4 86.3C183.2 86.6 183.9 87.1 184.3 87.8C184.7 88.5 185 89.4 184.9 90.2L181.4 148.2C181 155.7 178.2 163.4 173.6 170.4C160.4 190.4 133.2 200 112.8 191.8C107.1 189.5 102.5 186 99.2 181.7C100 181.8 100.8 181.7 101.5 181.7C122.4 181.7 143.5 170.3 155.1 152.7C160.7 144.1 164 134.7 164.6 125.6L166.5 93.3L177 87Z" fill="white"/>
229-
<path d="M150 63.6C151.7 62.5 153.8 62.3 155.5 62.9C156.3 63.3 156.9 63.8 157.4 64.5C157.9 65.2 158.1 66.1 158 66.9L154.5 125C154 132.5 151.3 140.1 146.7 147.1C133.5 167.2 106.3 176.7 85.9 168.5C80.1 166.2 75.6 162.7 72.3 158.4C73.1 158.4 73.9 158.4 74.6 158.4C95.6 158.4 116.6 147.1 128.2 129.4C133.9 120.8 137.1 111.4 137.7 102.3L139.6 70L150 63.6Z" fill="white"/>
230-
<path d="M123 40.3C124.7 39.2 126.8 39 128.5 39.6C129.2 39.9 129.9 40.5 130.3 41.2C130.8 41.9 131 42.7 130.9 43.5L127.4 101.6C127 109.1 124.2 116.7 119.6 123.7C106.4 143.8 79.2 153.3 58.8 145.1C38.5 136.9 32.7 114 45.9 93.9C50.5 86.9 57.1 80.7 64.6 76.1L123 40.3Z" fill="white"/>
226+
<path d="M0 100C0 65 0 47.5 6.8 33C12.7 21.3 22.3 11.8 34 5.8C47.3 0 64.7 0 99.5 0H133.8C168.6 0 186 0 199.3 6.8C211 12.8 220.6 22.3 226.5 34C233.3 47.4 233.3 64.9 233.3 99.8V134.2C233.3 169.1 233.3 186.6 226.5 199.9C220.6 211.6 211 221.2 199.3 227.2C186 234 168.6 234 133.8 234H99.5C64.7 234 47.3 234 34 227.2C22.3 221.2 12.7 211.7 6.8 200C0 186.6 0 169.1 0 134.2V100Z" fill="#4C72FF" />
227+
<path d="M177 87C178.7 85.9 180.8 85.6 182.4 86.3C183.2 86.6 183.9 87.1 184.3 87.8C184.7 88.5 185 89.4 184.9 90.2L181.4 148.2C181 155.7 178.2 163.4 173.6 170.4C160.4 190.4 133.2 200 112.8 191.8C107.1 189.5 102.5 186 99.2 181.7C100 181.8 100.8 181.7 101.5 181.7C122.4 181.7 143.5 170.3 155.1 152.7C160.7 144.1 164 134.7 164.6 125.6L166.5 93.3L177 87Z" fill="white" />
228+
<path d="M150 63.6C151.7 62.5 153.8 62.3 155.5 62.9C156.3 63.3 156.9 63.8 157.4 64.5C157.9 65.2 158.1 66.1 158 66.9L154.5 125C154 132.5 151.3 140.1 146.7 147.1C133.5 167.2 106.3 176.7 85.9 168.5C80.1 166.2 75.6 162.7 72.3 158.4C73.1 158.4 73.9 158.4 74.6 158.4C95.6 158.4 116.6 147.1 128.2 129.4C133.9 120.8 137.1 111.4 137.7 102.3L139.6 70L150 63.6Z" fill="white" />
229+
<path d="M123 40.3C124.7 39.2 126.8 39 128.5 39.6C129.2 39.9 129.9 40.5 130.3 41.2C130.8 41.9 131 42.7 130.9 43.5L127.4 101.6C127 109.1 124.2 116.7 119.6 123.7C106.4 143.8 79.2 153.3 58.8 145.1C38.5 136.9 32.7 114 45.9 93.9C50.5 86.9 57.1 80.7 64.6 76.1L123 40.3Z" fill="white" />
231230
</svg>
232231
</a>
233232
<a
@@ -238,22 +237,22 @@ export default function MarketplacePage() {
238237
title="View on SuiVision"
239238
>
240239
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none">
241-
<path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V18C24 21.3137 21.3137 24 18 24H6C2.68629 24 0 21.3137 0 18V6Z" fill="#4DA2FF"/>
242-
<path d="M6.99748 5.28362L6.99748 11.0148L8.71768 12.0008L6.99731 12.987L6.99731 18.7182L11.9972 21.584L16.9971 18.7182L16.9971 12.9866L15.2769 12.0007L16.9973 11.0147L16.9973 5.28308L11.997 2.41732L6.99748 5.28362ZM11.6464 3.42366L11.6464 7.94789L7.69961 10.2105L7.69961 5.68623L11.6464 3.42366ZM12.3482 20.5781L12.3482 16.0535L16.2954 13.7912L16.2954 18.3159L12.3482 20.5781ZM15.9441 13.1879L11.9973 15.4501L8.05048 13.1879L9.41994 12.4031L11.9973 13.8803L14.575 12.4031L15.9441 13.1879ZM11.9973 10.1208L9.41964 11.5982L8.05048 10.8134L11.9973 8.55113L15.9445 10.8134L14.575 11.5982L11.9973 10.1208Z" fill="white"/>
240+
<path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V18C24 21.3137 21.3137 24 18 24H6C2.68629 24 0 21.3137 0 18V6Z" fill="#4DA2FF" />
241+
<path d="M6.99748 5.28362L6.99748 11.0148L8.71768 12.0008L6.99731 12.987L6.99731 18.7182L11.9972 21.584L16.9971 18.7182L16.9971 12.9866L15.2769 12.0007L16.9973 11.0147L16.9973 5.28308L11.997 2.41732L6.99748 5.28362ZM11.6464 3.42366L11.6464 7.94789L7.69961 10.2105L7.69961 5.68623L11.6464 3.42366ZM12.3482 20.5781L12.3482 16.0535L16.2954 13.7912L16.2954 18.3159L12.3482 20.5781ZM15.9441 13.1879L11.9973 15.4501L8.05048 13.1879L9.41994 12.4031L11.9973 13.8803L14.575 12.4031L15.9441 13.1879ZM11.9973 10.1208L9.41964 11.5982L8.05048 10.8134L11.9973 8.55113L15.9445 10.8134L14.575 11.5982L11.9973 10.1208Z" fill="white" />
243242
</svg>
244243
</a>
245244
</div>
246245
</div>
247-
246+
248247
{/* Content */}
249248
<div className="p-4 flex flex-col flex-1">
250249
<h3 className="text-base font-bold text-ink mb-1 line-clamp-2">{listing.name}</h3>
251-
250+
252251
{/* Object ID */}
253252
<p className="text-[10px] text-gray-400 font-mono mb-1 truncate" title={listing.id}>
254253
ID: {listing.id.slice(0, 8)}...{listing.id.slice(-6)}
255254
</p>
256-
255+
257256
{/* Blob ID with Walrus link */}
258257
<div className="flex items-center gap-1 mb-3" onClick={(e) => e.stopPropagation()}>
259258
<p className="text-[10px] text-gray-400 font-mono truncate flex-1" title={listing.blobId}>
@@ -267,15 +266,15 @@ export default function MarketplacePage() {
267266
title="View on WalrusScan"
268267
>
269268
<svg className="w-3 h-3" viewBox="0 0 24 24" fill="none">
270-
<circle cx="12" cy="10" r="8" fill="#36B5A8"/>
271-
<ellipse cx="12" cy="22" rx="6" ry="2" fill="#36B5A8" opacity="0.5"/>
272-
<circle cx="9" cy="8" r="1.5" fill="white"/>
273-
<circle cx="15" cy="8" r="1.5" fill="white"/>
274-
<path d="M9 13C9 13 10.5 15 12 15C13.5 15 15 13 15 13" stroke="white" strokeWidth="1.5" strokeLinecap="round"/>
269+
<circle cx="12" cy="10" r="8" fill="#36B5A8" />
270+
<ellipse cx="12" cy="22" rx="6" ry="2" fill="#36B5A8" opacity="0.5" />
271+
<circle cx="9" cy="8" r="1.5" fill="white" />
272+
<circle cx="15" cy="8" r="1.5" fill="white" />
273+
<path d="M9 13C9 13 10.5 15 12 15C13.5 15 15 13 15 13" stroke="white" strokeWidth="1.5" strokeLinecap="round" />
275274
</svg>
276275
</a>
277276
</div>
278-
277+
279278
{/* Stats */}
280279
<div className="grid grid-cols-2 gap-4 py-3 border-t border-gray-200">
281280
<div>
@@ -287,7 +286,7 @@ export default function MarketplacePage() {
287286
<p className="text-sm font-bold text-accent-lime">{formatSize(Number(listing.totalSize))}</p>
288287
</div>
289288
</div>
290-
289+
291290
{/* Seller */}
292291
<div className="flex items-center gap-1 pt-3 border-t border-gray-200 text-xs text-gray-400">
293292
<span className="material-symbols-outlined text-sm">person</span>

0 commit comments

Comments
 (0)