Created
December 3, 2023 07:59
-
-
Save otabek0302/d562e5ac722711de90f453c54c646ebf to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| import React from 'react' | |
| import { RotatingLines } from 'react-loader-spinner' | |
| const Loading = () => { | |
| return ( | |
| <div className='py-32 flex justify-center items-center'> | |
| <RotatingLines | |
| strokeColor='#00BFFF' | |
| strokeWidth='5' | |
| animationDuration='0.75' | |
| width='95' | |
| height="550" | |
| visible={true} | |
| /> | |
| </div> | |
| ) | |
| } | |
| export default Loading |
This file contains hidden or 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
| import React from 'react' | |
| const SearchInput = ({ handeSubmit, text, setText }) => { | |
| return ( | |
| <form onSubmit={handeSubmit}> | |
| <div className='block mx-auto border rounded-full shadow-sm outline-none p-1 px-4 hover:shadow-lg'> | |
| <div className='w-full flex item-center justify-normal'> | |
| <img src="./images/search.svg" alt="Search" /> | |
| <input | |
| value={text} | |
| type="text" | |
| className='w-[582px] h-[46px] text-black mx-1 focus:border-none focus:outline-none dark:bg-transparent dark:peer-valid:text-gray-400 dark:text-gray-100' | |
| placeholder='Search Google or type URL' | |
| onChange={(e) => setText(e.target.value)} | |
| /> | |
| { | |
| text !== "" && ( | |
| <button type='button' className='px-2 border-r-[1.5px]' onClick={() => setText("")} > | |
| <img src="./images/clean.svg" alt="Clean" /> | |
| </button> | |
| ) | |
| } | |
| <button className='mx-2'> | |
| <img src="./images/keyboard.svg" alt="Keyboard" /> | |
| </button> | |
| <button className='mx-2'> | |
| <img src="./images/photo.svg" alt="Keyboard" /> | |
| </button> | |
| </div> | |
| </div> | |
| </form> | |
| ) | |
| } | |
| export default SearchInput |
This file contains hidden or 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
| import React from 'react' | |
| const Switch = ({ dark, setDark }) => { | |
| const handleToggle = () => { | |
| setDark(!dark); | |
| } | |
| return ( | |
| <button className={`w-16 h-5 rounded-full bg-white flex items-center transition duration-300 focus:outline-none shadow-lg theme-${dark ? 'dark' : 'light'}`} onClick={handleToggle}> | |
| <div className={`w-8 h-8 relative rounded-full transition duration-500 transform ${dark ? 'bg-gray-700 translate-x-full' : 'bg-yellow-500 translate-x'} p-1 text-white`}> | |
| {dark ? <img src='./images/moon.svg' alt="Dark" /> : <img src='./images/sun.svg' alt="Dark" />} | |
| </div> | |
| </button> | |
| ) | |
| } | |
| export default Switch |
This file contains hidden or 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
| import React from 'react' | |
| const Tabs = ({ handleChange }) => { | |
| return ( | |
| <div className="flex space-x-4 mt-4"> | |
| <button className="text-gray-700 dark:text-gray-100 font-semibold px-2 py-1 focus:outline-none transition duration-200 border-b-2 border-transparent hover:border-blue-500 focus:border-blue-500" onClick={() => handleChange("search")} > | |
| 🔎 All | |
| </button> | |
| <button className="text-gray-700 dark:text-gray-100 font-semibold px-2 py-1 focus:outline-none transition duration-200 border-b-2 border-transparent hover:border-blue-500 focus:border-blue-500" onClick={() => handleChange("images")} > | |
| 📸 Pictures | |
| </button> | |
| <button className="text-gray-700 dark:text-gray-100 font-semibold px-2 py-1 focus:outline-none transition duration-200 border-b-2 border-transparent hover:border-blue-500 focus:border-blue-500" onClick={() => handleChange("videos")} > | |
| 📺 Videos | |
| </button> | |
| <button className="text-gray-700 dark:text-gray-100 font-semibold px-2 py-1 focus:outline-none transition duration-200 border-b-2 border-transparent hover:border-blue-500 focus:border-blue-500" onClick={() => handleChange("news")} > | |
| 📰 News | |
| </button> | |
| </div> | |
| ) | |
| } | |
| export default Tabs |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment