updated the search

.astro/data-store.json

@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.3.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.12.9","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"rawEnvValues\":false},\"legacy\":{\"collections\":false}}"]

.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1740190382923
+		"lastUpdateCheck": 1755103740631
 	}
 }

package.json

@@ -14,10 +14,11 @@
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "astro": "^5.3.0",
+    "latest": "^0.2.0",
     "lodash": "^4.17.21",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-select": "^5.10.0",
     "tailwindcss": "^4.0.8"
   }
-}
+}

src/cra-project/components/ProjectList/CardsContainer.jsx

@@ -39,6 +39,7 @@ export default class CardsContainer extends React.Component {
   }
 
   handleSelectChange(selectedOptions) {
+    console.log(selectedOptions)
     const valueArray = Array.isArray(selectedOptions)
       ? selectedOptions
       : [selectedOptions];
@@ -48,28 +49,20 @@ export default class CardsContainer extends React.Component {
 
   handleFilterListUpdate(value) {
     let updatedList = [...projectList];
-
-    if (
+    console.log("the values in handlefilter : "+value);
+    /* if (
       (!value || value.length === 0) &&
       (!this.inputValue || this.inputValue.length === 0)
     ) {
       return this.setState({ filterList: this.sortArrayRandom(projectList) });
-    }
+    } */
 
     // If tags filter applied
-    if (value.length > 0) {
-      const valueList = value.map((v) => v.value.toLowerCase());
-
-      updatedList = updatedList.filter(
-        (project) =>
-          project.tags &&
-          project.tags.some((tag) => valueList.includes(tag.toLowerCase()))
-      );
-    }
-
+    //if(!value) return this.setState({ filterList: this.sortArrayRandom(projectList) });
+
     // If search input value is not empty
-    if (this.inputValue && this.inputValue.trim().length > 0) {
-      const searchTerm = this.inputValue.toLowerCase();
+    if (!Array.isArray(value) && value && value.length>0) {
+      const searchTerm = value.toLowerCase();
 
       updatedList = updatedList.filter(
         (project) =>
@@ -80,6 +73,17 @@ export default class CardsContainer extends React.Component {
       );
     }
 
+    if (Array.isArray(value) && value.length>0) {
+
+      const valueList = value.map((v) => v.value.toLowerCase());
+
+      updatedList = updatedList.filter(
+        (project) =>
+          project.tags &&
+          project.tags.some((tag) => valueList.includes(tag.toLowerCase()))
+      );
+    }
+    updatedList = updatedList.length <=0 ? this.sortArrayRandom(projectList) : updatedList;
     this.setState({ filterList: updatedList });
   }
 
@@ -89,8 +93,8 @@ export default class CardsContainer extends React.Component {
 
     this.inputValue = this.inputValue.trim();
     this.inputValue = this.inputValue.toLowerCase();
-
-    this.handleFilterListUpdate(this.value);
+    console.log(this.inputValue);
+    this.handleFilterListUpdate(this.inputValue);
   }
 
   sortArrayRandom(array) {

src/cra-project/components/ProjectList/css/cards-container.css

@@ -1,5 +1,5 @@
 .containerLayout{
-  background: #f7f7fc;
+  background: #000000;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;

src/cra-project/components/ProjectList/css/project-cards.css

@@ -4,8 +4,9 @@
 .Card-Header {
   position: relative;
   font-weight: bold;
-  background: white;
+  background: rgb(50, 50, 50);
   padding: 2%;
+  color: white;
   line-height: 18px;
   height: 140px;
     display: flex;
@@ -23,21 +24,28 @@
 }
 .Card-Body {
   position: relative;
-  background: white;
+  color: white;
+  background: rgba(49, 49, 49, 0);
+  height: 220px; 
+  overflow: hidden; 
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 .Card-Container {
   overflow: hidden;
   width: 16%;
   min-width: 225px;
-  display: flex;
+  display: flexbox;
   margin: .5vw;
-  /* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
-  -webkit-transition: box-shadow 0.1s ease-in-out; */
+  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
+  -webkit-transition: box-shadow 0.1s ease-in-out;
   transition: box-shadow 0.1s ease-in-out;
-  background-color: #fff;
-  border: 1px solid #1f293740;
+  background-color: rgb(50, 50, 50);
+  border: 2px solid #4577bd;
   border-radius: 8px;
   padding: 8px;
+   box-shadow: 0px 6px 12px rgba(238, 238, 238, 0.774);
 }
 @media (max-width: 700px) {
   .Card-Container {
@@ -73,10 +81,13 @@
 .Card-Description {
   position: relative;
   padding: 5%;
-  max-height: 180px;
-  overflow: auto;
+  max-height: 120px;
+  overflow: hidden;
   margin-top: 16px;
   margin-bottom: 16px;
+  overflow-y: auto;
+   overflow-x: auto;
+  text-overflow: ellipsis;
 }
 .Card-Description::-webkit-scrollbar {
   width: 6px; 
@@ -97,11 +108,13 @@
 .Card-Link {
   position: relative;
   padding: 15px;
-  color: #0f3cef;
+  color: #f2f4ff;
   background: transparent;
   transition: .5s;
   margin-top: auto;
-  border-top: rgba(0, 0, 0, 0.12) 1px solid;
+  border-top: rgb(255, 249, 249) 1px solid;
+  border: 2px solid #6a86f8; 
+  border-radius: 8px;
 }
 .Card-Link:hover {
   color: whitesmoke;

src/cra-project/components/ProjectList/css/search.css

@@ -1,5 +1,5 @@
 #container {
-  background: #f7f7fc;
+  background: #0a0a0a;
   display: flex;
   align-items: center;
   justify-content: space-around;
@@ -14,6 +14,7 @@
   font-size: 15px;
   text-align: center;
   border: 1px solid #DCDCDC;
+  border-radius: 8px;
 }
 
 #search:hover,#search:focus {
@@ -22,6 +23,7 @@
 
 .inputContainer {
    width: 47%;
+   height: 30px;
    margin-top: 40px;
 }