Merge pull request #19 from /issues/18-feat-footer

feat: フッターを追加
SystemEngineeringTeam · Dec 26, 2024 · 299e633 · 299e633
2 parents ad575db + 3737561
commit 299e633
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx
@@ -0,0 +1,14 @@
+import { styled } from 'restyle';
+
+const FooterStyled = styled('footer', {
+  padding: '5px',
+  color: 'var(--background-color)',
+  backgroundColor: 'var(--on-background-color)',
+  textAlign: 'center',
+});
+
+export default function Footer() {
+  return (
+    <FooterStyled>SET © 2025 Copyright.</FooterStyled>
+  );
+}
diff --git a/app/components/Header/index.tsx b/app/components/Header/index.tsx
@@ -2,17 +2,16 @@ import { Link } from '@remix-run/react';
 import { styled } from 'restyle';
 import Avatar from './Avatar';
 
-const HeaderBase = styled('header', {
+const HeaderStyled = styled('header', {
   padding: '0 20px',
+  backgroundColor: 'var(--on-background-color)',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
   position: 'static',
   top: 0,
   left: 0,
   right: 0,
-
-  backgroundColor: 'var(--on-background-color)',
 });
 
 const Title = styled(Link, {
@@ -30,12 +29,12 @@ const Menu = styled('div', {
 
 export default function Header() {
   return (
-    <HeaderBase>
+    <HeaderStyled>
       <Title to="/">名簿システム</Title>
 
       <Menu>
         <Avatar />
       </Menu>
-    </HeaderBase>
+    </HeaderStyled>
   );
 }
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,6 +1,7 @@
 import type { AuthUser } from '@/services/auth.server';
 import type { LinksFunction, LoaderFunctionArgs } from '@remix-run/cloudflare';
 import AuthUserContext from '@/components/AuthtContext';
+import Footer from '@/components/Footer';
 import Header from '@/components/Header';
 import GlobalStyles from '@/GlobalStyles';
 import { getAuthenticator } from '@/services/auth.server';
@@ -60,6 +61,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
           <GlobalStyles />
           <Header />
           <main>{children}</main>
+          <Footer />
         </AuthUserContext>
         <ScrollRestoration />
         <Scripts />