feat: add links in Sidebar to GitHub, Telegram, YouTube

Closes #157
one-zero-eight · Oct 4, 2024 · 9714598 · 9714598
1 parent 889322e
commit 9714598
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 20 deletions.
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
@@ -1,3 +1,4 @@
+import Tooltip from "@/components/common/Tooltip.tsx";
 import SidebarSection from "@/components/layout/SidebarSection";
 import SwitchThemeButton from "@/components/layout/SwitchThemeButton";
 import UserMenu from "@/components/layout/UserMenu";
@@ -190,23 +191,63 @@ function Sidebar({ children }: React.PropsWithChildren) {
           </nav>
           <div className="flex grow"></div>
           <br />
-          <div className="mb-4 flex w-full flex-row items-center justify-center gap-4 lgw-smh:hidden">
-            <SwitchThemeButton />
-            <UserMenu isMobile={true} isSidebar={true} />
-          </div>
           <a
-            className="text-center lgw-smh:text-left"
             href="https://t.me/one_zero_eight"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="my-4 text-center"
           >
-            <span className="hidden lgw-smh:inline">
-              See you at
-              <br />
-            </span>
-            <span className="underline underline-offset-2">
-              one-zero-eight
-            </span>{" "}
+            <span className="underline underline-offset-2">one-zero-eight</span>{" "}
             💜
           </a>
+          <div className="flex flex-row gap-2">
+            <Tooltip content="GitHub">
+              <a
+                href="https://github.com/one-zero-eight"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="rounded-2xl"
+              >
+                <div className="ml-auto flex h-18p w-18p flex-col items-center justify-center rounded-2xl bg-secondary-main hover:bg-secondary-hover">
+                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-icon-main/50">
+                    <span className="icon-[mdi--github] text-4xl" />
+                  </div>
+                </div>
+              </a>
+            </Tooltip>
+            <Tooltip content="Telegram">
+              <a
+                href="https://t.me/one_zero_eight"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="rounded-2xl"
+              >
+                <div className="ml-auto flex h-18p w-18p flex-col items-center justify-center rounded-2xl bg-secondary-main hover:bg-secondary-hover">
+                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-icon-main/50">
+                    <span className="icon-[uil--telegram-alt] text-4xl" />
+                  </div>
+                </div>
+              </a>
+            </Tooltip>
+            <Tooltip content="YouTube">
+              <a
+                href="https://www.youtube.com/@one-zero-eight"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="rounded-2xl"
+              >
+                <div className="ml-auto flex h-18p w-18p flex-col items-center justify-center rounded-2xl bg-secondary-main hover:bg-secondary-hover">
+                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-icon-main/50">
+                    <span className="icon-[hugeicons--youtube] text-4xl" />
+                  </div>
+                </div>
+              </a>
+            </Tooltip>
+          </div>
+          <div className="mt-4 flex w-full flex-row items-center justify-center gap-4 lgw-smh:hidden">
+            <SwitchThemeButton />
+            <UserMenu isMobile={true} isSidebar={true} />
+          </div>
         </div>
       </aside>
       {children}

diff --git a/src/components/layout/SwitchThemeButton.tsx b/src/components/layout/SwitchThemeButton.tsx
@@ -9,7 +9,7 @@ export default function SwitchThemeButton() {
 
   return (
     <button
-      className="flex h-18p w-18p flex-col items-center justify-center rounded-2xl bg-primary-main hover:bg-primary-hover"
+      className="flex h-18p w-18p flex-col items-center justify-center rounded-2xl bg-secondary-main hover:bg-secondary-hover"
       onClick={() =>
         setTernaryDarkMode((prev) => (prev === "dark" ? "light" : "dark"))
       }

diff --git a/src/components/layout/UserMenu.tsx b/src/components/layout/UserMenu.tsx
@@ -69,9 +69,9 @@ function UserMenu({ isMobile, isSidebar }: UserMenuProps) {
       <button
         ref={refs.setReference}
         {...getReferenceProps()}
-        className="rounded-2xl hover:bg-primary-hover"
+        className="rounded-2xl"
       >
-        <div className="ml-auto flex h-18p w-18p flex-col items-center justify-center rounded-2xl bg-primary-main hover:bg-primary-hover">
+        <div className="ml-auto flex h-18p w-18p flex-col items-center justify-center rounded-2xl bg-secondary-main hover:bg-secondary-hover">
           <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-icon-main/50">
             <span className="icon-[material-symbols--sentiment-satisfied-outline-rounded] text-4xl" />
           </div>

diff --git a/src/components/schedule/ScheduleMainPage.tsx b/src/components/schedule/ScheduleMainPage.tsx
@@ -14,11 +14,6 @@ export function ScheduleMainPage() {
       <CategoryContainer />
       <h3 className="my-4 text-center text-3xl font-medium">How it works?</h3>
       <ClarificationContainer />
-      <hr className="my-4 w-full border-border @3xl/content:w-1/2" />
-      <p className="text-lg text-text-secondary/75">
-        Our projects are open source!{" "}
-        <a href="https://github.com/one-zero-eight">github/one-zero-eight</a>
-      </p>
     </>
   );
 }