Merge pull request #84 from HusseinSerag/LINTING-feature-plugins

fix: linting issues disrupting github workflow

Author: hunxjunedo

src/components/Plugins/PluginCard.tsx

@@ -5,7 +5,9 @@ type PluginCardProps = {
   plugin: Plugin;
 }
 export function PluginCard({ plugin }: PluginCardProps) {
-	return <section className="border gap-4 flex flex-col max-w-[314px]  hover:scale-[1.01]   p-4 pt-6 m-auto w-full border-card-border rounded-md h-[300px]">
+	return <section className="border gap-4 flex 
+  flex-col max-w-[314px]  hover:scale-[1.01]
+    p-4 pt-6 m-auto w-full border-card-border rounded-md h-[300px]">
 		<div className="flex-1 flex flex-col gap-4">
 			<div>
 				<div>
@@ -27,9 +29,11 @@ export function PluginCard({ plugin }: PluginCardProps) {
 				Read more
 			</button>
 
-			<button className="bg-brand-purple text-[12px] flex justify-center items-center gap-1  px-4 pt-[6px] pb-[7px] rounded-md text-white"><span>
-				View in NPM 
-			</span>
+			<button className="bg-brand-purple text-[12px] flex justify-center
+       items-center gap-1  px-4 pt-[6px] pb-[7px] rounded-md text-white">
+				<span>
+					View in NPM 
+				</span>
 				<ExternalLink className="w-4" /></button>
 		</div>
 

src/components/Plugins/PluginSearchBar.tsx

@@ -14,9 +14,13 @@ export default function PluginSearchBar() {
 		}
 	}
 	return <div>
-		<div  className='bg-slate-900 border focus-within:ring-2 focus-within:ring-slate-300 border-slate-300 flex rounded-md gap-2 px-3 py-2 max-w-[500px] w-full'>
+		<div  className='bg-slate-900 border focus-within:ring-2 focus-within:ring-slate-300 border-slate-300 
+    flex rounded-md gap-2 px-3 py-2 max-w-[500px] w-full'>
 			<Search className='text-slate-300 w-4' />
-			<input value={searchQuery} onChange={(e)=>setSearchQuery(e.target.value)}  placeholder='Search plugins...' className='bg-transparent focus:border-0  focus:outline-none focus:ring-0 placeholder:text-sm text-slate-300 rounded-md w-full' />
+			<input value={searchQuery} onChange={(e)=>setSearchQuery(e.target.value)}  
+				placeholder='Search plugins...' 
+				className='bg-transparent focus:border-0  focus:outline-none focus:ring-0 
+        placeholder:text-sm text-slate-300 rounded-md w-full' />
 		</div>
 	</div>
 }

src/pages/Plugins.tsx

@@ -22,13 +22,14 @@ const Plugins: React.FC = () => {
 			<div className='p-8 flex flex-col gap-8 max-w-[1024px] m-auto'>
 				<PluginSearchBar />
 				<div className='grid xs:grid-cols-1  sm:grid-cols-2 lg:grid-cols-3 gap-x-16 gap-y-8'>
-					{isLoading ? Array.from({length : 9}).map((_ , i)=><Skeleton key={i} width="280px" containerClassName='m-auto' height="300px" />) :
+					{isLoading ? Array.from({length : 9}).map((_ , i) =>
+						<Skeleton key={i} width="280px" containerClassName='m-auto' height="300px" />) :
 						plugins.length > 0 && plugins.map(plugin =>{
 							return <PluginCard key={plugin.id} plugin={plugin} />
 						})}
 				</div>
-				{!isLoading && error && <h1 className='text-white text-lg flex items-center justify-center '>{error}</h1>
-	 }
+				{!isLoading && error && 
+				<h1 className='text-white text-lg flex items-center justify-center '>{error}</h1>}
 				{
 					!error && !isLoading && plugins.length == 0 &&
 					<h1 className='text-white text-lg flex items-center justify-center '>No search results found...</h1>