1- import TagComp from '../TagComp'
21import VoteButton from '../VoteButton'
32import type { Snippet } from '@/types/snippet'
3+ import { Link } from '@tanstack/react-router'
44
55interface SnippetInfoProps {
66 snippet : Snippet
@@ -29,18 +29,32 @@ export default function SnippetInfo({ snippet }: SnippetInfoProps) {
2929 < span className = "font-medium text-gray-700 dark:text-gray-300" >
3030 Created by:
3131 </ span > { ' ' }
32- < span className = "text-gray-900 dark:text-gray-100" >
33- { snippet . author || snippet . createdBy . username }
34- </ span >
32+ { snippet . author ? (
33+ < span className = "text-gray-900 dark:text-gray-100" >
34+ { snippet . author }
35+ </ span >
36+ ) : (
37+ < Link
38+ to = "/snippets"
39+ search = { { userId : snippet . createdBy . id } }
40+ className = "text-blue-600 dark:text-blue-400 hover:underline"
41+ >
42+ { snippet . createdBy . username }
43+ </ Link >
44+ ) }
3545 < div />
3646 { snippet . author && (
3747 < >
3848 < span className = "font-medium text-gray-700 dark:text-gray-300" >
3949 Uploaded by:
4050 </ span > { ' ' }
41- < span className = "text-gray-900 dark:text-gray-100" >
51+ < Link
52+ to = "/snippets"
53+ search = { { userId : snippet . createdBy . id } }
54+ className = "text-blue-600 dark:text-blue-400 hover:underline"
55+ >
4256 { snippet . createdBy . username }
43- </ span >
57+ </ Link >
4458 </ >
4559 ) }
4660 </ div >
@@ -71,16 +85,18 @@ export default function SnippetInfo({ snippet }: SnippetInfoProps) {
7185 </ div >
7286 < div className = "flex flex-wrap gap-1" >
7387 { snippet . versions . map ( ( v , idx ) => (
74- < span
88+ < Link
7589 key = { idx }
76- className = { `inline-flex items-center px-2 py-0.5 rounded text-xs font-mono ${
90+ to = "/snippets"
91+ search = { { versions : [ v . version ] } }
92+ className = { `inline-flex items-center px-2 py-0.5 rounded text-xs font-mono transition-opacity hover:opacity-80 ${
7793 v . success
7894 ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 border border-green-300 dark:border-green-700'
7995 : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 border border-red-300 dark:border-red-700'
8096 } `}
8197 >
8298 { v . version }
83- </ span >
99+ </ Link >
84100 ) ) }
85101 </ div >
86102 </ div >
@@ -94,7 +110,14 @@ export default function SnippetInfo({ snippet }: SnippetInfoProps) {
94110 </ span >
95111 < div className = "flex flex-wrap gap-2" >
96112 { snippet . tags . map ( ( tag ) => (
97- < TagComp key = { tag . id } tag = { tag } />
113+ < Link
114+ key = { tag . id }
115+ to = "/snippets"
116+ search = { { tags : [ tag . id ] } }
117+ className = "inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors"
118+ >
119+ { tag . name }
120+ </ Link >
98121 ) ) }
99122 </ div >
100123 </ div >
@@ -115,12 +138,14 @@ export default function SnippetInfo({ snippet }: SnippetInfoProps) {
115138 </ span >
116139 < div className = "space-y-1" >
117140 { snippet . packages . map ( ( pkg , idx ) => (
118- < div
141+ < Link
119142 key = { idx }
120- className = "text-sm text-gray-700 dark:text-gray-300 font-mono bg-gray-50 dark:bg-gray-900 px-2 py-1 rounded"
143+ to = "/snippets"
144+ search = { { packages : `${ pkg . namespace } /${ pkg . name } ` } }
145+ className = "block text-sm text-gray-700 dark:text-gray-300 font-mono bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 px-2 py-1 rounded transition-colors"
121146 >
122147 { pkg . namespace } /{ pkg . name } @{ pkg . version }
123- </ div >
148+ </ Link >
124149 ) ) }
125150 </ div >
126151 </ div >
0 commit comments