blog: put use types for Props

dev · dev · commit 9e65a47fce51 · 2023-11-02T05:29:19.000Z
diff --git a/phoenix-blog/src/pages/base.tsx b/phoenix-blog/src/pages/base.tsx
@@ -1,8 +1,15 @@
 import type { FC } from 'hono/jsx';
 import { raw } from 'hono/html';
+import { Blog } from '@phoenix/core/entities';
 
-export const Base: FC = (props) => {
-    const base = (props: any) => (
+type Props = {
+    blog?: Blog,
+    children?: any,
+    title?: string;
+};
+
+export const Base: FC = (props: Props) => {
+    const base = (props: Props) => (
         <html>
             <head>
                 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -14,6 +21,8 @@ export const Base: FC = (props) => {
                 <meta name="robots" content="noindex" />
                 <link href="/theme/index.css" rel="stylesheet" />
                 <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+
+                <title>{ props.blog?.name }{ props.title ? `- ${props.title}` : ''}</title>
             </head>
             <body>
                 <div class="bg-white py-12">
diff --git a/phoenix-blog/src/pages/error.tsx b/phoenix-blog/src/pages/error.tsx
@@ -1,7 +1,11 @@
 import type { FC } from 'hono/jsx';
 import { Base } from './base';
 
-export const ErrorTemplate: FC<{ error: string }> = (props: { error: string }) => {
+type Props = {
+    error: string,
+}
+
+export const ErrorTemplate: FC<Props> = (props: Props) => {
     return (
         <Base>
             <div class="flex flex-col space-y-6">
diff --git a/phoenix-blog/src/pages/page.tsx b/phoenix-blog/src/pages/page.tsx
@@ -2,9 +2,14 @@ import { Blog, Page } from '@phoenix/core/entities';
 import type { FC } from 'hono/jsx';
 import { Base } from './base';
 
-export const PageTemplate: FC<{ page: Page, blog: Blog }> = (props: { page: Page, blog: Blog }) => {
+type Props = {
+    blog: Blog,
+    page: Page,
+}
+
+export const PageTemplate: FC<Props> = (props: Props) => {
     return (
-        <Base blog={props.blog}>
+        <Base blog={props.blog} title={props.page.title}>
             <div class="flex flex-col">
                 <div class="flex">
                     <h2 class="text-3xl font-bold">
diff --git a/phoenix-blog/src/pages/posts.tsx b/phoenix-blog/src/pages/posts.tsx
@@ -3,7 +3,12 @@ import type { FC } from 'hono/jsx';
 import { Base } from './base';
 import { date } from '../utils';
 
-export const PostsTemplate: FC<{ posts: Page[], blog: Blog }> = (props: { posts: Page[], blog: Blog }) => {
+type Props = {
+    posts: Page[],
+    blog: Blog,
+}
+
+export const PostsTemplate: FC<Props> = (props: Props) => {
     return (
         <Base blog={props.blog}>
             {props.posts.map((post) => (
