feat: add new components and layouts for news and dashboard pages

app/app.css

@@ -1,15 +1,10 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
 html,
 body {
-  @apply bg-white dark:bg-gray-950;
-
-  @media (prefers-color-scheme: dark) {
-    color-scheme: dark;
-  }
 }

app/components/button.tsx

@@ -0,0 +1,3 @@
+export const Button = () => {
+  return <div>Button</div>
+}

app/configs/meta.ts

@@ -0,0 +1 @@
+export const HTML_TITLE = 'React Router'

app/data/dummy.ts

@@ -0,0 +1,4 @@
+export const DUMMY = {
+  description:
+    'Bonus judex secundum aequum et\n bonum judicat et aequitatem stricto juri praefert',
+}

app/pages/news/header-top.tsx

@@ -0,0 +1,28 @@
+import { Link } from 'react-router'
+
+import { Button } from '~/components/button'
+import { HTML_TITLE } from '~/configs/meta'
+import { DUMMY } from '~/data/dummy'
+
+export const HeaderTop = () => {
+  return (
+    <div className="flex h-[100px] items-center justify-between gap-[15px] bg-white px-[50px] py-[20px]">
+      <Link
+        to="/news"
+        className="h-full py-[5px]"
+      >
+        <img
+          src="/images/logo.svg"
+          alt={HTML_TITLE}
+          className="h-full w-auto"
+        />
+      </Link>
+      <div className="flex h-full items-center py-1.5 font-light whitespace-pre-line">
+        {DUMMY.description}
+      </div>
+      <div className="">
+        <Button />
+      </div>
+    </div>
+  )
+}

app/pages/news/index.tsx

@@ -0,0 +1,14 @@
+import React, { type FC, type PropsWithChildren } from 'react'
+
+import { HeaderTop } from './header-top'
+
+export const NewsPage: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <main className="min-h-dvh bg-[#ECECEC]">
+      <header>
+        <HeaderTop />
+      </header>
+      {children}
+    </main>
+  )
+}

app/routes/_layout._index.tsx

@@ -1,4 +1,4 @@
-import { Welcome } from '~/layouts/home/welcome'
+import { Welcome } from '~/pages/welcome'
 
 import type { Route } from './+types/_layout._index'
 

app/routes/_layout.dashboard.tsx

@@ -0,0 +1,5 @@
+const DashboardLayout = () => {
+  return <div>Dashboard</div>
+}
+
+export default DashboardLayout

app/routes/_layout.news._index.tsx

@@ -0,0 +1,5 @@
+const NewsIndexLayout = () => {
+  return <div>News</div>
+}
+
+export default NewsIndexLayout

app/routes/_layout.news.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from 'react-router'
+
+import { NewsPage } from '~/pages/news'
+
+const NewsLayout = () => {
+  return (
+    <NewsPage>
+      <Outlet />
+    </NewsPage>
+  )
+}
+
+export default NewsLayout