Commit 9eba4e12 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Header navigation

parent 8232407d
import React from "react"; import React from "react";
import HomePage from "./Pages/HomePage"; import HomePage from "./Pages/HomePage";
// import LoginPage from "./Pages/LoginPage"; import LoginPage from "./Pages/LoginPage";
// import SignUpPage from "./Pages/SignUpPage"; import SignUpPage from "./Pages/SignUpPage";
import { BrowserRouter, Route, Routes } from "react-router-dom"; import { BrowserRouter, Route, Routes } from "react-router-dom";
import "tailwindcss/tailwind.css"; import "tailwindcss/tailwind.css";
...@@ -10,8 +10,8 @@ export const App = () => { ...@@ -10,8 +10,8 @@ export const App = () => {
<BrowserRouter> <BrowserRouter>
<Routes> <Routes>
<Route path="/" element={<HomePage />}> <Route path="/" element={<HomePage />}>
{/* <Route path="login" element={<LoginPage />} /> <Route path="login" element={<LoginPage />} />
<Route path="signup" element={<SignUpPage />} /> */} <Route path="signup" element={<SignUpPage />} />
</Route> </Route>
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
......
import React from "react";
import { Link } from "react-router-dom";
import "tailwindcss/tailwind.css";
type HeaderProps = {
};
const Header = ({ }: HeaderProps) => (
<div className="bg-white border-b-2 border-b-themeColor px-2 sm:px-4 py-2.5 dark:bg-gray-800">
<div className="container flex flex-wrap justify-between items-center mx-auto">
<Link to="/" className="font-bold text-2xl text-themeColor"> Simple Survey Form </Link>
<div className="md:flex items-center justify-end md:flex-1 lg:w-0">
<Link to="/login" className="whitespace-nowrap font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">Login</Link>
<Link to="/signup" className="whitespace-nowrap font-bold text-white hover:bg-blue-500 mx-1 py-2 px-3 bg-themeColor rounded-md ">Sign Up</Link>
</div>
</div>
</div>
);
export default Header;
\ No newline at end of file
import React from "react"; import React from "react";
import Header from "../Components/Header";
import "tailwindcss/tailwind.css"; import "tailwindcss/tailwind.css";
import { Outlet } from "react-router-dom";
type HomeProps = { type HomeProps = {
title?: string;
}; };
const HomePage = ({ title = "Simple Survey Form" }: HomeProps) => ( const HomePage = ({}: HomeProps) => (
<div className="text-slate-300 text-3xl font-bold"> <div className="">
{title} <Header/>
<Outlet />
</div> </div>
); );
......
import React from "react"; import React from "react";
import "tailwindcss/tailwind.css"; import "tailwindcss/tailwind.css";
type LoginProps = { // type LoginProps = {
}; // };
const LoginPage = ({ }: LoginProps) => ( const LoginPage = () => (
<div className="text-slate-300 text-3xl font-bold"> <div className="text-slate-300 text-3xl font-bold">
로그인페이지 로그인페이지
</div> </div>
......
...@@ -2,7 +2,11 @@ ...@@ -2,7 +2,11 @@
module.exports = { module.exports = {
content: ["./src/**/*.{html,js,jsx,ts,tsx}"], content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
theme: { theme: {
extend: {}, extend: {
colors: {
'themeColor': '#58ACFA',
},
},
}, },
plugins: [], plugins: [],
}; };
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment