✨ improve search functionality and ui

mrpmohiburrahman · Jul 9, 2024 · 5fbc9d9 · 5fbc9d9
1 parent dff6c0a
commit 5fbc9d9
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 27 deletions.
diff --git a/...ite/similar-react-native-libraries/components/search_component/SearchComponent.module.css b/...ite/similar-react-native-libraries/components/search_component/SearchComponent.module.css
@@ -0,0 +1,32 @@
+/* SearchComponent.module.css */
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: left;
+    width: 100%;
+}
+
+.searchInput {
+    width: 100%;
+    max-width: 800px;
+    padding: 1rem;
+    font-size: 1.5rem;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.resultsContainer {
+    width: 100%;
+    max-width: 800px;
+    margin-top: 1rem;
+}
+
+.resultItem {
+    border-bottom: 1px solid #ddd;
+    padding: 1rem 0;
+}
+
+.noResultsSpace {
+    margin-top: 2rem;
+}
diff --git a/website/similar-react-native-libraries/components/search_component/SearchComponent.tsx b/website/similar-react-native-libraries/components/search_component/SearchComponent.tsx
@@ -1,8 +1,8 @@
-// src/components/SearchComponent.tsx
 import React, { useState, useEffect, ChangeEvent } from 'react';
 import debounce from 'lodash/debounce';
 import combinedData from '../../../../category-selector/data/combinedFromChunks.json'; // Adjust the path to your JSON file
 import categoryData from '../../../../category-selector/data/uniqueCategoryToLib.json'; // Adjust the path to your JSON file
+import styles from './SearchComponent.module.css'; // Assuming styles are imported
 
 interface GithubData {
   githubUrl: string;
@@ -104,11 +104,18 @@ const SearchComponent: React.FC = () => {
   };
 
   return (
-    <div>
-      <input type="text" value={query} onChange={handleChange} placeholder="Enter GitHub URL" />
-      {results.length > 0
-        ? results.map(result => (
-            <div key={result.githubUrl}>
+    <div className={styles.container}>
+      <input
+        type="text"
+        value={query}
+        onChange={handleChange}
+        placeholder="Enter GitHub URL"
+        className={styles.searchInput}
+      />
+      <div className={styles.resultsContainer}>
+        {results.length > 0 ? (
+          results.map(result => (
+            <div key={result.githubUrl} className={styles.resultItem}>
               <h2>
                 <a href={result.github?.urls?.repo} target="_blank" rel="noopener noreferrer">
                   {result.github?.name}
@@ -118,7 +125,10 @@ const SearchComponent: React.FC = () => {
               {/* Display other relevant data from the JSON object as needed */}
             </div>
           ))
-        : query && <p>No results found</p>}
+        ) : (
+          <div className={styles.noResultsSpace}>{query && <p>No results found</p>}</div>
+        )}
+      </div>
     </div>
   );
 };

diff --git a/website/similar-react-native-libraries/docs/getting-started.mdx b/website/similar-react-native-libraries/docs/getting-started.mdx
@@ -5,26 +5,23 @@ sidebar_label: Getting Started
 description: Discover similar React Native libraries.
 image: /img/og.png
 slug: /
+hide_title: true
 ---
 
-Discover similar React Native libraries based on the current active GitHub URL.
-
-### 🌟 Enjoying the Extension?
-
-If you find this extension useful, please consider giving our repository a **`star`** on [GitHub](https://github.com/mrpmohiburrahman/similar-react-native-libraries).
-
-Your support helps us continue to grow and provide more high-quality content for the community!
-
-### 🔍 Search for a GitHub URL
-
 import SearchComponent from '@site/components/search_component/SearchComponent';
-
-<SearchComponent />
-
-### 🤝 Want to Contribute?
-
-We welcome contributions from the community! If you have found or created similar React Native libraries, share them with us. Follow the contribution guidelines on our [GitHub repository](https://github.com/mrpmohiburrahman/similar-react-native-libraries?tab=readme-ov-file#contributing) to submit your libraries.
-
----
-
-Enjoy your visit!
+import styles from './getting-started.module.css';
+
+<div className={styles.container}>
+  <div className={styles.searchContainer}>
+    <h1>Discover Similar React Native Libraries</h1>
+    <SearchComponent />
+  </div>
+
+  <div className={styles.footer}>
+    <h2>🌟 Enjoying the Extension?</h2>
+    <p>If you find this extension useful, please consider giving our repository a <a href="https://github.com/mrpmohiburrahman/similar-react-native-libraries" target="_blank" rel="noopener noreferrer">star</a> on GitHub.</p>
+
+    <h2>🤝 Want to Contribute?</h2>
+    <p>We welcome contributions from the community! Guidelines will be added soon.</p>
+  </div>
+</div>
diff --git a/website/similar-react-native-libraries/docs/getting-started.module.css b/website/similar-react-native-libraries/docs/getting-started.module.css
@@ -0,0 +1,61 @@
+/* getting-started.module.css */
+.container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  justify-content: space-between;
+}
+
+.searchContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  flex-grow: 1;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.searchContainer h1 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.searchContainer input[type="text"] {
+  width: 100%;
+  max-width: 1000px;
+  /* Increase the max-width to make the input field wider */
+  padding: 1.5rem;
+  /* Increase the padding for better visibility */
+  font-size: 1.5rem;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+.footer {
+  text-align: center;
+  margin-top: 2rem;
+  padding: 2rem;
+  font-size: 0.9rem;
+}
+
+.footer h2 {
+  font-size: 1.2rem;
+}
+
+.footer p {
+  font-size: 0.9rem;
+}
+
+.footer a {
+  color: #0070f3;
+  text-decoration: none;
+}
+
+.footer a:hover {
+  text-decoration: underline;
+}
+
+.noResultsSpace {
+  margin-top: 2rem;
+}