shows search row

src/Blog/SearchHeader/SearchRow/Logo/Logo.tsx

@@ -1,3 +1,3 @@
 export function Logo() {
-  return <img class="logo"></img>;
+  return <img src="/logo.svg" class="logo" alt="logo" />;
 }

src/Blog/SearchHeader/SearchRow/SearchButton/SearchButton.tsx

@@ -1,3 +1,9 @@
+import Button from "@mui/material/Button";
+
 export function SearchButton() {
-  return <Button class="search-button">Search</Button>;
+  return (
+    <Button class="search-button" variant="contained">
+      Search
+    </Button>
+  );
 }

src/Blog/SearchHeader/SearchRow/SearchRow.tsx

@@ -5,10 +5,23 @@ import { SearchButton } from "./SearchButton/SearchButton";
 
 export function SearchRow() {
   return (
-    <Box class="search-row">
-      <Logo />
-      <SearchTextBox />
-      <SearchButton />
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: "1em",
+      }}
+    >
+      <Box sx={{ flexGrow: 0, width: "5em" }}>
+        <Logo />
+      </Box>
+      <Box sx={{ flexGrow: 1 }}>
+        <SearchTextBox />
+      </Box>
+      <Box sx={{ flexGrow: 0 }}>
+        <SearchButton />
+      </Box>
     </Box>
   );
 }

src/Blog/SearchHeader/SearchRow/SearchTextBox/SearchTextBox.tsx

@@ -1,3 +1,5 @@
+import TextField from "@mui/material/TextField";
+
 export function SearchTextBox() {
-  return <TextField class="search-text-box"></TextField>;
+  return <TextField variant="outlined" label="Search Articles" />;
 }

src/Blog/SearchHeader/TagCloud/TagCloud.tsx

@@ -1,3 +1,5 @@
+import Box from "@mui/material/Box";
+
 export function TagCloud() {
-  return <Box class="tag-cloud"></Box>;
+  return <Box class="tag-cloud">Tags</Box>;
 }

src/index.tsx

@@ -1,7 +1,6 @@
 import { render } from "preact";
 import { LocationProvider, Router, Route } from "preact-iso";
 
-import { Header } from "./components/Header.jsx";
 import { Blog } from "./Blog/Blog.js";
 import { NotFound } from "./_404.js";
 import "./style.css";
@@ -13,7 +12,6 @@ import "@fontsource/roboto/700.css";
 export function App() {
   return (
     <LocationProvider>
-      <Header />
       <main>
         <Router>
           <Route path="/" component={Blog} />

src/style.css

@@ -0,0 +1,46 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color: #222;
+  background-color: #ffffff;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* main {
+  flex: auto;
+  display: flex;
+  align-items: center;
+  max-width: 1280px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+@media (max-width: 639px) {
+  main {
+    margin: 2rem;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: #ccc;
+    background-color: #1a1a1a;
+  }
+} */