From 8bd3f1685b2bde823c461509fcf06c2531e3c497 Mon Sep 17 00:00:00 2001
From: Luigi Barbato <work@luigibarbato.digital>
Date: Tue, 17 Oct 2023 18:42:55 +0200
Subject: [PATCH] feat: add useIsMobile hook, isMobile prop, enhance ui style

---
 components/Feeds.tsx          |  2 +-
 components/SearchForm.tsx     |  4 ++--
 components/layouts/Layout.tsx |  7 ++++++-
 hooks/useismobile.hook.ts     | 22 ++++++++++++++++++++
 pages/_app.tsx                | 13 ++++++++++--
 styles/globals.css            | 38 +++++++++++++++++++++++++++++++++++
 6 files changed, 80 insertions(+), 6 deletions(-)
 create mode 100644 hooks/useismobile.hook.ts

diff --git a/components/Feeds.tsx b/components/Feeds.tsx
index 1593043..1199ce0 100644
--- a/components/Feeds.tsx
+++ b/components/Feeds.tsx
@@ -6,7 +6,7 @@ export interface FeedsProps {
 
 export const Feeds = (props: FeedsProps) => {
   return (
-    <div className="md:columns-2 lg:columns-3 columns-1 gap-8 px-8 mb-10 container">
+    <div className="md:columns-2 lg:columns-3 columns-1 gap-8 px-8 mb-10 mt-10 container">
       {props.feeds.map((feed) => (
         <div
           key={feed.link}
diff --git a/components/SearchForm.tsx b/components/SearchForm.tsx
index dd4ea7d..6436d33 100644
--- a/components/SearchForm.tsx
+++ b/components/SearchForm.tsx
@@ -40,7 +40,7 @@ const SearchForm: FunctionComponent<SearchFormProps> = ({ onSubmitted }) => {
             ></path>
           </svg>
         </div>
-        <div className="flex justify-center items-center text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+        <div className="flex justify-center items-center text-gray-900 bg-gray-50 rounded-lg border border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white ">
           <input
             type="search"
             value={query}
@@ -52,7 +52,7 @@ const SearchForm: FunctionComponent<SearchFormProps> = ({ onSubmitted }) => {
           ></input>
           <button
             type="submit"
-            className="text-white mr-2 md:h-auto w-2/4 md:w-1/2 bg-black hover:bg-black focus:ring-4 focus:outline-none font-medium rounded-lg text-sm md:text-sm p-2 md:px-4 md:py-2 dark:bg-black dark:hover:bg-black dark:focus:ring-black "
+            className="text-white mr-2 md:h-auto w-2/4 md:w-1/2 bg-black hover:bg-black focus:outline-none font-medium rounded-lg text-sm md:text-sm p-2 md:px-4 md:py-2 dark:bg-black dark:hover:bg-black dark:focus:ring-black"
           >
             Search
           </button>
diff --git a/components/layouts/Layout.tsx b/components/layouts/Layout.tsx
index 8c8742c..d48e0f1 100644
--- a/components/layouts/Layout.tsx
+++ b/components/layouts/Layout.tsx
@@ -8,10 +8,15 @@ import { useRouter } from "next/router";
 interface LayoutProps {
   children: React.ReactNode;
   hideSearchBar?: boolean;
+  hideTagLine?: boolean;
+  isMobile: boolean;
 }
+
 const Layout: FunctionComponent<LayoutProps> = ({
   children,
   hideSearchBar,
+  hideTagLine,
+  isMobile,
 }) => {
   const router = useRouter();
 
@@ -47,7 +52,7 @@ const Layout: FunctionComponent<LayoutProps> = ({
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
       <div className="flex flex-col h-screen ">
-        <Header hideTagline={hideSearchBar} />
+        <Header hideTagline={hideTagLine || isMobile} />
         {!hideSearchBar && <SearchForm onSubmitted={onSubmitted} />}
         <hr />
         <main className="m-auto overflow-y-scroll md:overflow-y-visible">
diff --git a/hooks/useismobile.hook.ts b/hooks/useismobile.hook.ts
new file mode 100644
index 0000000..2726af2
--- /dev/null
+++ b/hooks/useismobile.hook.ts
@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+
+const useIsMobile = () => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(
+        window.matchMedia("only screen and (max-width: 912px)").matches,
+      );
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize(); // Chiamare la funzione quando il componente viene montato
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return isMobile;
+};
+
+export default useIsMobile;
diff --git a/pages/_app.tsx b/pages/_app.tsx
index bff9a1a..3209834 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,14 +2,23 @@ import "../styles/globals.css";
 import { Analytics } from "@vercel/analytics/react";
 import type { AppProps } from "next/app";
 import Layout from "../components/layouts/Layout";
-import { SWRConfig } from "swr";
+import useIsMobile from "../hooks/useismobile.hook";
 
 interface PageProps {
   hideSearchBar?: boolean;
+  hideTagLine?: boolean;
+  isMobile: boolean;
 }
+
 function MyApp({ Component, pageProps }: AppProps<PageProps>) {
+  const isMobile = useIsMobile();
+
   return (
-    <Layout hideSearchBar={pageProps.hideSearchBar}>
+    <Layout
+      hideSearchBar={pageProps.hideSearchBar}
+      hideTagLine={pageProps.hideTagLine}
+      isMobile={isMobile}
+    >
       <Component {...pageProps} />
       <Analytics />
     </Layout>
diff --git a/styles/globals.css b/styles/globals.css
index 3dba845..220d986 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -13,6 +13,43 @@ input:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 100px rgb(249 250 251 / var(--tw-bg-opacity)) inset !important;
 }
 
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  height: 1em;
+  width: 1em;
+  border-radius: 50%;
+  background: black;
+  color: white;
+  font-size: 1em;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media only screen and (max-width: 768px) {
+  input[type="search"]::-webkit-search-cancel-button {
+    margin-right: 1em;
+  }
+}
+
+input[type="search"]:after::-webkit-search-cancel-button {
+  opacity: 1;
+  color: white;
+  pointer-events: all;
+}
+
+input[type="search"]:focus::-webkit-search-cancel-button {
+  opacity: 1;
+  color: white;
+  cursor: pointer;
+  pointer-events: all;
+}
+
+input[type="search"].dark::-webkit-search-cancel-button {
+  filter: invert(1);
+}
+
 .article {
   padding: 16px 24px;
   position: relative;
@@ -81,6 +118,7 @@ input:-webkit-autofill:active {
 .text-summarize {
   overflow: hidden;
   display: -webkit-box;
+  text-overflow: "...";
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 10;
 }