Jason
/
safaribook-aspnet-core5-and-react
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Chap04 -> Styling components with Emotion -> Styling the Header component

Chap04
Yiqing Zhu 2022-03-28 19:58:15 +11:00
parent e4f41e5d8d
commit 26f7fc4582
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
QandA/frontend/src/Header.tsx
View File

@ -1,6 +1,9 @@
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
import React from 'react'; import React from 'react';
import { UserIcon } from './Icons'; import { UserIcon } from './Icons';
import style from './Header.module.css';
export const Header = () => { export const Header = () => {
const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -8,7 +11,21 @@ export const Header = () => {
}; };
return ( return (
<div className={style.container}> <div
css={css`
position: fixed;
box-sizing: border-box;
top: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
background-color: #fff;
border-bottom: 1px solid ${gray5};
box-shadow: 0 3px 7px 0 rgba(100, 112, 114, 0.21);
`}
>
<a href="./">Q & A</a> <a href="./">Q & A</a>
<input <input
type="text" type="text"