feat: blog post close btn

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>

src/assets/close.svg

@@ -0,0 +1,6 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="10.1675" y="8.91211" width="1.87209" height="12.5065" transform="rotate(135 10.1675 8.91211)" fill="#B5B5B5"/>
+<rect x="8.91211" y="7.71021" width="1.87209" height="12.5065" transform="rotate(45 8.91211 7.71021)" fill="#B5B5B5"/>
+<rect x="7.87988" y="8.96533" width="1.87209" height="12.5065" transform="rotate(-45 7.87988 8.96533)" fill="#B5B5B5"/>
+<rect x="9.13477" y="10.1672" width="1.87209" height="12.5065" transform="rotate(-135 9.13477 10.1672)" fill="#B5B5B5"/>
+</svg>

src/pages/blog/Home.tsx

@@ -10,7 +10,7 @@ const Header: React.FC = () => {
 	return (
 		<header
 			className={css`
-				padding: 1rem;
+				padding-inline: 1rem;
 				margin-bottom: 4rem;
 			`}>
 			<div>

src/pages/blog/components/BlogContent.tsx

@@ -6,6 +6,7 @@ import "../../../blog.css";
 import { ArticleSubHeader } from "./ArticleSubHeader";
 import { css, cx } from "@emotion/css";
 import { ReactComponent as Arrow } from "../../../assets/arrow-thin.svg";
+import { ReactComponent as Close } from "../../../assets/close.svg";
 import { ellipses, useNav } from "../../../util";
 
 const Markdown: React.FC<{ content: string }> = ({ content }) => {
@@ -149,7 +150,15 @@ export const BlogPost: React.FC = () => {
 
 	return (
 		<>
-			<span className="closer"></span>
+			<Close
+				role="button"
+				onClick={navigate("/blog")}
+				className={css`
+					min-height: 1rem;
+					min-width: 1rem;
+					cursor: pointer;
+				`}
+			/>
 			<img
 				className={css`
 					max-width: 80%;