Merge pull request #8 from AderKonstantin/theme-switcher

Theme switcher
✨ feat: Remove unused support icon and update header toolbar
2025-04-01 19:40:42 +03:00 · 2025-04-01 19:38:40 +03:00 · 2025-04-01 19:38:40 +03:00 · 2025-04-01 19:38:40 +03:00 · 2025-04-01 19:38:40 +03:00 · 2025-04-01 19:38:40 +03:00
10 changed files with 191 additions and 126 deletions
--- a/app/blogpost/layout.tsx
+++ b/app/blogpost/layout.tsx
@@ -0,0 +1,9 @@
+import "../globals.css";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="m-auto text-base 2xl:w-4xl xl:w-3xl md:w-full">
+      {children}
+    </div>
+  );
+}
--- a/app/blogpost/page.tsx
+++ b/app/blogpost/page.tsx
@@ -0,0 +1,47 @@
+// Markdown and LaTeX page here will be after posting throught BackndPitt
+
+import Image from "next/image";
+import postPic from "@/public/images/retrofuturism.webp"
+
+
+export default function PostPage() {
+  return (
+    <div className="pt-12 pb-8">
+      <h1 className="post-label text-3xl mb-1.5">How to install Docker & Docker Compose</h1>
+      <p className="post-time text-slate-400">Posted <em className="text-indigo-400">20 December 2024</em> | Updated <em className="text-rose-400">12 January 2025</em></p>
+      <div className="mt-4 bg-slate-500 w-10/12 h-90 rounded-2xl flex justify-self-center">
+        {/* <Image
+          src={postPic}
+          alt="RetrospectiveScience"
+          blurDataURL="data:..." // automatically provided
+          placeholder="blur" // Optional blur-up while loading
+          className="rounded-xl"
+        /> */}
+      </div>
+      <p className="mt-4">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec nisi et nunc ullamcorper venenatis non in erat. Phasellus consectetur, lorem et scelerisque rutrum, velit magna lacinia augue, a condimentum elit dolor nec nibh. Nulla vel ligula accumsan, maximus ante vitae, interdum magna. Integer non ex a sapien tristique pharetra. Sed eu laoreet nisl, ac commodo orci. Quisque sit amet facilisis ex. Sed facilisis felis sed neque mattis elementum. Donec sagittis turpis vel dui tristique mollis.
+      </p>
+      <p className="mt-4">
+        Ut rutrum nibh eu nisl dapibus, eget ultricies neque sollicitudin. Fusce ex ipsum, condimentum at arcu at, gravida malesuada mi. Sed tincidunt ipsum nec ultricies porttitor. Maecenas at egestas ipsum. Cras vitae scelerisque quam, vitae sollicitudin quam. In hac habitasse platea dictumst. Aenean a vestibulum felis, sed ultrices dui. Nullam in orci sit amet arcu sodales iaculis nec vitae arcu. Phasellus consequat purus eget nulla porta vulputate.
+      </p>
+      <div className="mt-4 bg-slate-500 w-10/12 h-90 rounded-2xl flex justify-self-center">
+        {/* <Image
+          src={postPic}
+          alt="RetrospectiveScience"
+          blurDataURL="data:..." // automatically provided
+          placeholder="blur" // Optional blur-up while loading
+          className="rounded-xl"
+        /> */}
+      </div>
+      <p className="mt-4">
+        Nam et consequat dui. Fusce est lorem, mattis rutrum porta ac, ultrices eget urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam pharetra condimentum quam, ut pretium lacus finibus vel. Sed porttitor, neque nec volutpat rhoncus, nulla nibh condimentum lacus, non cursus arcu lorem non sem. Maecenas sed mi at sapien sodales suscipit eu non purus. In eget neque commodo, blandit diam id, vestibulum nisi. Phasellus cursus purus congue, tempus dolor sed, ultricies purus. Quisque massa sem, porta accumsan molestie malesuada, maximus vitae felis. Vestibulum sagittis metus erat, vel bibendum est dignissim eget. Duis ligula velit, placerat ut volutpat vel, hendrerit eu risus. Quisque ut ultrices ligula, ut eleifend tortor. Fusce sit amet sapien vulputate, lacinia nisi vitae, luctus diam. Curabitur a nisl sed ipsum tempus fringilla. Nulla feugiat porta convallis.
+      </p>
+      <p className="mt-4">
+        Fusce consequat faucibus augue, ac dapibus tortor facilisis sit amet. Nulla tincidunt scelerisque est vel aliquam. Ut erat diam, elementum placerat lacus vel, faucibus pretium dolor. Morbi tincidunt sapien nec mi congue pretium. Suspendisse et enim dignissim, tincidunt ipsum a, suscipit eros. Morbi congue arcu posuere nibh aliquam molestie. Mauris placerat erat eu augue tristique dignissim. Maecenas et pellentesque urna, non laoreet velit. Maecenas efficitur imperdiet bibendum.
+      </p>
+      <p className="mt-4">
+        Phasellus semper semper imperdiet. Praesent ligula neque, egestas id venenatis ac, vulputate vitae ex. Integer at pellentesque dui. Fusce semper egestas lorem, tincidunt tristique nibh tristique quis. In ac tincidunt est. Proin at erat ultrices, ornare lacus vitae, aliquam nibh. Morbi ut mauris erat. Quisque rhoncus sapien eu massa lacinia tempor. Quisque volutpat nisi sed augue facilisis maximus. Nam lobortis sollicitudin arcu, non elementum orci commodo eget. Praesent porta velit eget felis euismod, porta vestibulum diam semper. Curabitur accumsan, turpis at tincidunt fringilla, velit dui efficitur quam, ut porta ipsum lacus vitae quam. Donec malesuada urna sed diam suscipit dapibus. Pellentesque et ante id nunc sagittis vulputate.
+      </p>
+    </div>
+  );
+}
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,6 +1,6 @@
@import "tailwindcss";

