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

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

Chap04
Yiqing Zhu 2022-03-26 17:50:10 +11:00
parent a5d1351f92
commit 9830fb1af2
2 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
QandA/frontend/src/Header.css 100644
View File

@ -0,0 +1,13 @@
.container {
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 #e3e2e2;
box-shadow: 0 3px 7px 0 rgba(110, 112, 114, 0.21);
}

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

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { UserIcon } from './Icons'; import { UserIcon } from './Icons';
import './Header.css';
export const Header = () => { export const Header = () => {
const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -7,7 +8,7 @@ export const Header = () => {
}; };
return ( return (
<div> <div className="container">
<a href="./">Q & A</a> <a href="./">Q & A</a>
<input <input
type="text" type="text"