fix: twitter, I mean X, icon (#82)

src/layouts/default/components/footer.astro

@@ -1,6 +1,7 @@
 ---
-import { GithubIcon, LinkedinIcon, MailIcon, TwitterIcon } from "astro-feather";
+import { GithubIcon, LinkedinIcon, MailIcon } from "astro-feather";
 import AnchorIcon from "~/ui/components/anchor-icon.astro";
+import XIcon from "~/ui/icons/x.astro";
 import { cn } from "~/utils/cn";
 
 const { class: className, ...otherProps } = Astro.props;
@@ -19,9 +20,9 @@ const contacts: Contact[] = [
     href: "https://github.com/rqbazan",
   },
   {
-    icon: TwitterIcon,
-    network: "twitter",
-    href: "https://twitter.com/rqbazan",
+    icon: XIcon,
+    network: "x",
+    href: "https://x.com/rqbazan",
   },
   {
     icon: LinkedinIcon,

src/pages/projects/index.astro

@@ -208,7 +208,7 @@ import ProjectPost from "./_components/project-post.astro";
         The Quest for the Perfect Dark Mode
       </Anchor>{" "}
       by{" "}
-      <Anchor href="https://twitter.com/JoshWComeau"> Josh Comeau </Anchor>
+      <Anchor href="https://x.com/JoshWComeau"> Josh Comeau </Anchor>
       , I've created a reusable solution for the dark-mode-flick-problem. My own
       website use this solution.
     </ProjectPost>

src/ui/icons/layout.astro

@@ -0,0 +1,18 @@
+---
+export interface Props extends astroHTML.JSX.SVGAttributes {
+  size?: number;
+}
+
+const { size, ...otherProps } = Astro.props;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size ?? 24}
+  height={size ?? 24}
+  fill="currentColor"
+  viewBox="0 0 24 24"
+  {...otherProps}
+>
+  <slot />
+</svg>

src/ui/icons/x.astro

@@ -0,0 +1,13 @@
+---
+import Layout from "./layout.astro";
+
+export interface Props extends astroHTML.JSX.SVGAttributes {
+  size?: number;
+}
+---
+
+<Layout {...Astro.props}>
+  <title>X</title><path
+    d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
+  ></path>
+</Layout>