Adding a catch-all not found 404 page in the app folder (Maakaf#56)

* Adding a catch-all not found 404 page in the app folder * Fixing a typo * Adding some style changes * Adding some style changes * Adding useTheme hook to resolve svg fill color * Bug fix: Removing useTheme hook * Prettier formatting
or-schneider · Aug 26, 2023 · c3ec1a1 · c3ec1a1
1 parent 0555c70
commit c3ec1a1
Show file tree

Hide file tree

Showing 22 changed files with 171 additions and 139 deletions.
diff --git a/app/About/page.tsx b/app/About/page.tsx
@@ -1,5 +1,5 @@
 const AboutPage = () => {
-  return <div>AboutPage</div>
-}
+  return <div>AboutPage</div>;
+};
 
-export default AboutPage
+export default AboutPage;
diff --git a/app/Maintainers/page.tsx b/app/Maintainers/page.tsx
@@ -1,5 +1,5 @@
 const MaintainersPage = () => {
-  return <div>MaintainersPage</div>
-}
+  return <div>MaintainersPage</div>;
+};
 
-export default MaintainersPage
+export default MaintainersPage;
diff --git a/app/Members/page.tsx b/app/Members/page.tsx
@@ -1,5 +1,5 @@
 const MembersPage = () => {
-  return <div>MembersPage</div>
-}
+  return <div>MembersPage</div>;
+};
 
-export default MembersPage
+export default MembersPage;
diff --git a/app/Newbies/page.tsx b/app/Newbies/page.tsx
@@ -1,5 +1,5 @@
 const NewbiesPage = () => {
-  return <div>NewbiesPage</div>
-}
+  return <div>NewbiesPage</div>;
+};
 
-export default NewbiesPage
+export default NewbiesPage;
diff --git a/app/Projects/page.tsx b/app/Projects/page.tsx
@@ -1,5 +1,5 @@
 const ProjectsPage = () => {
-  return <div>ProjectsPage</div>
-}
+  return <div>ProjectsPage</div>;
+};
 
-export default ProjectsPage
+export default ProjectsPage;
diff --git a/app/api/route.ts b/app/api/route.ts
@@ -1,6 +1,6 @@
-import { NextResponse, NextRequest } from 'next/server'
+import { NextResponse, NextRequest } from 'next/server';
 
 export async function GET(_request: NextRequest) {
   // Do whatever you want
-  return NextResponse.json({ message: 'Hello World' }, { status: 200 })
+  return NextResponse.json({ message: 'Hello World' }, { status: 200 });
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,9 +1,9 @@
-import './globals.css'
-import Birzia from 'next/font/local'
-import { Inter } from 'next/font/google'
-import { ThemeProvider } from '@/components/theme-provider'
-import Header from '@/components/Header/Header'
-import Footer from '@/components/Footer/Footer'
+import './globals.css';
+import Birzia from 'next/font/local';
+import { Inter } from 'next/font/google';
+import { ThemeProvider } from '@/components/theme-provider';
+import Header from '@/components/Header/Header';
+import Footer from '@/components/Footer/Footer';
 
 const birzia = Birzia({
   src: [
@@ -20,36 +20,36 @@ const birzia = Birzia({
       weight: '500',
     },
   ],
-})
+});
 
-const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
 
 export const metadata = {
   title: 'מעקף',
   description: 'מחפשי עבודה תורמים לקוד פתוח',
-}
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
-    <html lang='he' dir='rtl' suppressHydrationWarning={true}>
+    <html lang="he" dir="rtl" suppressHydrationWarning={true}>
       <body
         className={`min-h-screen m-0 darkmode-main ${birzia.className} ${inter.variable}`}
       >
-        <ThemeProvider attribute='class' defaultTheme='system' enableSystem>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <header>
             <Header />
           </header>
-          <main className='h-full pt-24 md:pt-32'>{children}</main>
+          <main className="h-full pt-24 md:pt-32">{children}</main>
           {/* remove mt-5 when developing the footer */}
-          <footer className='mt-5'>
+          <footer className="mt-5">
             <Footer />
           </footer>{' '}
         </ThemeProvider>
       </body>
     </html>
