avraham
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

shows search row

Browse Source
main
Avraham Sakal 6 months ago
parent a1e44c5d45
commit 79128db4f2
9 changed files with 303 additions and 21 deletions
Show Stats Download Patch File Download Diff File

22
index.html
Unescape Escape View File

@ -1,14 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title>Tech Blog</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title>Tech Blog</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>

215
public/logo.svg
Unescape Escape View File

@ -0,0 +1,215 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg2"
viewBox="0 0 1316.6801 1022"
sodipodi:docname="programming-language-pdv.eps"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs6" />
<sodipodi:namedview
id="namedview4"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false" />
<g
id="g10"
inkscape:groupmode="layer"
inkscape:label="Page 1"
transform="matrix(1.3333333,0,0,-1.3333333,0,1282.3467)">
<g
id="g12"
transform="scale(0.1)">
<path
d="M 2744.23,4654.53 H 9875.07 V 9617.6 H 2744.23 V 4654.53"
style="fill:#8e969f;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path64" />
<path
d="M 2744.23,8733.38 H 9875.07 V 8857 H 2744.23 v -123.62"
style="fill:#7d8892;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path66" />
<path
d="M 2744.23,8856.96 H 9875.07 V 9617.6 H 2744.23 v -760.64"
style="fill:#bbc0c6;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path68" />
<path
d="m 2976.16,9059.01 h 356.56 v 356.56 h -356.56 v -356.56"
style="fill:#f78d9f;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path70" />
<path
d="m 3372.29,9059.01 h 356.57 v 356.56 h -356.57 v -356.56"
style="fill:#fabd1f;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path72" />
<path
d="m 3768.47,9059.01 h 356.56 v 356.56 h -356.56 v -356.56"
style="fill:#b7d8f2;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path74" />
<path
d="M 0,1976.68 H 8018.78 V 7557.75 H 0 V 1976.68"
style="fill:#464e58;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path76" />
<path
d="m 0,6702.41 h 8018.78 v 855.34 H 0 v -855.34"
style="fill:#616b76;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path78" />
<path
d="m 0,6563.41 h 8018.78 v 138.98 H 0 v -138.98"
style="fill:#434a52;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path80" />
<path
d="m 295.691,6384.35 c 26.555,0 48.137,-21.58 48.137,-48.14 0,-26.55 -21.582,-48.13 -48.137,-48.13 -26.55,0 -48.101,21.58 -48.101,48.13 0,26.56 21.551,48.14 48.101,48.14 z m 0,-4001.72 c 26.555,0 48.125,-21.54 48.125,-48.1 0,-26.59 -21.57,-48.13 -48.125,-48.13 -26.558,0 -48.101,21.54 -48.101,48.13 0,26.56 21.543,48.1 48.101,48.1 z m 0,250.1 c 26.555,0 48.125,-21.55 48.125,-48.1 0,-26.59 -21.57,-48.1 -48.125,-48.1 -26.558,0 -48.101,21.51 -48.101,48.1 0,26.55 21.543,48.1 48.101,48.1 z m 0,250.09 c 26.555,0 48.125,-21.54 48.125,-48.09 0,-26.55 -21.57,-48.11 -48.125,-48.11 -26.558,0 -48.101,21.56 -48.101,48.11 0,26.55 21.543,48.09 48.101,48.09 z m 0,250.14 c 26.555,0 48.125,-21.54 48.125,-48.13 0,-26.56 -21.57,-48.1 -48.125,-48.1 -26.558,0 -48.101,21.54 -48.101,48.1 0,26.59 21.543,48.13 48.101,48.13 z m 0,250.1 c 26.555,0 48.137,-21.54 48.125,-48.14 0,-26.55 -21.57,-48.09 -48.125,-48.09 -26.558,0 -48.101,21.54 -48.101,48.09 0,26.6 21.543,48.14 48.101,48.14 z m 0,250.1 c 26.555,0 48.137,-21.55 48.137,-48.1 0,-26.59 -21.582,-48.13 -48.137,-48.13 -26.558,0 -48.101,21.54 -48.101,48.13 0,26.55 21.543,48.1 48.101,48.1 z m 0,250.09 c 26.555,0 48.137,-21.54 48.137,-48.09 0,-26.59 -21.582,-48.11 -48.137,-48.11 -26.558,0 -48.101,21.52 -48.101,48.11 0,26.55 21.543,48.09 48.101,48.09 z m 0,250.1 c 26.555,0 48.137,-21.54 48.137,-48.09 0,-26.56 -21.582,-48.1 -48.137,-48.1 -26.558,0 -48.101,21.54 -48.101,48.1 0,26.55 21.543,48.09 48.101,48.09 z m 0,500.24 c 26.555,0 48.137,-21.55 48.137,-48.1 0,-26.59 -21.582,-48.1 -48.137,-48.1 -26.558,0 -48.101,21.51 -48.101,48.1 0,26.55 21.543,48.1 48.101,48.1 z m 0,250.09 c 26.555,0 48.137,-21.54 48.137,-48.09 0,-26.59 -21.582,-48.11 -48.137,-48.11 -26.558,0 -48.101,21.52 -48.101,48.11 0,26.55 21.543,48.09 48.101,48.09 z m 0,250.1 c 26.555,0 48.137,-21.5 48.137,-48.09 0,-26.6 -21.582,-48.11 -48.137,-48.11 -26.558,0 -48.101,21.51 -48.101,48.11 0,26.59 21.543,48.09 48.101,48.09 z m 0,250.1 c 26.555,0 48.137,-21.5 48.137,-48.1 0,-26.59 -21.582,-48.09 -48.137,-48.09 -26.558,0 -48.101,21.5 -48.101,48.09 0,26.6 21.543,48.1 48.101,48.1 z m 0,250.1 c 26.555,0 48.137,-21.51 48.137,-48.1 0,-26.55 -21.582,-48.09 -48.137,-48.09 -26.558,0 -48.101,21.54 -48.101,48.09 0,26.59 21.543,48.1 48.101,48.1 z m 0,250.13 c 26.555,0 48.137,-21.54 48.137,-48.13 0,-26.55 -21.582,-48.1 -48.137,-48.1 -26.558,0 -48.101,21.55 -48.101,48.1 0,26.59 21.543,48.13 48.101,48.13 z m 0,-1500.62 c 26.555,0 48.137,-21.58 48.137,-48.14 0,-26.55 -21.582,-48.09 -48.137,-48.09 -26.558,0 -48.101,21.54 -48.101,48.09 0,26.56 21.543,48.14 48.101,48.14 z m 0,1750.72 c 26.555,0 48.137,-21.54 48.137,-48.09 0,-26.57 -21.582,-48.14 -48.137,-48.14 -26.55,0 -48.101,21.57 -48.101,48.14 0,26.55 21.551,48.09 48.101,48.09 v 0"
style="fill:#9ac421;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path82" />
<path
d="m 958.176,4394.17 c 257.894,0 515.784,0 773.714,0 0,-39.23 0,-78.41 0,-117.6 -257.93,0 -515.82,0 -773.714,0 0,39.19 0,78.37 0,117.6 z m 0,-1000.43 c 257.894,0 515.784,0 773.714,0 0,-39.19 0,-78.41 0,-117.6 -257.93,0 -515.82,0 -773.714,0 0,39.19 0,78.41 0,117.6 z m 0,1500.67 H 1731.89 V 4776.77 H 958.176 v 117.64 0"
style="fill:#f68656;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path84" />
<path
d="M 958.176,6144.89 H 1731.89 V 6027.33 H 958.176 v 117.56"
style="fill:#f68656;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path86" />
<path
d="m 2437.57,2893.55 h 2505.27 c 0,-39.23 0,-78.42 0,-117.64 H 2437.57 Z M 532.949,6394.99 H 5193.32 V 6277.42 H 532.949 v 117.57 0"
style="fill:#c0e365;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path88" />
<path
d="m 532.949,4644.27 c 41.414,0 82.832,0 124.207,0 0,-39.23 0,-78.41 0,-117.6 -41.375,0 -82.793,0 -124.207,0 0,39.19 0,78.37 0,117.6"
style="fill:#c0e365;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path90" />
<path
d="m 3022.83,2643.41 h 485.55 c 0,-39.19 0,-78.38 0,-117.6 h -485.55 v 117.6"
style="fill:#e8e8e7;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path92" />
<path
d="m 1488.03,2643.41 h 418.34 v -117.6 h -418.34 c 0,39.22 0,78.41 0,117.6"
style="fill:#e8e8e7;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path94" />
<path
d="m 1390.64,2893.55 h 872.11 v -117.64 h -872.11 v 117.64"
style="fill:#e8e8e7;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path96" />
<path
d="M 958.176,2893.55 H 1215.86 V 2775.91 H 958.176 c 0,39.22 0,78.41 0,117.64"
style="fill:#e8e8e7;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path98" />
<path
d="m 4010.14,3143.64 h 567.4 c 0,-39.22 0,-78.4 0,-117.59 l -567.4,-0.01 v 117.6"
style="fill:#e8e8e7;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path100" />
<path
d="m 2651.37,3143.64 h 1183.95 v -117.6 H 2651.37 v 117.6"
style="fill:#e8e8e7;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path102" />
<path
d="m 1559.97,3143.64 h 916.62 v -117.6 h -916.62 v 117.6"
style="fill:#f9de1b;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path104" />
<path
d="m 958.176,3143.64 h 426.974 v -117.6 H 958.176 c 0,39.2 0,78.38 0,117.6"
style="fill:#e8e8e7;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path106" />
<path
d="m 2366.3,3643.84 h 420.39 c 0,-39.19 0,-78.38 0,-117.6 H 2366.3 v 117.6"
style="fill:#f68313;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path108" />
<path
d="m 1488.03,3643.84 h 703.44 v -117.6 h -703.44 c 0,39.22 0,78.41 0,117.6"
style="fill:#e8e8e7;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path110" />
<path
d="m 2951.55,3893.98 h 1678.06 c 0,-39.23 0,-78.42 0,-117.64 H 2951.55 v 117.64"
style="fill:#e8e8e7;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path112" />
<path
d="m 2009.87,3893.98 h 766.87 v -117.64 h -766.87 v 117.64"
style="fill:#e8e8e7;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path114" />
<path
d="m 1488.03,3893.98 h 347.06 v -117.64 h -347.06 c 0,39.22 0,78.41 0,117.64"
style="fill:#e8e8e7;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path116" />
<path
d="m 3203.67,4144.07 h 108.69 c 0,-39.22 0,-78.4 0,-117.6 h -108.69 v 117.6"
style="fill:#e8e8e7;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path118" />
<path
d="m 2749.28,4144.07 h 279.57 v -117.6 h -279.57 v 117.6"
style="fill:#e8e8e7;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path120" />
<path
d="m 1488.03,4144.07 h 594.17 v -117.6 h -594.17 c 0,39.19 0,78.38 0,117.6"
style="fill:#e8e8e7;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path122" />
<path
d="m 2615.6,5144.5 h 1271.37 c 0,-39.22 0,-78.41 0,-117.63 H 2615.6 v 117.63"
style="fill:#cdccca;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path124" />
<path
d="m 2980.02,2393.31 h 91.78 v -117.59 h -91.78 z m -877.61,0 h 702.8 v -117.59 h -702.8 z m -1144.234,0 H 1927.6 V 2275.72 H 958.176 Z M 1488.03,5144.5 h 952.74 v -117.63 h -952.74 v 117.63 0"
style="fill:#cd5629;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path126" />
<path
d="m 2081.18,2643.41 h 766.83 v -117.6 h -766.83 z m 175.83,1500.66 h 317.44 v -117.6 h -317.44 z m 394.26,1250.53 h 903.25 v -117.63 h -903.25 v 117.63 0"
style="fill:#f68313;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path128" />
<path
d="m 1842.71,5394.6 h 633.74 v -117.63 h -633.74 v 117.63"
style="fill:#cdccca;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path130" />
<path
d="m 1488.03,5394.6 h 179.86 v -117.63 h -179.86 v 117.63"
style="fill:#cdccca;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path132" />
<path
d="m 3319.5,5644.7 h 339.16 V 5527.1 H 3319.5 v 117.6"
style="fill:#cdccca;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path134" />
<path
d="m 2865.07,5644.7 h 279.61 v -117.6 h -279.61 v 117.6"
style="fill:#cdccca;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path136" />
<path
d="m 2372.84,5644.7 h 317.44 v -117.6 h -317.44 v 117.6"
style="fill:#cdccca;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path138" />
<path
d="m 1488.03,5644.7 h 709.99 v -117.6 h -709.99 v 117.6"
style="fill:#8ebae6;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path140" />
<path
d="m 2972.02,5894.8 h 903.25 v -117.57 h -903.25 v 117.57"
style="fill:#cdccca;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path142" />
<path
d="M 2163.46,5894.8 H 2797.2 V 5777.23 H 2163.46 V 5894.8"
style="fill:#cdccca;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path144" />
<path
d="m 1488.03,5894.8 h 500.61 v -117.57 h -500.61 v 117.57"
style="fill:#cdccca;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path146" />
<path
d="m 260.852,6929.58 h 400.933 v 400.94 H 260.852 v -400.94"
style="fill:#f1485f;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path148" />
<path
d="m 706.34,6929.58 h 400.94 v 400.94 H 706.34 v -400.94"
style="fill:#f1a40f;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path150" />
<path
d="m 1151.83,6929.58 h 400.93 v 400.94 h -400.93 v -400.94"
style="fill:#8ebae6;fill-opacity:1;fill-rule:evenodd;stroke:none"
id="path152" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

2
src/Blog/SearchHeader/SearchRow/Logo/Logo.tsx
Unescape Escape View File

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

8
src/Blog/SearchHeader/SearchRow/SearchButton/SearchButton.tsx
Unescape Escape View File

@ -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>
);
}

21
src/Blog/SearchHeader/SearchRow/SearchRow.tsx
Unescape Escape View File

@ -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>
);
}

4
src/Blog/SearchHeader/SearchRow/SearchTextBox/SearchTextBox.tsx
Unescape Escape View File

@ -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" />;
}

4
src/Blog/SearchHeader/TagCloud/TagCloud.tsx
Unescape Escape View File

@ -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>;
}

2
src/index.tsx
Unescape Escape View File

@ -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} />

46
src/style.css
Unescape Escape View File

@ -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;
}
} */
Write Preview
Loading…
Cancel
Save