From f8a87019af5e5d0db2d86aa5f0aef1003dfd7a8d Mon Sep 17 00:00:00 2001 From: Ardeman Date: Fri, 31 Jan 2025 19:34:22 +0800 Subject: [PATCH] feat: add new components and layouts for news and dashboard pages --- app/app.css | 11 ++------ app/components/button.tsx | 3 ++ app/configs/meta.ts | 1 + app/data/dummy.ts | 4 +++ app/pages/news/header-top.tsx | 28 +++++++++++++++++++ app/pages/news/index.tsx | 14 ++++++++++ app/{layouts/home => pages}/welcome/index.tsx | 0 .../home => pages}/welcome/logo-dark.svg | 0 .../home => pages}/welcome/logo-light.svg | 0 app/routes/_layout._index.tsx | 2 +- app/routes/_layout.dashboard.tsx | 5 ++++ app/routes/_layout.news._index.tsx | 5 ++++ app/routes/_layout.news.tsx | 13 +++++++++ public/images/logo.svg | 6 ++++ 14 files changed, 83 insertions(+), 9 deletions(-) create mode 100644 app/components/button.tsx create mode 100644 app/configs/meta.ts create mode 100644 app/data/dummy.ts create mode 100644 app/pages/news/header-top.tsx create mode 100644 app/pages/news/index.tsx rename app/{layouts/home => pages}/welcome/index.tsx (100%) rename app/{layouts/home => pages}/welcome/logo-dark.svg (100%) rename app/{layouts/home => pages}/welcome/logo-light.svg (100%) create mode 100644 app/routes/_layout.dashboard.tsx create mode 100644 app/routes/_layout.news._index.tsx create mode 100644 app/routes/_layout.news.tsx create mode 100644 public/images/logo.svg diff --git a/app/app.css b/app/app.css index 99345d8..6c0392b 100644 --- a/app/app.css +++ b/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; - } } diff --git a/app/components/button.tsx b/app/components/button.tsx new file mode 100644 index 0000000..41f998c --- /dev/null +++ b/app/components/button.tsx @@ -0,0 +1,3 @@ +export const Button = () => { + return
Button
+} diff --git a/app/configs/meta.ts b/app/configs/meta.ts new file mode 100644 index 0000000..a9047c6 --- /dev/null +++ b/app/configs/meta.ts @@ -0,0 +1 @@ +export const HTML_TITLE = 'React Router' diff --git a/app/data/dummy.ts b/app/data/dummy.ts new file mode 100644 index 0000000..8999af2 --- /dev/null +++ b/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', +} diff --git a/app/pages/news/header-top.tsx b/app/pages/news/header-top.tsx new file mode 100644 index 0000000..109448a --- /dev/null +++ b/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 ( +
+ + {HTML_TITLE} + +
+ {DUMMY.description} +
+
+
+
+ ) +} diff --git a/app/pages/news/index.tsx b/app/pages/news/index.tsx new file mode 100644 index 0000000..d3f7d08 --- /dev/null +++ b/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 = ({ children }) => { + return ( +
+
+ +
+ {children} +
+ ) +} diff --git a/app/layouts/home/welcome/index.tsx b/app/pages/welcome/index.tsx similarity index 100% rename from app/layouts/home/welcome/index.tsx rename to app/pages/welcome/index.tsx diff --git a/app/layouts/home/welcome/logo-dark.svg b/app/pages/welcome/logo-dark.svg similarity index 100% rename from app/layouts/home/welcome/logo-dark.svg rename to app/pages/welcome/logo-dark.svg diff --git a/app/layouts/home/welcome/logo-light.svg b/app/pages/welcome/logo-light.svg similarity index 100% rename from app/layouts/home/welcome/logo-light.svg rename to app/pages/welcome/logo-light.svg diff --git a/app/routes/_layout._index.tsx b/app/routes/_layout._index.tsx index 215e3fd..5fb0267 100644 --- a/app/routes/_layout._index.tsx +++ b/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' diff --git a/app/routes/_layout.dashboard.tsx b/app/routes/_layout.dashboard.tsx new file mode 100644 index 0000000..b8f0bc5 --- /dev/null +++ b/app/routes/_layout.dashboard.tsx @@ -0,0 +1,5 @@ +const DashboardLayout = () => { + return
Dashboard
+} + +export default DashboardLayout diff --git a/app/routes/_layout.news._index.tsx b/app/routes/_layout.news._index.tsx new file mode 100644 index 0000000..db7492b --- /dev/null +++ b/app/routes/_layout.news._index.tsx @@ -0,0 +1,5 @@ +const NewsIndexLayout = () => { + return
News
+} + +export default NewsIndexLayout diff --git a/app/routes/_layout.news.tsx b/app/routes/_layout.news.tsx new file mode 100644 index 0000000..318fa2d --- /dev/null +++ b/app/routes/_layout.news.tsx @@ -0,0 +1,13 @@ +import { Outlet } from 'react-router' + +import { NewsPage } from '~/pages/news' + +const NewsLayout = () => { + return ( + + + + ) +} + +export default NewsLayout diff --git a/public/images/logo.svg b/public/images/logo.svg new file mode 100644 index 0000000..a5c5dac --- /dev/null +++ b/public/images/logo.svg @@ -0,0 +1,6 @@ + + + + + +