Skip to content

Commit 10ccd86

Browse files
yevkimyevkim
authored
Merge pull request #173 from hongmei-codes/feat/170-render-additional-fields-in-schemes
Further improvements to scheme page
2 parents 0752e5a + 4a5b124 commit 10ccd86

File tree

2 files changed

+46
-92
lines changed

2 files changed

+46
-92
lines changed

‎frontend/src/app/schemes/[schemeId]/page.tsx‎

Lines changed: 29 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -232,62 +232,32 @@ export default function SchemePage() {
232232
</div>
233233
</div>
234234

235-
{/* Detail Card */}
235+
{/* Description Card */}
236236
<Card className="p-6 text-slate-700">
237-
<CardHeader><h1 className="text-xl font-bold">Details</h1></CardHeader>
237+
<CardHeader><h1 className="text-xl font-bold">Description</h1></CardHeader>
238238
<CardBody>
239239
{scheme.description && <Markdown className={`mb-5 ${styles.showMarker}`}>{scheme.description}</Markdown>}
240-
<div className="flex flex-col gap-2 mt-6">
241-
{scheme.link && (
242-
<div className="flex gap-2">
243-
<span className="font-semibold min-w-20">Website</span>
244-
<Link href={scheme.link} isExternal>
245-
{scheme.link}
246-
</Link>
247-
</div>
248-
)}
249-
{scheme.phone && (
250-
<div className="flex gap-2">
251-
<span className="font-semibold min-w-20">Phone</span>
252-
<span>{scheme.phone}</span>
253-
</div>
254-
)}
255-
{scheme.email && (
256-
<div className="flex gap-2">
257-
<span className="font-semibold min-w-20">Email</span>
258-
<span>{scheme.email}</span>
259-
</div>
260-
)}
261-
{scheme.address && (
262-
<div className="flex gap-2">
263-
<span className="font-semibold min-w-20">Location</span>
264-
<span>{scheme.address}</span>
265-
</div>
266-
)}
267-
</div>
268240
</CardBody>
269241
</Card>
270242

243+
{/* Details Card */}
271244
<Card className="p-6 mt-10 text-slate-700">
272-
<CardHeader><h1 className="text-xl font-bold">Scheme</h1></CardHeader>
245+
<CardHeader><h1 className="text-xl font-bold">Details</h1></CardHeader>
273246
<CardBody>
274247
<div className="sm:flex gap-5 mb-4">
275-
{/* right */}
248+
{/* main details */}
276249
<div className="flex-[2]">
277-
{/*name*/}
278-
<div className="mb-4">
279-
<span className="font-bold uppercase text-xs text-slate-500 mb-2">Name</span>
280-
<p>{scheme.schemeName}</p>
281-
</div>
282250
<div className="sm:flex gap-5 mb-4">
283-
<div className="flex-1 sm:mb-4">
251+
{/* who */}
252+
<div className="flex-1 mb-4">
284253
<span className="font-bold uppercase text-xs text-slate-500 mb-2">Who is it for</span>
285254
{scheme.targetAudience && <ul className="list-disc list-inside marker:text-slate-500">
286255
{scheme.targetAudience.split(",").map((target) => (
287256
<li key={target}>{target.trim()}</li>
288257
))}
289258
</ul>}
290259
</div>
260+
{/* what */}
291261
<div className="flex-1">
292262
<span className="font-bold uppercase text-xs text-slate-500 mb-2">What it gives</span>
293263
{scheme.benefits && <ul className="list-disc list-inside marker:text-slate-500">
@@ -306,7 +276,7 @@ export default function SchemePage() {
306276
{scheme.howToApply && <p>{scheme.howToApply}</p>}
307277
</div>
308278
</div>
309-
{/* left */}
279+
{/* other details */}
310280
<div className="flex-1">
311281
{/* type */}
312282
<div className="mb-4">
@@ -325,21 +295,26 @@ export default function SchemePage() {
325295
))}
326296
</div>}
327297
</div>
328-
{/* keywords */}
329-
<div className="mb-4">
330-
<span className="font-bold uppercase text-xs text-slate-500 mb-2">Useful keywords</span>
331-
{scheme.searchBooster && <div className="flex flex-wrap gap-2">
332-
{scheme.searchBooster.split(",").map((booster) => (
333-
<Chip
334-
key={booster}
335-
size="sm"
336-
radius="sm"
337-
variant="flat"
338-
>
339-
{booster.trim()}
340-
</Chip>
341-
))}
342-
</div>}
298+
{/* contacts */}
299+
<div className="flex flex-col gap-2 mt-6">
300+
{scheme.phone && (
301+
<div>
302+
<p className="font-bold uppercase text-xs text-slate-500 mb-1">Phone</p>
303+
<p>{scheme.phone}</p>
304+
</div>
305+
)}
306+
{scheme.email && (
307+
<div>
308+
<p className="font-bold uppercase text-xs text-slate-500 mb-1">Email</p>
309+
<p>{scheme.email}</p>
310+
</div>
311+
)}
312+
{scheme.address && (
313+
<div>
314+
<p className="font-bold uppercase text-xs text-slate-500 mb-1">Location</p>
315+
<p>{scheme.address}</p>
316+
</div>
317+
)}
343318
</div>
344319
</div>
345320
</div>

