Added a github star banner on the homepage

2022-04-15 15:36:22 +01:00
parent 5eb4f68f88
commit a73412d195
3 changed files with 21 additions and 2 deletions
@@ -0,0 +1,13 @@
+import { Body } from "../Primitives/Body";
+import { GithubStar } from "../UI/GithubStar";
+
+export function GithubBanner() {
+  return (
+    <div className="flex items-center justify-center w-full h-14 bg-indigo-600">
+      <div className="flex items-center">
+        <Body className="mr-3 text-xl text-white">Star us on Github 👉</Body>
+        <GithubStar />
+      </div>
+    </div>
+  );
+}
@@ -2,14 +2,18 @@ import { GithubIcon } from "../Icons/GithubIcon";
 import { Body } from "../Primitives/Body";
 import { useStarCount } from "../StarCountProvider";

-export function GithubStar() {
+export type GithubStarProps = {
+  className?: string;
+};
+
+export function GithubStar({ className }: GithubStarProps) {
  const starCount = useStarCount();

  return (
    <a
      href="https://github.com/jsonhero-io/jsonhero-web"
      target="_blank"
-      className="flex text-slate-700"
+      className="flex text-slate-700 opacity-90 transition hover:cursor-pointer hover:opacity-100"
    >
      <div className="flex items-center gap-1 pr-2 pl-1 py-1 bg-slate-300 rounded-l-sm">
        <GithubIcon className="w-5 h-5 ml-1"></GithubIcon>
@@ -6,12 +6,14 @@ import { HomeHeroSection } from "~/components/Home/HomeHeroSection";
 import { HomeInfoBoxSection } from "~/components/Home/HomeInfoBoxSection";
 import { HomeSearchSection } from "~/components/Home/HomeSearchSection";
 import { HomeFooter } from "~/components/Home/HomeFooter";
+import { GithubBanner } from "~/components/Home/HomeGithubBanner";

 export default function Index() {
  return (
    <div className="overflow-x-hidden">
      <HomeHeader />
      <HomeHeroSection />
+      <GithubBanner />
      <HomeInfoBoxSection />
      <HomeEdgeCasesSection />
      <HomeSearchSection />