wyl/jsonhero-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added a github star banner on the homepage

Browse Source
This commit is contained in:
James Ritchie
2022-04-15 15:36:22 +01:00
parent 5eb4f68f88
commit a73412d195
3 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Home/HomeGithubBanner.tsx
+13
View File
@@ -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>
);
}
app/components/UI/GithubStar.tsx
+6 -2
View File
@@ -2,14 +2,18 @@ import { GithubIcon } from "../Icons/GithubIcon";
import { Body } from "../Primitives/Body"; import { Body } from "../Primitives/Body";
import { useStarCount } from "../StarCountProvider"; import { useStarCount } from "../StarCountProvider";
export function GithubStar() { export type GithubStarProps = {
className?: string;
};
export function GithubStar({ className }: GithubStarProps) {
const starCount = useStarCount(); const starCount = useStarCount();
return ( return (
<a <a
href="https://github.com/jsonhero-io/jsonhero-web" href="https://github.com/jsonhero-io/jsonhero-web"
target="_blank" 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"> <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> <GithubIcon className="w-5 h-5 ml-1"></GithubIcon>
app/routes/index.tsx
+2
View File
@@ -6,12 +6,14 @@ import { HomeHeroSection } from "~/components/Home/HomeHeroSection";
import { HomeInfoBoxSection } from "~/components/Home/HomeInfoBoxSection"; import { HomeInfoBoxSection } from "~/components/Home/HomeInfoBoxSection";
import { HomeSearchSection } from "~/components/Home/HomeSearchSection"; import { HomeSearchSection } from "~/components/Home/HomeSearchSection";
import { HomeFooter } from "~/components/Home/HomeFooter"; import { HomeFooter } from "~/components/Home/HomeFooter";
import { GithubBanner } from "~/components/Home/HomeGithubBanner";
export default function Index() { export default function Index() {
return ( return (
<div className="overflow-x-hidden"> <div className="overflow-x-hidden">
<HomeHeader /> <HomeHeader />
<HomeHeroSection /> <HomeHeroSection />
<GithubBanner />
<HomeInfoBoxSection /> <HomeInfoBoxSection />
<HomeEdgeCasesSection /> <HomeEdgeCasesSection />
<HomeSearchSection /> <HomeSearchSection />