forked from RocketChat/RC4Community
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4 from anjy7/filtered-search
create a responsive search bar component which renders search results based on filters and user typed data in the search bar
- Loading branch information
Showing
6 changed files
with
495 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import React from "react"; | ||
import Card from "./Card"; | ||
import {motion} from "framer-motion" | ||
|
||
|
||
function AllCards({ data,search }) { | ||
return ( | ||
<motion.div layout className="grid place-items-center grid-cols-1 gap-10 sm:grid-cols-2 xl:grid-cols-3 md:mt-10 md:pb-10"> | ||
|
||
{search(data)?.map((x) => { | ||
if(x.id>7){ | ||
return <Card name={x.name} info={x.info} key={x.id} value={x.value}/>; | ||
} | ||
})} | ||
</motion.div> | ||
); | ||
} | ||
|
||
export default AllCards; | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import React from "react"; | ||
import { motion } from "framer-motion"; | ||
|
||
function Card({ name, value, info }) { | ||
return ( | ||
<motion.div layout className="flex sm:min-w-96 min-h-96 "> | ||
<div className="flex flex-col justify-around w-72 align-center max-w-sm sm:w-96 sm:h-96 p-6 text-white bg-[#1E1E1E] border border-gray-200 rounded-lg shadow-md sm:hover:scale-110 sm:mb-6"> | ||
<div> | ||
<h5 className="flex text-center justify-center mb-2 text-2xl font-bold tracking-tight "> | ||
{name} | ||
</h5> | ||
|
||
<p className="mb-20 mt-5 font-normal ">{info}</p> | ||
</div> | ||
<div className="flex justify-center"> | ||
{/* <a | ||
href={value} | ||
target="_blank" | ||
className="inline-flex items-center p-8 h-10 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" | ||
> | ||
Read more | ||
</a> */} | ||
<a | ||
href={value} | ||
target="_blank" | ||
className=" text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2" | ||
> | ||
Read more | ||
</a> | ||
</div> | ||
</div> | ||
</motion.div> | ||
); | ||
} | ||
|
||
export default Card; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import { useEffect } from "react"; | ||
import React from "react"; | ||
|
||
function Filter({ resources, setActiveOption, setFiltered, activeOption }) { | ||
useEffect(() => { | ||
if (activeOption == "all") { | ||
setFiltered(resources); | ||
return; | ||
} | ||
const filtered = resources.filter((card) => card.genre === activeOption); | ||
setFiltered(filtered); | ||
// console.log(filtered); | ||
}, [activeOption]); | ||
|
||
return ( | ||
<div className="text-white flex mb-5 md:mt-16 align-center"> | ||
<h1 className="text-white text-lg ml-2 md:text-3xl md:mt-3 font-bold "> | ||
Filter: | ||
</h1> | ||
<div className="flex flex-wrap flex-col sm:flex-row "> | ||
<button | ||
onClick={() => setActiveOption("all")} | ||
className="bg-red px-8 md:px-14 md:py-3 border-2 ml-5 mb-2 lg:ml-10 " | ||
> | ||
All | ||
</button> | ||
<button | ||
onClick={() => setActiveOption("github")} | ||
className="bg-red px-8 md:px-14 md:py-3 border-2 ml-5 mb-2 sm:ml-10" | ||
> | ||
Github repo | ||
</button> | ||
<button | ||
onClick={() => setActiveOption("twitter")} | ||
className="bg-red px-8 md:px-14 md:py-3 border-2 ml-5 mb-2 sm:ml-10" | ||
> | ||
</button> | ||
<button | ||
onClick={() => setActiveOption("projects")} | ||
className="bg-red px-8 md:px-14 md:py-3 border-2 ml-5 mb-2 sm:ml-10" | ||
> | ||
Projects | ||
</button> | ||
<button | ||
onClick={() => setActiveOption("resources")} | ||
className="bg-red px-8 md:px-14 md:py-3 border-2 ml-5 mb-2 sm:ml-10" | ||
> | ||
Resources | ||
</button> | ||
</div> | ||
</div> | ||
); | ||
} | ||
|
||
export default Filter; | ||
|
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.