Add news letter link

ParadoxZero · Sep 28, 2024 · 259ed36 · 259ed36
1 parent 6239948
commit 259ed36
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 73 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -70,7 +70,7 @@ function App() {
       <div style={{ marginTop: 50, backgroundImage: bgUrl }}>
         <RouterProvider router={router} />
       </div>
-      <Header news={info.latest_news} />
+      <Header newsletter={info.news_letter} news={info.latest_news} />
     </>
   )
 }

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -7,80 +7,10 @@ import avatar from '../assets/logo.png';
 
 type MenuItem = Required<MenuProps>['items'][number];
 
-const items: MenuItem[] = [
-    {
-        label: (
-            <a href="/">
-                Home
-            </a>
-        ),
-        key: 'home',
-    },
-    {
-        label: (
-            <Button type='link' style={{ boxShadow: '1px 1px 5px grey' }} href=""> News Letter</Button>
-        ),
-        key: 'newsletter',
-    },
-    {
-        label: '',
-        key: '',
-        icon: <Space />
-    }
-];
-
-const small_items: MenuItem[] = [
-    {
-        label: (
-            <Button type='link' style={{ boxShadow: '1px 1px 5px grey' }} href=""> News Letter</Button>
-        ),
-        key: 'newsletter',
-
-    },
-    {
-        label: (
-            <a href="/">
-                Home
-            </a>
-        ),
-        key: 'home',
-    },
-    {
-        label: (
-            <a href='/vicars'>
-                Vicars
-            </a>
-        ),
-        key: 'vicars',
-    },
-    {
-        label: (
-            <a href='/management'>
-                Management
-            </a>
-        ),
-        key: 'management',
-    },
-    {
-        label: (
-            <a href='/ministries'>
-                Ministries
-            </a>
-        ),
-        key: 'ministries',
-    },
-    {
-        label: (
-            <a href='/gallery'>
-                Gallery
-            </a>
-        ),
-        key: 'gallery',
-    },
-];
 
 export interface HeaderProps {
     news: string[];
+    newsletter: string;
 }
 
 interface HeaderState {
@@ -111,6 +41,28 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
     }
 
     render_big_screen() {
+        const items: MenuItem[] = [
+            {
+                label: (
+                    <a href="/">
+                        Home
+                    </a>
+                ),
+                key: 'home',
+            },
+            {
+                label: (
+                    <Button type='link' style={{ boxShadow: '1px 1px 5px grey' }} href={this.props.newsletter}> News Letter</Button>
+                ),
+                key: 'newsletter',
+            },
+            {
+                label: '',
+                key: '',
+                icon: <Space />
+            }
+        ];
+
         return (
             <>
                 <Menu mode="horizontal"
@@ -132,6 +84,55 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
     }
 
     render_medium_screen() {
+        const small_items: MenuItem[] = [
+            {
+                label: (
+                    <Button type='link' style={{ boxShadow: '1px 1px 5px grey' }} href={this.props.newsletter}> News Letter</Button>
+                ),
+                key: 'newsletter',
+
+            },
+            {
+                label: (
+                    <a href="/">
+                        Home
+                    </a>
+                ),
+                key: 'home',
+            },
+            {
+                label: (
+                    <a href='/vicars'>
+                        Vicars
+                    </a>
+                ),
+                key: 'vicars',
+            },
+            {
+                label: (
+                    <a href='/management'>
+                        Management
+                    </a>
+                ),
+                key: 'management',
+            },
+            {
+                label: (
+                    <a href='/ministries'>
+                        Ministries
+                    </a>
+                ),
+                key: 'ministries',
+            },
+            {
+                label: (
+                    <a href='/gallery'>
+                        Gallery
+                    </a>
+                ),
+                key: 'gallery',
+            },
+        ];
         let render_avatar = false;
         if (window.location.pathname === '/') {
             console.log(window.location.pathname);
@@ -156,6 +157,55 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
     }
 
     render_small_screen() {
+        const small_items: MenuItem[] = [
+            {
+                label: (
+                    <Button type='link' style={{ boxShadow: '1px 1px 5px grey' }} href={this.props.newsletter}> News Letter</Button>
+                ),
+                key: 'newsletter',
+
+            },
+            {
+                label: (
+                    <a href="/">
+                        Home
+                    </a>
+                ),
+                key: 'home',
+            },
+            {
+                label: (
+                    <a href='/vicars'>
+                        Vicars
+                    </a>
+                ),
+                key: 'vicars',
+            },
+            {
+                label: (
+                    <a href='/management'>
+                        Management
+                    </a>
+                ),
+                key: 'management',
+            },
+            {
+                label: (
+                    <a href='/ministries'>
+                        Ministries
+                    </a>
+                ),
+                key: 'ministries',
+            },
+            {
+                label: (
+                    <a href='/gallery'>
+                        Gallery
+                    </a>
+                ),
+                key: 'gallery',
+            },
+        ];
         return (
             <>
                 <Menu mode="horizontal"

diff --git a/src/pages/gallary.tsx b/src/pages/gallary.tsx
@@ -1,4 +1,4 @@
-import { Card, Flex, Image } from "antd";
+import { Flex, Image } from "antd";
 import { getCurrentScreenSize, ScreenSize } from "../service/screen_size";
 
 export function Gallary(props: { url_list: string[] }) {