-  )
+  );
 }
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -0,0 +1,32 @@
+import Link from 'next/link';
+import { SVGProps } from 'react';
+
+export default function NotFound() {
+  return (
+    <div className="w-full grid place-items-center">
+      <h1>לא נמצא</h1>
+      <p>לא יכולנו למצוא את העמוד שביקשת</p>
+      <Link
+        href="/"
+        className="w-[250px] my-8 text-xs discord-btn rounded-full px-7 py-2 flex items-start justify-center gap-2 dark:hover:bg-purple-200 item-hover-transition"
+      >
+        בחזרה לדף הראשי
+        <div className="fill-white dark:fill-black">
+          <IcTwotoneOtherHouses width="1.4rem" height="1.4rem" />
+        </div>
+      </Link>
+    </div>
+  );
+}
+
+export function IcTwotoneOtherHouses(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path
+        d="M12 5.52L6 10.1V19h12v-8.9l-6-4.58zM8 15c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1zm4 0c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1zm4 0c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1z"
+        opacity=".3"
+      ></path>
+      <path d="M12 3L1 11.4l1.21 1.59L4 11.62V21h16v-9.38l1.79 1.36L23 11.4L12 3zm6 16H6v-8.9l6-4.58l6 4.58V19zm-9-5c0 .55-.45 1-1 1s-1-.45-1-1s.45-1 1-1s1 .45 1 1zm3-1c.55 0 1 .45 1 1s-.45 1-1 1s-1-.45-1-1s.45-1 1-1zm3 1c0-.55.45-1 1-1s1 .45 1 1s-.45 1-1 1s-1-.45-1-1z"></path>
+    </svg>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,17 +1,17 @@
-import TitleSection from '@/components/Home/TitleSection'
-import Quote from '@/components/Home/Quote'
-import BeOurFriends from '@/components/BeOurFriends/BeOurFriends'
-import Paths from '@/components/Home/Paths'
-import WhatNow from '@/components/Home/WhatNow'
+import TitleSection from '@/components/Home/TitleSection';
+import Quote from '@/components/Home/Quote';
+import BeOurFriends from '@/components/BeOurFriends/BeOurFriends';
+import Paths from '@/components/Home/Paths';
+import WhatNow from '@/components/Home/WhatNow';
 
 export default function Home() {
   return (
-    <section className='h-full'>
+    <section className="h-full">
       <TitleSection />
       <Quote />
       <BeOurFriends />
       <Paths />
       <WhatNow />
     </section>
-  )
+  );
 }
diff --git a/components/BeOurFriends/BeOurFriends.tsx b/components/BeOurFriends/BeOurFriends.tsx
@@ -1,4 +1,4 @@
-import BenefitCard from './BenefitCard'
+import BenefitCard from './BenefitCard';
 
 const cards = [
   {
@@ -25,13 +25,13 @@ const cards = [
     description:
       'על אף שהקהילה שלנו הולכת וגדלה, איכות האנשים נשמרת. בואו להכיר חברים חדשים.',
   },
-]
+];
 
 export default function BeOurFriends() {
   return (
     <>
       <h4>מה תקבלו מלהיות חברים במעקף</h4>
-      <div className='grid grid-cols-1 gap-4 m-8 md:grid-cols-2 place-content-around place-items-center'>
+      <div className="grid grid-cols-1 gap-4 m-8 md:grid-cols-2 place-content-around place-items-center">
         {cards.map((card, index) => (
           <BenefitCard
             key={index}
@@ -42,5 +42,5 @@ export default function BeOurFriends() {
         ))}
       </div>
     </>
-  )
+  );
 }
diff --git a/components/BeOurFriends/BenefitCard.tsx b/components/BeOurFriends/BenefitCard.tsx
@@ -1,15 +1,15 @@
 export default function BenefitCard(props: {
-  index: number
-  title: string
-  description: string
+  index: number;
+  title: string;
+  description: string;
 }) {
   return (
-    <div className='inline-flex flex-row w-3/4 gap-2'>
+    <div className="inline-flex flex-row w-3/4 gap-2">
       <div>{props.index + 1}</div>
-      <div className='grid gap-2'>
-        <p className='body-bold'>{props.title}</p>
-        <p className='body-roman'>{props.description}</p>
+      <div className="grid gap-2">
+        <p className="body-bold">{props.title}</p>
+        <p className="body-roman">{props.description}</p>
       </div>
     </div>
-  )
+  );
 }
diff --git a/components/Common/Darkmode.tsx b/components/Common/Darkmode.tsx
@@ -1,34 +1,34 @@
-'use client'
-import Image from 'next/image'
-import { useTheme } from 'next-themes'
+'use client';
+import Image from 'next/image';
+import { useTheme } from 'next-themes';
 
 const Darkmode: React.FC = () => {
-  const { setTheme } = useTheme()
+  const { setTheme } = useTheme();
 
   return (
-    <div className='relative w-6 h-6'>
+    <div className="relative w-6 h-6">
       <Image
         src={'/images/nightMode.svg'}
-        alt='switchDarkMode'
-        className='cursor-pointer absolute inset-0 dark:hidden hover:dark-icon-hover item-hover-transition'
+        alt="switchDarkMode"
+        className="cursor-pointer absolute inset-0 dark:hidden hover:dark-icon-hover item-hover-transition"
         width={24}
         height={24}
         onClick={() => {
-          setTheme('dark')
+          setTheme('dark');
         }}
       />
       <Image
         src={'/images/lightMode.svg'}
-        alt='switchDarkMode'
-        className='cursor-pointer absolute hidden dark:block -z-10 dark:z-10 inset-0 hover:light-icon-hover item-hover-transition'
+        alt="switchDarkMode"
+        className="cursor-pointer absolute hidden dark:block -z-10 dark:z-10 inset-0 hover:light-icon-hover item-hover-transition"
         width={24}
         height={24}
         onClick={() => {
-          setTheme('light')
+          setTheme('light');
         }}
       />
     </div>
-  )
-}
+  );
+};
 
-export default Darkmode
+export default Darkmode;
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
+import React from 'react';
 
 const Footer = () => {
-  return <div>שלום זהו הפוטר של מעקף</div>
-}
+  return <div>שלום זהו הפוטר של מעקף</div>;
+};
 
-export default Footer
+export default Footer;
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -1,53 +1,53 @@
-import Image from 'next/image'
-import Darkmode from '../Common/Darkmode'
-import Link from 'next/link'
-import SizeIndicator from './SizeIndicator'
+import Image from 'next/image';
+import Darkmode from '../Common/Darkmode';
+import Link from 'next/link';
+import SizeIndicator from './SizeIndicator';
 const Header: React.FC = () => {
   return (
     <>
       <SizeIndicator />
-      <nav className='fixed inset-0 z-10 flex items-center justify-between px-10 bg-lightBg dark:bg-darkBg max-h-24'>
+      <nav className="fixed inset-0 z-10 flex items-center justify-between px-10 bg-lightBg dark:bg-darkBg max-h-24">
         <Darkmode />
-        <ul className='hidden md:flex md:gap-10'>
-          <li className='flex items-center gap-2 cursor-pointer body-roman'>
+        <ul className="hidden md:flex md:gap-10">
+          <li className="flex items-center gap-2 cursor-pointer body-roman">
             <span>קהילה</span>
-            <div className='relative w-[10px] h-[10px]'>
+            <div className="relative w-[10px] h-[10px]">
               <Image
                 src={'/images/polygon_white.svg'}
-                alt='polygon'
-                className='absolute inset-0 hidden dark:block -z-10 dark:z-10'
+                alt="polygon"
+                className="absolute inset-0 hidden dark:block -z-10 dark:z-10"
                 width={10}
                 height={10}
                 style={{ width: 10, height: 10 }}
               />
               <Image
                 src={'/images/polygon_dark.svg'}
-                className='absolute inset-0 dark:hidden'
-                alt='polygon'
+                className="absolute inset-0 dark:hidden"
+                alt="polygon"
                 width={10}
                 height={10}
                 style={{ width: 10, height: 10 }}
               />
             </div>
           </li>
-          <li className='cursor-pointer body-roman'>
-            <Link href='/projects'>הפרויקטים</Link>
+          <li className="cursor-pointer body-roman">
+            <Link href="/projects">הפרויקטים</Link>
           </li>
-          <li className='cursor-pointer body-roman'>
-            <Link href='/about'>מי אנחנו</Link>
+          <li className="cursor-pointer body-roman">
+            <Link href="/about">מי אנחנו</Link>
           </li>
         </ul>
-        <Link href='/'>
+        <Link href="/">
           <Image
-            src='/images/maakafLogo.png'
-            alt='maakafLogo'
+            src="/images/maakafLogo.png"
+            alt="maakafLogo"
             width={40}
             height={42}
           />
         </Link>
       </nav>
     </>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/components/Header/SizeIndicator.tsx b/components/Header/SizeIndicator.tsx
@@ -1,18 +1,18 @@
 const SizeIndicator = () => {
   if (process.env.NODE_ENV === 'development') {
     return (
-      <div className='fixed left-0 top-0 z-50 flex w-[30px] items-center justify-center bg-gray-200 py-[2.5px] text-[12px] uppercase text-black sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 xl:bg-blue-200 2xl:bg-pink-200'>
-        <span className='block sm:hidden'>all</span>
-        <span className='hidden sm:block md:hidden'>sm</span>
-        <span className='hidden md:block lg:hidden'>md</span>
-        <span className='hidden lg:block xl:hidden'>lg</span>
-        <span className='hidden xl:block 2xl:hidden'>xl</span>
-        <span className='hidden 2xl:block'>2xl</span>
+      <div className="fixed left-0 top-0 z-50 flex w-[30px] items-center justify-center bg-gray-200 py-[2.5px] text-[12px] uppercase text-black sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 xl:bg-blue-200 2xl:bg-pink-200">
+        <span className="block sm:hidden">all</span>
+        <span className="hidden sm:block md:hidden">sm</span>
+        <span className="hidden md:block lg:hidden">md</span>
+        <span className="hidden lg:block xl:hidden">lg</span>
+        <span className="hidden xl:block 2xl:hidden">xl</span>
+        <span className="hidden 2xl:block">2xl</span>
       </div>
-    )
+    );
   } else {
-    return null
+    return null;
   }
-}
+};
 
-export default SizeIndicator
+export default SizeIndicator;