feat: add floating star

app/(storefront)/(main)/layout.tsx

@@ -2,6 +2,7 @@ import { NavBar } from "@/components/navbar";
 import "../../../styles/globals.css";
 import { Footer } from "@/components/footer";
 import React from "react";
+import { FloatingStar } from "@/components/floating-star";
 
 export const metadata = {
   title: "Outpost - Online marketplace",
@@ -15,6 +16,7 @@ export default async function StorefrontLayout({
 }) {
   return (
     <div className="min-h-screen w-full flex flex-col">
+      <FloatingStar />
       <NavBar showSecondAnnouncementBar={true} />
       <div className="h-full flex-1 mb-8">{children}</div>
       <Footer />

components/floating-star.tsx

@@ -0,0 +1,32 @@
+import { Star } from "lucide-react";
+import { PropsWithChildren } from "react";
+
+export const FloatingStar = () => {
+  return (
+    <div className="group">
+      <div className="hidden fixed bottom-4 bg-primary text-secondary rounded-r-full z-10 text-sm md:block p-4 hover:border-transparent">
+        <GitHubLinkWrapper>
+          <Star className="inline-block" size={24} />
+        </GitHubLinkWrapper>
+      </div>
+      <div className="group-hover:block hidden animate-roll-in-left fixed bottom-4 left-4 bg-primary text-secondary rounded-r-full z-[9] text-sm h-[56px] p-4 pl-[48px] pr-6">
+        <GitHubLinkWrapper>
+          <p className="hover:underline mt-[2px]">Star project on GitHub</p>
+        </GitHubLinkWrapper>
+      </div>
+    </div>
+  );
+};
+
+const GitHubLinkWrapper = (props: PropsWithChildren) => {
+  return (
+    <a
+      href="https://github.com/warrengalyen/Outpost"
+      className="flex items-center justify-center gap-2 "
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {props.children}
+    </a>
+  );
+};

tailwind.config.js

@@ -76,8 +76,13 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: 0 },
         },
+        "roll-in-left": {
+          "0%": { transform: "translateX(-100%)" },
+          "100%": { transform: "translateX(0)" },
+        },
       },
       animation: {
+        "roll-in-left": "roll-in-left 0.5s ease-out",
         "fade-in": "fade-in 1.5s ease-in",
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",