@@ -80,22 +80,22 @@ const ModelCatalog = ({ models }) => {
8080
8181 return (
8282 < div className = "md:flex" >
83- < div className = "md:w-1/4 w-full mr-8 " >
83+ < div className = "mr-8 w-full md:w-1/4 " >
8484 < input
8585 type = "text"
86- className = "w-full mb-8 rounded-md bg-white dark:bg-black border-2 border-gray-200 dark:border-gray-700 px-2 py-2 "
86+ className = "mb-8 w-full rounded-md border-2 border-gray-200 bg-white px-2 py-2 dark:border-gray-700 dark:bg-gray-800 "
8787 placeholder = "Search models"
8888 value = { filters . search }
8989 onChange = { ( e ) => setFilters ( { ...filters , search : e . target . value } ) }
9090 />
9191
92- < div className = "!mb-8 md:block hidden " >
93- < span className = "uppercase text-gray-600 dark:text-gray-200 text-sm font-bold " >
92+ < div className = "!mb-8 hidden md:block" >
93+ < span className = "text-sm font-bold uppercase text-gray-600 dark:text-gray-200" >
9494 ▼ Model Types
9595 </ span >
9696
9797 { tasks . map ( ( task ) => (
98- < label key = { task } className = "block !my-2" >
98+ < label key = { task } className = "!my-2 block " >
9999 < input
100100 type = "checkbox"
101101 className = "mr-2"
@@ -119,13 +119,13 @@ const ModelCatalog = ({ models }) => {
119119 ) ) }
120120 </ div >
121121
122- < div className = "!mb-8 md:block hidden " >
123- < span className = "uppercase text-gray-600 dark:text-gray-200 text-sm font-bold " >
122+ < div className = "!mb-8 hidden md:block" >
123+ < span className = "text-sm font-bold uppercase text-gray-600 dark:text-gray-200" >
124124 ▼ Capabilities
125125 </ span >
126126
127127 { capabilities . map ( ( capability ) => (
128- < label key = { capability } className = "block !my-2" >
128+ < label key = { capability } className = "!my-2 block " >
129129 < input
130130 type = "checkbox"
131131 value = { capability }
@@ -151,13 +151,13 @@ const ModelCatalog = ({ models }) => {
151151 ) ) }
152152 </ div >
153153
154- < div className = "md:block hidden " >
155- < span className = "uppercase text-gray-600 dark:text-gray-200 text-sm font-bold " >
154+ < div className = "hidden md:block" >
155+ < span className = "text-sm font-bold uppercase text-gray-600 dark:text-gray-200" >
156156 ▼ Authors
157157 </ span >
158158
159159 { authors . map ( ( author ) => (
160- < label key = { author } className = "block !my-2" >
160+ < label key = { author } className = "!my-2 block " >
161161 < input
162162 type = "checkbox"
163163 className = "mr-2"
@@ -183,9 +183,9 @@ const ModelCatalog = ({ models }) => {
183183 ) ) }
184184 </ div >
185185 </ div >
186- < div className = "flex md:w-3/4 w-full gap-[1%] items-stretch self-start flex-wrap !mt-0 " >
186+ < div className = "!mt-0 flex w-full flex-wrap items-stretch gap-[1%] self-start md:w-3/4 " >
187187 { modelList . length === 0 && (
188- < div className = "border bg-gray-50 dark:bg-gray-800 dark: border-gray-500 rounded-md w-full flex-col flex align-middle justify-center text-center py-6 " >
188+ < div className = "flex w-full flex-col justify-center rounded-md border bg -gray-50 py-6 text-center align-middle dark:border-gray-500 dark:bg-gray-800 " >
189189 < span className = "text-lg !font-bold" > No models found</ span >
190190 < p >
191191 Try a different search term, or broaden your search by removing
@@ -206,36 +206,36 @@ const ModelCatalog = ({ models }) => {
206206 return (
207207 < a
208208 key = { model . model . id }
209- className = "p -3 border-gray-200 dark:border-gray-700 border-solid border rounded-md lg:w-[48%] w-full block !text-inherit no-underline self-start hover:bg-gray-50 dark:hover:bg-black mb-3 "
209+ className = "mb -3 block w-full self-start rounded-md border border -solid border-gray-200 p-3 !text-inherit no-underline hover:bg-gray-50 dark:border-gray-700 dark: hover:bg-gray-800 lg:w-[48%] "
210210 href = { `/workers-ai/models/${ model . model_display_name } }
211211 >
212212 < div className = "-mb-1 flex items-center" >
213213 { authorData [ model . model . name . split ( "/" ) [ 1 ] ] ?. logo ? (
214214 < img
215- className = "block w-6 mr-2 "
215+ className = "mr-2 block w-6"
216216 src = { authorData [ model . model . name . split ( "/" ) [ 1 ] ] ?. logo }
217217 />
218218 ) : (
219- < div className = "w-6 h-6 rounded-md bg-gray-100 text-gray-400 uppercase text- sm font-black flex justify-center items-center mr-2 " >
219+ < div className = "mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-gray-100 text-sm font-black uppercase text-gray-400 " >
220220 { author . substr ( 0 , 1 ) }
221221 </ div >
222222 ) }
223- < span className = "font-semibold text-lg text-ellipsis overflow-hidden whitespace-nowrap " >
223+ < span className = "overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold " >
224224 { model . model_display_name }
225225 </ span >
226226 { isBeta && (
227- < span className = "ml-1 bg-orange-200 text-orange-900 rounded-full px-2 py-0.5 text-xs" >
227+ < span className = "ml-1 rounded-full bg-orange-200 px-2 py-0.5 text-xs text-orange-900 " >
228228 Beta
229229 </ span >
230230 ) }
231231 </ div >
232- < div className = "text-xs !m-0" >
232+ < div className = "!m-0 text-xs " >
233233 < ModelInfo model = { model . model } />
234234 </ div >
235235 < p className = "!mt-2 line-clamp-2 text-sm leading-6" >
236236 { model . model . description }
237237 </ p >
238- < div className = "text-xs !mt-2" >
238+ < div className = "!mt-2 text-xs " >
239239 < ModelBadges model = { model . model } />
240240 </ div >
241241 </ a >
0 commit comments