fix: added search icon to search bar in modrinth

pyrohost · Dec 28, 2024 · 586dd54 · 586dd54
1 parent c9531b8
commit 586dd54
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 15 deletions.
diff --git a/resources/scripts/components/server/modrinth/DisplayMods.tsx b/resources/scripts/components/server/modrinth/DisplayMods.tsx
@@ -4,6 +4,8 @@ import { toast } from 'sonner';
 import ContentBox from '@/components/elements/ContentBox';
 import HugeIconsDownload from '@/components/elements/hugeicons/Download';
 
+import { ServerContext } from '@/state/server';
+
 // import { useProjects } from './FetchProjects';
 import { apiEndpoints, offset, settings } from './config';
 
@@ -32,6 +34,8 @@ const ProjectSelector: React.FC<Props> = ({ appVersion, baseUrl, nonApiUrl }) =>
     const [projects, setProjects] = useState<Project[]>([]);
     const [isLoading, setIsLoading] = useState<boolean>(false);
 
+    const uuid = ServerContext.useStoreState((state) => state.server.data!);
+
     const fetchProjects = async () => {
         setIsLoading(true); // Start loading
         try {
@@ -74,6 +78,8 @@ const ProjectSelector: React.FC<Props> = ({ appVersion, baseUrl, nonApiUrl }) =>
                 icon_url: project.icon_url || 'N/A',
             }));
 
+            // console.log(uuid);
+
             setProjects(updatedProjects);
         } catch (error) {
             toast.error('Failed to fetch projects.');
@@ -99,11 +105,6 @@ const ProjectSelector: React.FC<Props> = ({ appVersion, baseUrl, nonApiUrl }) =>
         }
     };
 
-    const getData = (): null => {
-        console.log(settings);
-        return null;
-    };
-
     return (
         <div>
             <button
@@ -121,13 +122,13 @@ const ProjectSelector: React.FC<Props> = ({ appVersion, baseUrl, nonApiUrl }) =>
                 projects.map((project) => (
                     <ContentBox
                         key={project.project_id}
-                        className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl w-full mb-4 relative'
+                        className='p-4 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl w-full mb-4 relative'
                     >
                         <div className='flex items-center'>
-                            <ContentBox className='p-3 rounded-xl mr-4'>
+                            <ContentBox className='p-3 pt-1 rounded-xl mr-4'>
                                 <a href={`${nonApiUrl}/mod/${project.project_id}`} target='_blank' rel='noreferrer'>
                                     {project.icon_url && project.icon_url !== 'N/A' ? (
-                                        <img src={project.icon_url} className='mt-4 w-20 h-16 object-cover rounded' />
+                                        <img src={project.icon_url} className='mt-4 w-24 h-20 object-cover rounded' />
                                     ) : (
                                         <svg
                                             fillRule='evenodd'

diff --git a/resources/scripts/components/server/modrinth/ModrinthContainer.tsx b/resources/scripts/components/server/modrinth/ModrinthContainer.tsx
@@ -118,13 +118,29 @@ export default () => {
                     className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl w-full md:w-4/5'
                     title='Modrinth'
                 >
-                    <input
-                        className='pl-14 py-4 w-full rounded-lg bg-[#ffffff11] text-sm font-bold mb-4'
-                        type='text'
-                        placeholder='Search'
-                        onChange={(event) => debouncedSearchTerm(event.target.value)}
-                        // onChange={(event) => console.log(event.target.value)}
-                    />
+                    <div className='relative w-full h-full mb-4'>
+                        <svg
+                            xmlns='http://www.w3.org/2000/svg'
+                            fill='none'
+                            viewBox='0 0 24 24'
+                            strokeWidth={1.5}
+                            stroke='currentColor'
+                            className='w-5 h-5 absolute top-1/2 -translate-y-1/2 left-5 opacity-40'
+                        >
+                            <path
+                                strokeLinecap='round'
+                                strokeLinejoin='round'
+                                d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'
+                            />
+                        </svg>
+                        <input
+                            className='pl-14 py-4 w-full rounded-lg bg-[#ffffff11] text-sm font-bold'
+                            type='text'
+                            placeholder='Search'
+                            onChange={(event) => debouncedSearchTerm(event.target.value)}
+                            // onChange={(event) => console.log(event.target.value)}
+                        />
+                    </div>
 
                     <ProjectSelector appVersion={appVersion} baseUrl={url} nonApiUrl={nonApiUrl} />
                 </ContentBox>