feat: add home link to navbar, minor styling changes

Blazity · Sep 21, 2023 · aaf4a80 · aaf4a80
1 parent 9b1afed
commit aaf4a80
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 13 deletions.
diff --git a/src/app/[lang]/[slug]/page.tsx b/src/app/[lang]/[slug]/page.tsx
@@ -27,8 +27,8 @@ export default async function Web({ params: { slug, lang } }: CustomPageProps) {
 
   if (!page) notFound()
   return (
-    <section className="w-full px-4 pb-16">
-      <h1>{page.title}</h1>
+    <section className="w-full px-4 pb-16 pt-8">
+      <h1 className="mb-8 text-2xl font-semibold">{page.title}</h1>
       <RichText raw={page.content?.raw} />
     </section>
   )

diff --git a/src/app/[lang]/article/[slug]/page.tsx b/src/app/[lang]/article/[slug]/page.tsx
@@ -48,7 +48,7 @@ export default async function Web({ params: { slug, lang } }: ArticlePageProps)
 
   if (!article) return null
   return (
-    <article className="w-full px-4 pb-16">
+    <article className="w-full px-4 pb-16 pt-8">
       {article.coverImage && (
         <Image
           src={article.coverImage.url}

diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
@@ -9,7 +9,7 @@ export default async function Web({ params }: { params: { lang: Locale } }) {
       <div className="flex w-full justify-end px-4 pt-4">
         <StockDisplay />
       </div>
-      <div className="flex w-full flex-col gap-16">
+      <div className="flex w-full flex-col gap-16 pt-4">
         <TrendingArticles lang={params.lang} />
         <RecentArticles lang={params.lang} />
       </div>

diff --git a/src/components/LangSelect/LangSelect.tsx b/src/components/LangSelect/LangSelect.tsx
@@ -18,7 +18,7 @@ function LangSelect() {
 
   return (
     <Select value={lang} onValueChange={(locale) => router.push(`/${locale}`)}>
-      <SelectTrigger className="w-[100px]" aria-label="language select">
+      <SelectTrigger className="w-[100px] min-w-[100px]" aria-label="language select">
         <SelectValue>{lang}</SelectValue>
       </SelectTrigger>
       <SelectContent className="bg-white">

diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
@@ -12,12 +12,19 @@ export async function Navigation({ lang }: NavigationProps) {
   const navElements = navigations[0]?.pages
 
   return (
-    <ul className="flex items-center justify-center gap-5 px-4">
-      {navElements?.map((navElement) => (
-        <li key={navElement?.slug}>
-          <Link href={`/${lang}/${navElement?.slug}`}>{navElement?.title}</Link>
-        </li>
-      ))}
-    </ul>
+    <div className="flex w-full items-center justify-between gap-5 pr-4">
+      <Link href={`/${lang}/`} prefetch={false}>
+        {"Home"}
+      </Link>
+      <ul className="flex gap-5">
+        {navElements?.map((navElement) => (
+          <li key={navElement?.slug}>
+            <Link href={`/${lang}/${navElement?.slug}`} prefetch={false}>
+              {navElement?.title}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
   )
 }
diff --git a/src/components/Search/SearchDialog.tsx b/src/components/Search/SearchDialog.tsx
@@ -37,7 +37,7 @@ function SearchDialogContent() {
           aria-label="Open search dialog"
           name="Search"
         >
-          <div className="flex items-center gap-4 px-1">
+          <div className="flex min-w-[200px] items-center gap-4 px-1">
             <Search className="h-4 w-4" />
             Search for an article
           </div>