‎frontend/src/components/schemes/scheme-skeleton.tsx‎

Lines changed: 17 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -19,31 +19,18 @@ export default function SchemeSkeleton() {
1919
</div>
2020
</div>
2121

22-
{/* Details section */}
22+
{/* Description section */}
2323
<div className="p-6 mt-4">
2424
<Skeleton className="h-7 w-32 mb-6 rounded-lg" />
2525
<Skeleton className="h-5 w-full mb-2 rounded-lg" />
2626
<Skeleton className="h-5 w-full mb-2 rounded-lg" />
2727
<Skeleton className="h-5 w-full mb-2 rounded-lg" />
2828
<Skeleton className="h-5 w-full mb-2 rounded-lg" />
29-
30-
<div className="flex gap-2 w-full mt-4">
31-
<Skeleton className="h-5 w-32 rounded-lg" />
32-
<Skeleton className="h-5 flex-1 rounded-lg" />
33-
</div>
34-
<div className="flex gap-2 w-full mt-4">
35-
<Skeleton className="h-5 w-32 rounded-lg" />
36-
<Skeleton className="h-5 flex-1 rounded-lg" />
37-
</div>
38-
<div className="flex gap-2 w-full mt-4">
39-
<Skeleton className="h-5 w-32 rounded-lg" />
40-
<Skeleton className="h-5 flex-1 rounded-lg" />
41-
</div>
4229
</div>
4330

44-
{/* Scheme section */}
31+
{/* details section */}
4532
<div className="p-6 mt-4 sm:flex gap-7">
46-
{/* left */}
33+
{/* main */}
4734
<div className="flex-[2]">
4835
<Skeleton className="h-7 w-32 mb-6 rounded-lg" />
4936

@@ -107,7 +94,7 @@ export default function SchemeSkeleton() {
10794
</div>
10895
</div>
10996

110-
{/* right */}
97+
{/* other */}
11198
<div className="flex-1">
11299
<div className="mt-6">
113100
<Skeleton className="h-4 w-20 mb-3 rounded-lg" />
@@ -120,35 +107,27 @@ export default function SchemeSkeleton() {
120107
</div>
121108
</div>
122109
<div className="mt-6">
123-
<Skeleton className="h-4 w-20 mb-3 rounded-lg" />
124-
<div className="flex flex-wrap gap-2">
125-
<Skeleton className="h-5 w-24 rounded-xl" />
126-
<Skeleton className="h-5 w-20 rounded-xl" />
127-
<Skeleton className="h-5 w-24 rounded-xl" />
128-
<Skeleton className="h-5 w-24 rounded-xl" />
129-
<Skeleton className="h-5 w-22 rounded-xl" />
130-
<Skeleton className="h-5 w-20 rounded-xl" />
131-
<Skeleton className="h-5 w-24 rounded-xl" />
132-
<Skeleton className="h-5 w-24 rounded-xl" />
133-
<Skeleton className="h-5 w-20 rounded-xl" />
134-
<Skeleton className="h-5 w-18 rounded-xl" />
135-
<Skeleton className="h-5 w-24 rounded-xl" />
136-
<Skeleton className="h-5 w-24 rounded-xl" />
137-
<Skeleton className="h-5 w-10 rounded-xl" />
138-
<Skeleton className="h-5 w-24 rounded-xl" />
139-
<Skeleton className="h-5 w-20 rounded-xl" />
140-
<Skeleton className="h-5 w-24 rounded-xl" />
141-
<Skeleton className="h-5 w-28 rounded-xl" />
110+
<div className="flex flex-col gap-2 w-full mt-4">
111+
<Skeleton className="h-5 w-32 rounded-lg" />
112+
<Skeleton className="h-5 w-full rounded-lg" />
113+
</div>
114+
<div className="flex flex-col gap-2 w-full mt-4">
115+
<Skeleton className="h-5 w-32 rounded-lg" />
116+
<Skeleton className="h-5 w-full rounded-lg" />
117+
</div>
118+
<div className="flex flex-col gap-2 w-full mt-4">
119+
<Skeleton className="h-5 w-32 rounded-lg" />
120+
<Skeleton className="h-5 w-full rounded-lg" />
142121
</div>
143122
</div>
144123
</div>
145124
</div>
146125

147-
<div className="my-10 flex justify-end">
126+
<div className="flex justify-end">
148127
<Skeleton className="h-10 w-40 rounded-full" />
149128
</div>
150129

151-
<Skeleton className="h-16 w-full" />
130+
<Skeleton className="h-16 my-10 w-full" />
152131
</>
153132
);
154133
}

0 commit comments

Comments
 (0)