Skip to content

Commit 43f33c8

Browse files
AllanKoderAllanKoder
committed
UI Change
1 parent 4f73596 commit 43f33c8

1 file changed

Lines changed: 171 additions & 64 deletions

File tree

‎resources/js/Components/Resources/ResourceOverview.vue‎

Lines changed: 171 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ const props = defineProps({
1919

2020
<template>
2121
<!-- Header Section -->
22-
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-sm shadow-sm px-4 py-4">
22+
<div
23+
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-sm shadow-sm px-4 py-4"
24+
>
2325
<div class="flex items-start gap-4">
2426
<!-- Image Section -->
2527
<div class="shrink-0 flex flex-row my-auto gap-3">
@@ -39,109 +41,199 @@ const props = defineProps({
3941

4042
<!-- Content -->
4143
<div class="flex-1 min-w-0">
42-
<!-- Primary info row -->
43-
<div class="flex items-start gap-3 mb-3 flex-wrap">
44-
<Icon icon="mdi:star" width="14" height="14" class="text-primary mt-1" />
44+
<!-- Title -->
45+
<h1
46+
class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 text-balance"
47+
>
48+
{{ props.resource.name }}
49+
</h1>
50+
51+
<!-- Description -->
52+
<p
53+
class="text-sm text-gray-600 dark:text-gray-400 mb-3 leading-relaxed whitespace-pre-line"
54+
>
55+
{{ props.resource.description }}
56+
</p>
4557

46-
<!-- Topics -->
47-
<div class="flex items-center gap-2 flex-wrap">
48-
<span class="text-xs font-semibold text-gray-700 dark:text-gray-300">Topics:</span>
49-
<div class="flex items-center gap-1.5">
58+
<!-- Two Column Grid -->
59+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
60+
<!-- Left Column - Primary Info -->
61+
<div
62+
class="space-y-2 rounded-md p-3 border border-gray-200 dark:border-gray-700"
63+
>
64+
<!-- Topics -->
65+
<div class="flex items-center gap-1.5 flex-wrap">
66+
<Icon
67+
icon="mdi:lightbulb-outline"
68+
width="12"
69+
height="12"
70+
class="text-gray-500 dark:text-gray-400"
71+
/>
72+
<span
73+
class="text-xs font-semibold text-gray-600 dark:text-gray-400"
74+
>Topics:</span
75+
>
5076
<span
5177
v-for="topic in props.resource.topics_tags"
5278
:key="topic"
5379
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 bg-transparent"
5480
>
55-
<Icon icon="mdi:lightbulb-outline" width="12" height="12" class="mr-1" />
5681
{{ topic }}
5782
</span>
5883
</div>
59-
</div>
6084

61-
<!-- Difficulty -->
62-
<div v-if="props.resource.difficulties?.length" class="flex items-center gap-2 flex-wrap">
63-
<span class="text-xs font-semibold text-gray-700 dark:text-gray-300">Difficulty:</span>
64-
<div class="flex items-center gap-1.5">
85+
<!-- Difficulty -->
86+
<div
87+
v-if="props.resource.difficulties?.length"
88+
class="flex items-center gap-1.5 flex-wrap"
89+
>
90+
<Icon
91+
:icon="
92+
difficultyIcons[
93+
props.resource.difficulties[0]
94+
]
95+
"
96+
width="12"
97+
height="12"
98+
class="text-gray-500 dark:text-gray-400"
99+
/>
100+
<span
101+
class="text-xs font-semibold text-gray-600 dark:text-gray-400"
102+
>Difficulty:</span
103+
>
65104
<span
66105
v-for="difficulty in props.resource.difficulties"
67106
:key="difficulty"
68-
class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-transparent text-primaryDark border border-primary/20"
107+
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 bg-transparent"
69108
>
70-
<Icon :icon="difficultyIcons[difficulty]" width="12" height="12" class="mr-1" />
109+
<Icon
110+
:icon="difficultyIcons[difficulty]"
111+
width="10"
112+
height="10"
113+
class="mr-1"
114+
/>
71115
{{ difficultyLabels[difficulty] }}
72116
</span>
73117
</div>
74-
</div>
75118

76-
<!-- Pricing -->
77-
<div class="flex items-center gap-2 flex-wrap">
78-
<span class="text-xs font-semibold text-gray-700 dark:text-gray-300">Pricing:</span>
79-
<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-transparent text-primaryDark border border-primary/20">
80-
<Icon :icon="pricingIcons[props.resource.pricing]" width="12" height="12" class="mr-1" />
81-
{{ pricingLabels[props.resource.pricing] }}
82-
</span>
119+
<!-- Pricing -->
120+
<div class="flex items-center gap-1.5 flex-wrap">
121+
<Icon
122+
:icon="pricingIcons[props.resource.pricing]"
123+
width="12"
124+
height="12"
125+
class="text-gray-500 dark:text-gray-400"
126+
/>
127+
<span
128+
class="text-xs font-semibold text-gray-600 dark:text-gray-400"
129+
>Pricing:</span
130+
>
131+
<span
132+
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 bg-transparent"
133+
>
134+
<Icon
135+
:icon="pricingIcons[props.resource.pricing]"
136+
width="10"
137+
height="10"
138+
class="mr-1"
139+
/>
140+
{{ pricingLabels[props.resource.pricing] }}
141+
</span>
142+
</div>
83143
</div>
84-
</div>
85-
86-
<!-- Title -->
87-
<h1 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 text-balance">
88-
{{ props.resource.name }}
89-
</h1>
90144

91-
<!-- Description -->
92-
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3 leading-relaxed whitespace-pre-line">
93-
{{ props.resource.description }}
94-
</p>
145+
<!-- Right Column - Secondary Info -->
146+
<div
147+
class="space-y-2 rounded-md p-3 border border-gray-200 dark:border-gray-700"
148+
>
149+
<!-- Platforms -->
150+
<div class="flex items-center gap-1.5 flex-wrap">
151+
<Icon
152+
icon="mdi:devices"
153+
width="12"
154+
height="12"
155+
class="text-gray-500 dark:text-gray-400"
156+
/>
157+
<span
158+
class="text-xs font-semibold text-gray-600 dark:text-gray-400"
159+
>Platforms:</span
160+
>
161+
<span
162+
v-for="platform in props.resource.platforms"
163+
:key="platform"
164+
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 bg-transparent"
165+
>
166+
<Icon
167+
:icon="platformIcons[platform]"
168+
width="10"
169+
height="10"
170+
class="mr-1"
171+
/>
172+
{{ platformLabels[platform] }}
173+
</span>
174+
</div>
95175

96-
<!-- Secondary info row -->
97-
<div class="flex items-left gap-2 flex-col mb-3">
98-
<!-- Platforms -->
99-
<div class="flex items-center gap-1.5 flex-wrap">
100-
<span class="text-xs font-semibold text-gray-700 dark:text-gray-300">Platforms:</span>
101-
<span
102-
v-for="platform in props.resource.platforms"
103-
:key="platform"
104-
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 bg-transparent"
176+
<!-- Languages -->
177+
<div
178+
v-if="
179+
props.resource.programming_languages_tags
180+
?.length
181+
"
182+
class="flex items-center gap-1.5 flex-wrap"
105183
>
106-
<Icon :icon="platformIcons[platform]" width="10" height="10" class="mr-1" />
107-
{{ platformLabels[platform] }}
108-
</span>
109-
</div>
110-
<!-- Languages -->
111-
<div v-if="props.resource.programming_languages_tags?.length" class="flex items-center gap-2 flex-wrap">
112-
<span class="text-xs font-semibold text-gray-700 dark:text-gray-300">Languages:</span>
113-
<div class="flex items-center gap-1.5 flex-wrap">
184+
<Icon
185+
icon="mdi:code-tags"
186+
width="12"
187+
height="12"
188+
class="text-gray-500 dark:text-gray-400"
189+
/>
190+
<span
191+
class="text-xs font-semibold text-gray-600 dark:text-gray-400"
192+
>Languages:</span
193+
>
114194
<span
115195
v-for="language in props.resource.programming_languages_tags"
116196
:key="language"
117197
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 bg-transparent"
118198
>
119-
<Icon icon="mdi:code-tags" width="10" height="10" class="mr-1" />
120199
{{ language }}
121200
</span>
122201
</div>
123-
</div>
124202

125-
<!-- Tags -->
126-
<div v-if="props.resource.general_tags?.length" class="flex items-center gap-2 flex-wrap">
127-
<span class="text-xs font-semibold text-gray-700 dark:text-gray-300">Tags:</span>
128-
<div class="flex items-center gap-1.5 flex-wrap">
203+
<!-- Tags -->
204+
<div
205+
v-if="props.resource.general_tags?.length"
206+
class="flex items-center gap-1.5 flex-wrap"
207+
>
208+
<Icon
209+
icon="mdi:label-outline"
210+
width="12"
211+
height="12"
212+
class="text-gray-500 dark:text-gray-400"
213+
/>
214+
<span
215+
class="text-xs font-semibold text-gray-600 dark:text-gray-400"
216+
>Tags:</span
217+
>
129218
<span
130219
v-for="tag in props.resource.general_tags"
131220
:key="tag"
132221
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 bg-transparent"
133222
>
134-
<Icon icon="mdi:label-outline" width="10" height="10" class="mr-1" />
135223
{{ tag }}
136224
</span>
137225
</div>
138226
</div>
139227
</div>
140228

141-
<div class="my-2 mt-4 border-t border-gray-200 dark:border-gray-700"></div>
229+
<div
230+
class="my-2 mt-4 border-t border-gray-200 dark:border-gray-700"
231+
></div>
142232

143233
<!-- Bottom actions -->
144-
<div class="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
234+
<div
235+
class="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400"
236+
>
145237
<a
146238
:href="props.resource.page_url"
147239
target="_blank"
@@ -156,12 +248,27 @@ const props = defineProps({
156248
v-if="props.resource.review_summary?.overall_rating > 0"
157249
class="flex items-center gap-1"
158250
>
159-
<Icon icon="mdi:star" width="16" height="16" class="text-primary" />
160-
<span class="font-medium text-gray-900 dark:text-gray-100">
161-
{{ Number(props.resource.review_summary?.overall_rating || 0).toFixed(1) }}
251+
<Icon
252+
icon="mdi:star"
253+
width="16"
254+
height="16"
255+
class="text-primary"
256+
/>
257+
<span
258+
class="font-medium text-gray-900 dark:text-gray-100"
259+
>
260+
{{
261+
Number(
262+
props.resource.review_summary
263+
?.overall_rating || 0
264+
).toFixed(1)
265+
}}
162266
</span>
163267
<span class="text-gray-500 dark:text-gray-400">
164-
({{ props.resource.review_summary?.review_count || 0 }} reviews)
268+
({{
269+
props.resource.review_summary?.review_count || 0
270+
}}
271+
reviews)
165272
</span>
166273
</div>
167274
</div>

0 commit comments

Comments
 (0)