|
16 | 16 | import React, { useState } from 'react'; |
17 | 17 | import { useRouter } from 'next/navigation'; |
18 | 18 | import { clsx } from 'clsx'; |
19 | | -import { ArrowLeft, Search } from 'lucide-react'; |
| 19 | +import { ArrowLeft, ExternalLink, Search } from 'lucide-react'; |
20 | 20 | import { useLang } from '@/app/context/LangContext'; |
21 | 21 | import { modelMetadata, categories } from '@/app/config/modelMetadata'; |
| 22 | +import { |
| 23 | + Tooltip, |
| 24 | + TooltipContent, |
| 25 | + TooltipProvider, |
| 26 | + TooltipTrigger, |
| 27 | +} from '@/app/components/ui/tooltip'; |
22 | 28 |
|
23 | 29 | export default function GalleryPage() { |
24 | 30 | const { theme, t } = useLang(); |
@@ -151,43 +157,68 @@ export default function GalleryPage() { |
151 | 157 | </div> |
152 | 158 |
|
153 | 159 | {/* Model Grid */} |
154 | | - <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
155 | | - {filteredModels.map((model) => { |
156 | | - return ( |
157 | | - <div |
158 | | - key={model.key} |
159 | | - onClick={() => { |
160 | | - return handleModelClick(model.key); |
161 | | - }} |
162 | | - className={clsx( |
163 | | - 'rounded-lg border border-border shadow-sm cursor-pointer transition-all duration-200', |
164 | | - cardBgClass, |
165 | | - hoverClass, |
166 | | - 'hover:shadow-lg hover:border-primary/50', |
167 | | - )} |
168 | | - > |
169 | | - <div className="p-6"> |
170 | | - <div className="flex items-start justify-between mb-3"> |
171 | | - <h3 className={clsx('text-xl font-semibold', textClass)}> |
172 | | - {t(model.name)} |
173 | | - </h3> |
174 | | - <span |
175 | | - className={clsx( |
176 | | - 'px-2 py-1 text-xs font-medium rounded', |
177 | | - 'bg-primary/10 text-primary', |
178 | | - )} |
179 | | - > |
180 | | - {t(model.category)} |
181 | | - </span> |
| 160 | + <TooltipProvider delayDuration={700} skipDelayDuration={0}> |
| 161 | + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| 162 | + {filteredModels.map((model) => { |
| 163 | + return ( |
| 164 | + <div |
| 165 | + key={model.key} |
| 166 | + className={clsx( |
| 167 | + 'rounded-lg border border-border shadow-sm transition-all duration-200', |
| 168 | + cardBgClass, |
| 169 | + 'hover:shadow-lg', |
| 170 | + )} |
| 171 | + > |
| 172 | + <div className="p-6"> |
| 173 | + <div className="flex items-start justify-between mb-3"> |
| 174 | + <h3 className={clsx('text-xl font-semibold', textClass)}> |
| 175 | + {t(model.name)} |
| 176 | + </h3> |
| 177 | + <span |
| 178 | + className={clsx( |
| 179 | + 'px-2 py-1 text-xs font-medium rounded', |
| 180 | + 'bg-primary/10 text-primary', |
| 181 | + )} |
| 182 | + > |
| 183 | + {t(model.category)} |
| 184 | + </span> |
| 185 | + </div> |
| 186 | + <p className={clsx('text-sm mb-4', textClass, 'opacity-70')}> |
| 187 | + {t(model.description)} |
| 188 | + </p> |
| 189 | + <div className="flex justify-end"> |
| 190 | + <Tooltip> |
| 191 | + <TooltipTrigger asChild> |
| 192 | + <button |
| 193 | + onClick={() => { |
| 194 | + handleModelClick(model.key); |
| 195 | + }} |
| 196 | + className={clsx( |
| 197 | + 'inline-flex items-center gap-2 p-2 rounded-lg', |
| 198 | + 'text-sm font-medium transition-all duration-200', |
| 199 | + 'bg-primary text-primary-foreground', |
| 200 | + 'hover:bg-primary/90 hover:shadow-md', |
| 201 | + 'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2', |
| 202 | + )} |
| 203 | + > |
| 204 | + <ExternalLink className="w-4 h-4" /> |
| 205 | + </button> |
| 206 | + </TooltipTrigger> |
| 207 | + <TooltipContent |
| 208 | + className={clsx( |
| 209 | + 'bg-white dark:bg-gray-800 text-primary border border-primary', |
| 210 | + )} |
| 211 | + > |
| 212 | + <p>{t('Load in Editor')}</p> |
| 213 | + </TooltipContent> |
| 214 | + </Tooltip> |
| 215 | + </div> |
182 | 216 | </div> |
183 | | - <p className={clsx('text-sm', textClass, 'opacity-70')}> |
184 | | - {t(model.description)} |
185 | | - </p> |
186 | 217 | </div> |
187 | | - </div> |
188 | | - ); |
189 | | - })} |
190 | | - </div> |
| 218 | + ); |
| 219 | + })} |
| 220 | + </div> |
| 221 | + </TooltipProvider> |
191 | 222 | </div> |
192 | 223 | </div> |
193 | 224 |
|
|
0 commit comments