Commit 05d1de69 authored by Kim, Subin's avatar Kim, Subin
Browse files

CalendarBtn 생성 및 적용

parent 6d46f9f2
import styles from "./buttons.module.scss";
const CalendarBtn = ({ date }) => {
return (
<div className={`d-inline-block position-relative text-center ${styles.calendar}`}>
<strong className="position-absolute top-0 text-white">Today</strong>
<span>10</span>
</div>
)
}
export default CalendarBtn
\ No newline at end of file
......@@ -39,3 +39,30 @@
background-color: #6c757d;
border-color: #6c757d;
}
.calendar {
font-size: 0.435em;
width: 7em;
height: 7.2em;
border-radius: 0.4em;
box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
overflow: hidden;
& * {
display: block;
width: 100%;
}
& strong {
padding: 0.4em 0;
background-color: crimson;
box-shadow: 0 2px 0 crimson;
}
& span {
font-size: 3em;
letter-spacing: -0.05em;
padding-top: 1em;
font-family: "Plex-Medi";
}
}
\ No newline at end of file
import CalendarBtn from "../../components/Buttons/CalendarBtn.js";
import styles from "./admin.module.scss";
const AdminPage = () => {
return (
<>
<p className={`position-absolute user-select-none ${styles.status}`}>관리자님, 환영합니다. | <span className={styles.cursor}>로그아웃</span></p>
<div className="position-absolute" style={{ top: "7px", left: "7px" }}>
<CalendarBtn date="2021-09-28" />
</div>
</>
)
}
......
import Menu from "../components/Menu/Menu.js";
import CalendarBtn from "../components/Buttons/CalendarBtn.js";
import Footer from "../components/Footer.js";
const HomePage = () => {
return (
<>
<Menu />
<div className="position-absolute" style={{ top: "9px", right: "8px" }}>
<CalendarBtn date="2021-10-28" />
</div>
<Footer pathname="schedule/edit" />
</>
)
......
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