chore: convention update

src/app/about/layout.tsx → src/app/(routes)/about/layout.tsx

@@ -5,7 +5,7 @@ export const metadata: Metadata = {
   }
 }
 
-import Header from '@/components/common/Header/Header'
+import Header from '@/components/common/layouts/header/Header'
 import { Metadata } from 'next'
 import { ReactNode } from 'react'
 

src/app/about/page.tsx → src/app/(routes)/about/page.tsx

@@ -1,4 +1,4 @@
-import { MarkdowRenderer } from '@/components/common/Markdowns'
+import { MarkdowRenderer } from '@/components/common/markdowns'
 import React from 'react'
 
 const about = `**👋 Hi, I’m @henrynoowah**

src/app/layout.tsx → src/app/(routes)/layout.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from 'next'
-import './globals.css'
+import 'src/app/styles/globals.css'
 
 export const metadata: Metadata = {
   title: 'NoowaH Blog',

src/app/posts/PostsContainer.tsx → src/app/(routes)/posts/PostsContainer.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 
-import PostCard from '@/components/common/Cards/PostCard'
-import PostCard_skeleton from '@/components/common/Cards/PostCard_skeleton'
+import PostCard from '@/components/common/cards/PostCard'
+import PostCard_skeleton from '@/components/common/cards/PostCard_skeleton'
 import { getPosts } from '@/services/posts'
 import { XMarkIcon } from '@heroicons/react/24/solid'
 import dynamic from 'next/dynamic'

src/app/posts/[slug]/page.tsx → src/app/(routes)/posts/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { MarkdowRenderer } from '@/components/common/Markdowns'
+import { MarkdowRenderer } from '@/components/common/markdowns'
 import { getPost } from '@/services/posts'
 import { Metadata } from 'next/types'
 

src/app/posts/layout.tsx → src/app/(routes)/posts/layout.tsx

@@ -5,7 +5,7 @@ export const metadata: Metadata = {
   }
 }
 
-import Header from '@/components/common/Header/Header'
+import Header from '@/components/common/layouts/header/Header'
 import { Metadata } from 'next'
 import { ReactNode } from 'react'
 

src/app/posts/loading.tsx → src/app/(routes)/posts/loading.tsx

@@ -1,4 +1,4 @@
-import PostCard_skeleton from '@/components/common/Cards/PostCard_skeleton'
+import PostCard_skeleton from '@/components/common/cards/PostCard_skeleton'
 
 const LoadingPosts = () => {
   return (

src/app/works/layout.tsx

@@ -5,7 +5,7 @@ export const metadata: Metadata = {
   }
 }
 
-import Header from '@/components/common/Header/Header'
+import Header from '@/components/common/layouts/header/Header'
 import { Metadata } from 'next'
 import { ReactNode } from 'react'
 

src/components/common/Header/Header.tsx → src/components/common/layouts/header/Header.tsx

@@ -1,10 +1,10 @@
 import Link from 'next/link'
 import packageData from 'package.json'
-import Button from '../Button'
-import ThemeToggle from '../ThemeToggle/ThemeToggle'
+import Button from '../../Button'
 import Nav_mobile from './Nav_mobile'
 import ShowSearchButton from './ShowSearchButton'
 import { Suspense } from 'react'
+import ThemeToggle from '../../themeToggle/ThemeToggle'
 
 const HEADER_HEIGHT = 72
 

src/components/common/Header/Nav_mobile.tsx → src/components/common/layouts/header/Nav_mobile.tsx

@@ -3,7 +3,7 @@
 import { ChevronRightIcon } from '@heroicons/react/24/solid'
 import Link from 'next/link'
 import { useState } from 'react'
-import Button from '../Button'
+import Button from '../../Button'
 import Button_nav from './Button_nav'
 
 interface Params {

src/components/common/layouts/header/SearchButton.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { FormEventHandler, useRef, useState } from 'react'
+
+const SearchButton = () => {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const router = useRouter()
+
+  const search = searchParams.get('search')
+
+  const [inputValue, setInputValue] = useState<string>(search ?? '')
+
+  const [showInput, setShowInput] = useState<boolean>(false)
+
+  const [isFocused, setIsFocused] = useState<boolean>(false)
+
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleSubmit: FormEventHandler = (e) => {
+    e.preventDefault()
+    if (inputValue !== null && inputValue !== '') {
+      router.push(`/posts?search=${inputValue}`)
+    } else {
+      router.push(`${pathname}`)
+    }
+  }
+
+  return pathname.startsWith('/posts') ? (
+    <form onSubmit={handleSubmit} className="flex justify-between relative group transition duration-300 ease-in-out">
+      <div
+        className={`h-[36px] relative duration-300 ease-in-out ring-1 ring-inset ring-light rounded-full overflow-hidden ${
+          showInput ? 'w-[160px] md:w-[240px]' : 'w-[36px]'
+        }`}
+      >
+        <input
+          ref={inputRef}
+          placeholder="Search Post"
+          onChange={(e) => setInputValue(e.target.value)}
+          onMouseDown={() => setIsFocused(true)}
+          onBlur={() => {
+            if (!inputValue) {
+              setIsFocused(false)
+              setShowInput(false)
+            }
+          }}
+          type="search"
+          className={[
+            `absolute w-full h-full items-center placeholder:italic placeholder:text-sm`,
+            `outline-none focus:outline-none transform`,
+            `px-4 text-light/60 bg-transparent`,
+            showInput ? `translate-x-0 pointer-events-auto ` : `translate-x-[100%] pointer-events-none hidden`
+          ].join(' ')}
+        />
+
+        <button
+          type="button"
+          className={`absolute right-0 w-[36px] h-[36px] flex justify-center items-center ring-inset ring-light rounded-full`}
+          onClick={() => {
+            if (!showInput) {
+              setShowInput(true)
+            }
+          }}
+          onBlur={() => {
+            if (!isFocused && !inputValue) {
+              setShowInput(false)
+            }
+          }}
+        >
+          <MagnifyingGlassIcon width={18} height={18} className="text-light z-20" />
+        </button>
+      </div>
+    </form>
+  ) : null
+}
+
+export default SearchButton