-:root {
+/* :root {
  --background: #ffffff;
  --foreground: #171717;
 }
@@ -10,10 +10,14 @@
    --background: #0a0a0a;
    --foreground: #ededed;
  }
-}
+} */

 body {
  color: var(--foreground);
  background: var(--background);
-  font-family: "JetBrains Mono", monospace;
+  font-family: "Open Sans", sans-serif;
+}
+
+.dark {
+  @apply bg-black text-white;
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import "./globals.css";

+import MainHeader from "@/components/header/main";
+import MainFooter from "@/components/footer/main";

 export const metadata: Metadata = {
  title: 'AderKI Blog',
@@ -28,11 +30,13 @@ export const metadata: Metadata = {

 export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
-    <html lang="en">
-      <body
-        className={`bg-black text-white font-sans`}
-      >
-        {children}
+    <html className="dark" lang="en">
+      <body className={`bg-black text-white dark:bg-white dark:text-black font-sans`}>
+        <div className="text-xl 2xl:mx-80 xl:mx-36 md:mx-6">
+          <MainHeader />
+          {children}
+          <MainFooter />
+        </div>
      </body>
    </html>
  );
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,17 +1,6 @@
-import mastodonPic from '../public/mastodon.svg';
-import githubPic from '../public/github.svg';
-import instagramPic from '../public/instagram.svg';
-import steamPic from '../public/steam.svg';

-import gamePic from '../public/gamepad.svg';
-import projectPic from '../public/project.svg';
-
-import Image from "next/image";
-import Link from "next/link";
-import AnimatedLink from '../components/animatedLink';
 import BlogArea from "../components/blogpost";

-import MainHeader from "@/components/header/main";

 // Mock data for blog posts
 const blogposts = [
@@ -47,77 +36,8 @@ const blogposts = [

 export default function Home() {
  return (
-    <div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6">
-      <MainHeader />
-
-      <main>
-        <BlogArea blogposts={blogposts} />
-      </main>
-
-      <footer className="border-t border-white pt-4 flex lg:flex-row max-md:flex-col justify-around text-2xl">
-        <ul className="list-none m-4">
-          <li className="text-2xl mb-3"><h3>Socials</h3></li>
-          <li className="inline text-xl pr-2 mr-2">
-            <Link href="https://www.instagram.com/aderkitty/">
-              <Image
-                src={instagramPic}
-                alt="lang"
-                width={32}
-                height={32}
-                className="inline filter brightness-0 invert"
-              />
-            </Link>
-          </li>
-          <li className="inline text-xl pr-2 mr-2">
-            <Link href="https://mastodon.social/@aderkonstantin">
-              <Image
-                src={mastodonPic}
-                alt="lang"
-                width={32}
-                height={32}
-                className="inline filter brightness-0 invert"
-              />
-            </Link>
-          </li>
-          <li className="inline text-xl pr-2 mr-2">
-            <Link href="https://github.com/AderKonstantin">
-              <Image
-                src={githubPic}
-                alt="lang"
-                width={32}
-                height={32}
-                className="inline filter brightness-0 invert"
-              />
-            </Link>
-          </li>
-          <li className="inline text-xl pr-2 mr-2">
-            <Link href="https://steamcommunity.com/yourprofile">
-              <Image
-                src={steamPic}
-                alt="lang"
-                width={32}
-                height={32}
-                className="inline filter brightness-0 invert"
-              />
-            </Link>
-          </li>
-        </ul>
-        <ul className="list-none m-4">
-          <li className="text-2xl mb-3"><h3 className='inline'>Games</h3><Image src={gamePic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
-          <li className="text-xl">
-            <AnimatedLink href="#">Robot Fire</AnimatedLink>
-          </li>
-        </ul>
-        <ul className="list-none m-4">
-          <li className="text-2xl mb-3"><h3 className='inline'>Other Projects</h3><Image src={projectPic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
-          <li className="text-xl">
-            <AnimatedLink href="#">cloudberrygames</AnimatedLink>
-          </li>
-          <li className="text-xl">
-            <AnimatedLink href="#">northfamily</AnimatedLink>
-          </li>
-        </ul>
-      </footer>
-    </div>
+    <main>
+      <BlogArea blogposts={blogposts} />
+    </main>
  );
 }
--- a/components/blogpost.tsx
+++ b/components/blogpost.tsx
@@ -3,6 +3,7 @@
 import tagsPic from '../public/tags.svg';
 import calendarPic from '../public/calendar.svg'

+import Link from 'next/link';
 import AnimatedLink from '../components/animatedLink';
 import Image from 'next/image';

@@ -11,7 +12,7 @@ interface BlogPost {
    body: string;
    publish: string;
    get_absolute_url: string;
-    tags: string[]; 
+    tags: string[];
 }

 interface BlogAreaProps {
@@ -46,7 +47,7 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
                            <ul className="blogpost-tags inline-flex items-center flex-row space-x-4 mb-4">
                                <li className="tag inline px-2 py-1 rounded-full"><Image src={tagsPic} alt="lang" width={24} height={24} className='inline-flex justify-baseline filter brightness-0 invert' /></li>
                                {blogpost.tags.map((tag, index) => (
-                                <li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">{tag}</li>
+                                    <li key={`${tag}-${index}`} className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base"><Link href="#">{tag}</Link></li>
                                ))}
                            </ul>
                            <div className="blogpost-description text-base mb-4">
@@ -54,7 +55,7 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
                            </div>
                            <div className="blogpost-other flex flex-row justify-between items-end mt-auto">
                                <ul className="text-base inline-flex justify-end items-center">
-                                    <li className="inline px-2 py-1"><Image src={calendarPic} alt="lang" width={24} height={24} className="filter brightness-0 invert"/></li>
+                                    <li className="inline px-2 py-1"><Image src={calendarPic} alt="lang" width={24} height={24} className="filter brightness-0 invert" /></li>
                                    <li className="inline"><p className='inline mx-2'>{blogpost.publish}</p></li>
                                </ul>

--- a/components/footer/main.tsx
+++ b/components/footer/main.tsx
@@ -0,0 +1,81 @@
+
+import mastodonPic from '@/public/mastodon.svg';
+import githubPic from '@/public/github.svg';
+import instagramPic from '@/public/instagram.svg';
+import steamPic from '@/public/steam.svg';
+
+import gamePic from '@/public/gamepad.svg';
+import projectPic from '@/public/project.svg';
+
+import Image from "next/image";
+import Link from "next/link";
+import AnimatedLink from '@/components/animatedLink';
+
+export default function MainFooter() {
+    return (
+        <footer className="border-t border-white pt-4 flex lg:flex-row max-md:flex-col justify-around text-2xl">
+            <ul className="list-none m-4">
+                <li className="text-2xl mb-3"><h3>Socials</h3></li>
+                <li className="inline text-xl pr-2 mr-2">
+                    <Link href="https://www.instagram.com/aderkitty/">
+                        <Image
+                            src={instagramPic}
+                            alt="lang"
+                            width={32}
+                            height={32}
+                            className="inline filter brightness-0 invert"
+                        />
+                    </Link>
+                </li>
+                <li className="inline text-xl pr-2 mr-2">
+                    <Link href="https://mastodon.social/@aderkonstantin">
+                        <Image
+                            src={mastodonPic}
+                            alt="lang"
+                            width={32}
+                            height={32}
+                            className="inline filter brightness-0 invert"
+                        />
+                    </Link>
+                </li>
+                <li className="inline text-xl pr-2 mr-2">
+                    <Link href="https://github.com/AderKonstantin">
+                        <Image
+                            src={githubPic}
+                            alt="lang"
+                            width={32}
+                            height={32}
+                            className="inline filter brightness-0 invert"
+                        />
+                    </Link>
+                </li>
+                <li className="inline text-xl pr-2 mr-2">
+                    <Link href="https://steamcommunity.com/yourprofile">
+                        <Image
+                            src={steamPic}
+                            alt="lang"
+                            width={32}
+                            height={32}
+                            className="inline filter brightness-0 invert"
+                        />
+                    </Link>
+                </li>
+            </ul>
+            <ul className="list-none m-4">
+                <li className="text-2xl mb-3"><h3 className='inline'>Games</h3><Image src={gamePic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
+                <li className="text-xl">
+                    <AnimatedLink href="#">Robot Fire</AnimatedLink>
+                </li>
+            </ul>
+            <ul className="list-none m-4">
+                <li className="text-2xl mb-3"><h3 className='inline'>Other Projects</h3><Image src={projectPic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
+                <li className="text-xl">
+                    <AnimatedLink href="#">cloudberrygames</AnimatedLink>
+                </li>
+                <li className="text-xl">
+                    <AnimatedLink href="#">northfamily</AnimatedLink>
+                </li>
+            </ul>
+        </footer>
+    );
+}
--- a/components/header/main.tsx
+++ b/components/header/main.tsx
@@ -8,34 +8,34 @@ import AnimatedLink from '../animatedLink';
 import HeaderToolbar from "../header/toolbar";

 export default function MainHeader() {
-    return (
-        <header className="flex flex-col">
-        <div className="flex flex-row mt-12 mb-22">
-          <ul className="w-full flex flex-row justify-between items-baseline list-none">
-            <li className="text-4xl">
-              <AnimatedLink href="https://blog.aderk.tech/en">
-                aderk.tech
-              </AnimatedLink>
-            </li>
+  return (
+    <header className="flex flex-col">
+      <div className="flex flex-row mt-12 mb-22">
+        <ul className="w-full flex flex-row justify-between items-baseline list-none">
+          <li className="text-4xl">
+            <AnimatedLink href="https://blog.aderk.tech/en">
+              aderk.tech
+            </AnimatedLink>
+          </li>

-            <li className="text-6xl flex items-center justify-center filter brightness-0 invert">
-              <Link href="#">
-                <Image
-                  src={searchPic}
-                  alt="search"
-                  width={32}
-                  height={32}
-                />
-              </Link>
-            </li>
-          </ul>
-        </div>
-        <div className="text-2xl mb-20">
-          <p className="leading-10">
-            Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like.
-          </p>
-        </div>
-        <HeaderToolbar />
-      </header>
-    );
+          <li className="text-6xl flex items-center justify-center filter brightness-0 invert">
+            <Link href="#">
+              <Image
+                src={searchPic}
+                alt="search"
+                width={32}
+                height={32}
+              />
+            </Link>
+          </li>
+        </ul>
+      </div>
+      <div className="text-2xl mb-20">
+        <p className="leading-10">
+          Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like.
+        </p>
+      </div>
+      <HeaderToolbar />
+    </header>
+  );
 }
--- a/components/header/toolbar.tsx
+++ b/components/header/toolbar.tsx
@@ -1,17 +1,17 @@
 'use client';
 import Image from 'next/image';
 import Link from 'next/link';
+
 import globePic from '../../public/globe.svg';
 import emailPic from '../../public/email.svg';
 import rssPic from '../../public/rss-feed.svg';
-import supportPic from '../../public/support.svg';
 import settingsPic from '../../public/settings.svg';
 import AnimatedLink from '../animatedLink';


 export default function Toolbar() {
    return (
-        <div className="flex h-24 justify-between items-center border-white border-t border-b">
+        <div className="flex h-24 justify-between items-center border-white light:border-black border-t border-b">
            <div className="flex items-baseline">
                <p><AnimatedLink href='#'>Science</AnimatedLink> | <AnimatedLink href='#'>Software</AnimatedLink> | <AnimatedLink href='#'>Hardware</AnimatedLink> | <AnimatedLink href='#'>Rockets</AnimatedLink> | <AnimatedLink href='#'>Startups</AnimatedLink></p>
            </div>
--- a/public/support.svg
+++ b/public/support.svg
@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="#000"><path d="m7.824 5.937a1 1 0 0 0 .726-.312 2.042 2.042 0 0 1 2.835-.065 1 1 0 0 0 1.388-1.441 3.994 3.994 0 0 0 -5.674.13 1 1 0 0 0 .725 1.688z"/><path d="m17 7a7 7 0 1 0 -14 0 3 3 0 0 0 -3 3v2a3 3 0 0 0 3 3h1a1 1 0 0 0 1-1v-7a5 5 0 1 1 10 0v7.083a2.92 2.92 0 0 1 -2.917 2.917h-.083a2 2 0 0 0 -2-2h-1a2 2 0 0 0 -2 2v1a2 2 0 0 0 2 2h1a1.993 1.993 0 0 0 1.722-1h.361a4.92 4.92 0 0 0 4.824-4h.093a3 3 0 0 0 3-3v-2a3 3 0 0 0 -3-3z"/></g></svg>
Author	SHA1	Message	Date
AderKonstantin	80ed9c8978	Merge pull request #8 from AderKonstantin/theme-switcher Theme switcher	2025-04-01 19:40:42 +03:00
AderKonstantin	17271c1e52	✨ feat: Remove unused support icon and update header toolbar The changes made in this commit include: 1. Removing the unused `support.svg` file from the `public` directory. 2. Updating the `toolbar.tsx` component in the `header` directory by removing the import and usage of the `supportPic` icon. These changes were made to clean up the codebase and remove unused assets, improving the overall maintainability of the project.	2025-04-01 19:38:40 +03:00
AderKonstantin	9ab9089f4f	✨ feat: Enhance blog post layout and typography This commit introduces the following changes: - Increase the maximum width of the blog post layout from 3XL to 4XL on larger screens, providing more space for content. - Change the body font from "JetBrains Mono" to "Open Sans" to improve readability and aesthetics. - Increase the horizontal margin on larger screens from 72px to 80px, creating more breathing room around the content. These changes aim to enhance the overall presentation and user experience of the blog post layout, making it more visually appealing and comfortable to read.	2025-04-01 19:38:40 +03:00
AderKonstantin	6c0243c5e2	✨ feat: Remove Theme Switcher - Update body class to use `dark` instead of `light` for dark mode - Remove `ThemeSwitcher` component as it is no longer needed - Update global CSS to set dark mode styles on the `.dark` class instead of `.light`	2025-04-01 19:38:40 +03:00
AderKonstantin	f37572f0cf	✨ feat(layout): Enhance blog post layout for better readability Adds a `m-auto` class to center the blog post content and sets a maximum width of `3xl` for larger screens to improve readability.	2025-04-01 19:38:40 +03:00
AderKonstantin	1c85792839	✨ feat(layout): Adjust content container width Increases the maximum content container width on larger screens to provide more breathing room and a better reading experience. This change was made to improve the overall layout and visual presentation of the application.	2025-04-01 19:38:40 +03:00
AderKonstantin	ccb5978831	Merge pull request #7 from AderKonstantin/theme-switcher ✨ feat: Implement theme switcher in header	2025-03-26 20:59:02 +03:00
AderKonstantin	5f4b2cf1d5	✨ feat: Implement theme switcher in header This commit introduces a theme switcher component in the header, allowing users to toggle between light and dark modes. The changes include: - Added a new `ThemeSwitcher` component in `components/header/theme-switcher.tsx` that handles the theme switching logic and UI. - Integrated the `ThemeSwitcher` component into the `HeaderToolbar` component. - Updated the global CSS file (`app/globals.css`) to include styles for the light mode. - Initialized the theme based on user's previous preference or system preference. - Saved the user's theme preference in the browser's local storage for persistence. These changes provide a better user experience by allowing users to switch between light and dark modes, which can improve readability and accessibility, especially in different lighting conditions.	2025-03-26 20:58:40 +03:00
AderKonstantin	7b97fbe816	Merge pull request #6 from AderKonstantin/blogpost ✨ feat: Implement blog post layout and page template	2025-03-26 15:41:06 +03:00
AderKonstantin	ea8d8c880d	Merge pull request #5 from AderKonstantin/dev Dev	2025-03-26 15:40:06 +03:00
AderKonstantin	b66149a0ec	✨ feat: Implement blog post layout and page template This commit introduces the layout and page components for the blog post feature. The main changes include: - Implement the `RootLayout` component in `app/blogpost/layout.tsx` to provide the overall structure and styling for the blog post pages. - Implement the `PostPage` component in `app/blogpost/page.tsx` to display the content of a specific blog post, including the post title, metadata, and the post body (template). - Add placeholder content and styling for the blog post page, including the use of the `Image` component to display a featured image. These changes lay the foundation for the blog post feature, allowing users to view and interact with individual blog posts on the website.	2025-03-26 15:39:25 +03:00
AderKonstantin	c89df4cf2f	🎨 feat(footer): Add new footer component The changes in this commit introduce a new footer component to the application. The footer includes the following sections: - Socials: Links to the user's social media profiles (Instagram, Mastodon, GitHub, Steam) - Games: A link to the "Robot Fire" game - Other Projects: Links to the "cloudberrygames" and "northfamily" projects The footer is designed to be responsive, with a different layout for larger and smaller screens. The icons in the footer are also inverted to match the overall color scheme of the application.	2025-03-26 15:38:02 +03:00
AderKonstantin	0ade5e6e9c	🎨 feat(layout): Reorganize page structure and add footer This commit reorganizes the page structure by moving the main content area and the footer into the layout component. The main content area now only contains the BlogArea component, while the footer has been expanded to include social links, game links, and other project links. The changes were made to improve the overall structure and organization of the application, making it easier to maintain and extend in the future.	2025-03-26 14:17:58 +03:00
AderKonstantin	fd3563d124	🔖 feat(BlogPost): Add link to blog post tags Adds a link to each blog post tag, allowing users to navigate to a page that displays all posts with the selected tag. This improves the user experience by providing an easy way to explore related content.	2025-03-26 14:14:33 +03:00
				`@@ -1 +0,0 @@`
				<svg fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="#000"><path d="m7.824 5.937a1 1 0 0 0 .726-.312 2.042 2.042 0 0 1 2.835-.065 1 1 0 0 0 1.388-1.441 3.994 3.994 0 0 0 -5.674.13 1 1 0 0 0 .725 1.688z"/><path d="m17 7a7 7 0 1 0 -14 0 3 3 0 0 0 -3 3v2a3 3 0 0 0 3 3h1a1 1 0 0 0 1-1v-7a5 5 0 1 1 10 0v7.083a2.92 2.92 0 0 1 -2.917 2.917h-.083a2 2 0 0 0 -2-2h-1a2 2 0 0 0 -2 2v1a2 2 0 0 0 2 2h1a1.993 1.993 0 0 0 1.722-1h.361a4.92 4.92 0 0 0 4.824-4h.093a3 3 0 0 0 3-3v-2a3 3 0 0 0 -3-3z"/></g></svg>