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

public/images/logo.svg

@@ -0,0 +1,6 @@
+<svg width="602" height="360" viewBox="0 0 602 360" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M481.36 180C481.36 196.572 474.639 211.572 463.757 222.42C452.875 233.28 437.845 240 421.24 240C404.635 240 389.605 246.708 378.735 257.568C367.853 268.428 361.12 283.428 361.12 300C361.12 316.572 354.399 331.572 343.517 342.42C332.635 353.28 317.605 360 301 360C284.395 360 269.365 353.28 258.495 342.42C247.613 331.572 240.88 316.572 240.88 300C240.88 283.428 247.613 268.428 258.495 257.568C269.365 246.708 284.395 240 301 240C317.605 240 332.635 233.28 343.517 222.42C354.399 211.572 361.12 196.572 361.12 180C361.12 146.856 334.21 120 301 120C284.395 120 269.365 113.28 258.495 102.42C247.613 91.572 240.88 76.572 240.88 60C240.88 43.428 247.613 28.428 258.495 17.568C269.365 6.708 284.395 0 301 0C334.21 0 361.12 26.856 361.12 60C361.12 76.572 367.853 91.572 378.735 102.42C389.605 113.28 404.635 120 421.24 120C454.45 120 481.36 146.856 481.36 180Z" fill="#F44250"/>
+<path d="M240.88 180C240.88 146.862 213.964 120 180.76 120C147.557 120 120.64 146.862 120.64 180C120.64 213.137 147.557 240 180.76 240C213.964 240 240.88 213.137 240.88 180Z" fill="#121212"/>
+<path d="M120.64 300C120.64 266.863 93.7234 240 60.52 240C27.3167 240 0.400024 266.863 0.400024 300C0.400024 333.138 27.3167 360 60.52 360C93.7234 360 120.64 333.138 120.64 300Z" fill="#121212"/>
+<path d="M601.6 300C601.6 266.863 574.683 240 541.48 240C508.277 240 481.36 266.863 481.36 300C481.36 333.138 508.277 360 541.48 360C574.683 360 601.6 333.138 601.6 300Z" fill="#121212"/>
+</svg>