From 445301fd3eb9e38d56693e43bb387a183cdd5c5e Mon Sep 17 00:00:00 2001
From: Mojtabaa <mojtabaa.hn@gmail.com>
Date: Tue, 23 Apr 2024 01:38:51 +0330
Subject: [PATCH] feat: clear search and custom 404 page
---
src/pages/404.js | 4 ++--
src/pages/index.js | 12 ++++++++++--
2 files changed, 12 insertions(+), 4 deletions(-)
diff --git a/src/pages/404.js b/src/pages/404.js
index c4a8f01..24b7db2 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,7 +1,7 @@
import * as React from "react"
-const NotFoundPage = () => <div>
- Not Found!
+const NotFoundPage = () => <div className='w-full h-screen flex items-center justify-center text-2xl text-gray-700 tracking-widest uppercase'>
+ <div>404 Not Found !</div>
</div>
export default NotFoundPage
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 4aba6e0..5645556 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -50,6 +50,10 @@ const Layout = ({children}) => <div>
const Navigation = ({title, description}) => {
const [searchFilter, setSearchFilter] = useAtom(searchFilterAtom)
+ const clearSearchFilter = e => {
+ setSearchFilter('')
+ document.querySelector('#search').focus()
+ }
return <div className='flex flex-col gap-2 md:flex-row items-center py-4 mb-6'>
<Logo className='h-12' />
@@ -59,8 +63,12 @@ const Navigation = ({title, description}) => {
</div>
<div className='flex-grow' />
<div className='rounded-xl bg-white dark:bg-gray-900 py-2 px-4 flex items-center max-w-[100%] w-[250px]'>
- <input type="text" className='bg-transparent outline-none flex-grow min-w-[0]' placeholder='Filter Icons..' value={searchFilter} onChange={e => setSearchFilter(e.target.value)} />
- <i className='bx bx-search text-xl'></i>
+ <input id='search' type="text" className='bg-transparent outline-none flex-grow min-w-[0]' placeholder='Filter Icons..' value={searchFilter} onChange={e => setSearchFilter(e.target.value)} />
+ {
+ searchFilter == '' ?
+ <i className='bx bx-search text-xl'></i> :
+ <button onClick={clearSearchFilter}><i className='bx bx-x text-xl'></i></button>
+ }
</div>
<a className='ml-2' href='https://github.com/mojtabaahn/persian-simple-icons'>
<i className='bx bxl-github text-4xl'></i>