feat(front): add button in the playground to the docs (#57)

closes #56

crates/web/frontend/src/components/docs-button/docs-button.tsx

@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils";
+import { BookOpen } from "lucide-react";
+import { type MouseEvent, useCallback } from "react";
+import ActionButton from "../action-button/action-button";
+
+interface Props {
+	className?: string;
+}
+
+export const DocsButton = ({ className }: Props) => {
+	const handleClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
+		window.open("/docs", "_blank");
+		e.preventDefault();
+	}, []);
+
+	return (
+		<ActionButton
+			description="Check the GQ documentation"
+			className="h-full"
+			variant="subtle"
+			onClick={handleClick}
+		>
+			<a
+				href="/docs"
+				rel="noreferrer"
+				target="_blank"
+				className={cn("flex items-center select-none", className)}
+			>
+				<BookOpen className="w-3.5 h-3.5 mr-2" />
+				<span className="text-xxs font-normal mt-[1px]">Docs</span>
+			</a>
+		</ActionButton>
+	);
+};

crates/web/frontend/src/components/footer/footer.tsx

@@ -1,4 +1,5 @@
 import { cn } from "@/lib/utils";
+import { DocsButton } from "../docs-button/docs-button";
 import { LinkEditor } from "../link-editor/link-editor";
 import ShortcutPopup from "../shortcut-popup/shortcut-popup";
 import StarCount from "../star-count/star-count";
@@ -22,6 +23,7 @@ const Footer = ({ linkEditors, handleToggleLinked, className }: FooterProps) =>
 				/>
 			</div>
 			<div className="flex">
+				<DocsButton className="h-full px-4" />
 				<StarCount className="h-full px-4" />
 				<WebAssemblyBadge className="h-full px-4" />
 			</div>

crates/web/frontend/src/components/left-sidebar/left-sidebar.tsx

@@ -2,7 +2,7 @@ import { useOnboarding } from "@/hooks/use-onboarding";
 import { cn, isMac } from "@/lib/utils";
 import type { Data } from "@/model/data";
 import type FileType from "@/model/file-type";
-import { Book, History, Settings, Share } from "lucide-react";
+import { BookMarked, History, Settings, Share } from "lucide-react";
 import { type MutableRefObject, useCallback, useEffect, useState } from "react";
 import ActionButton from "../action-button/action-button";
 import ExamplesTab from "../examples-tab/examples-tab";
@@ -115,7 +115,7 @@ export const LeftSidebar = ({
 						variant="subtle"
 						onClick={() => handleClick("examples")}
 					>
-						<Book
+						<BookMarked
 							className={cn(
 								"w-4 h-4 transition-opacity",
 								selectedTab !== "examples" && "opacity-80",

crates/web/frontend/src/components/star-count/star-count.tsx

@@ -1,6 +1,6 @@
-import { formatNumber } from "@/lib/utils";
+import { cn, formatNumber } from "@/lib/utils";
 import { Github, Star } from "lucide-react";
-import { type MouseEvent, useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import ActionButton from "../action-button/action-button";
 import { Loader } from "../ui/sonner";
 
@@ -10,18 +10,8 @@ interface Props {
 
 const StarCount = ({ className }: Props) => {
 	const [stars, setStars] = useState<string>();
-	const [clicked, setClicked] = useState<boolean>(false);
 	const [fetching, setFetching] = useState<boolean>(true);
 
-	const handleClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
-		setClicked(true);
-		setTimeout(() => {
-			window.open("https://github.com/jorgehermo9/gq", "_blank");
-			setClicked(false);
-		}, 0);
-		e.preventDefault();
-	}, []);
-
 	useEffect(() => {
 		fetch("https://api.github.com/repos/jorgehermo9/gq")
 			.then((res) => res.json())
@@ -31,20 +21,20 @@ const StarCount = ({ className }: Props) => {
 	}, []);
 
 	return (
-		<ActionButton
-			description="Check the GQ Github repository"
-			className={className}
-			variant="subtle"
-			onClick={handleClick}
-		>
-			<a href="https://github.com/jorgehermo9/gq" className="flex items-center select-none">
-				<Github className="w-3.5 h-3.5 mr-1" />
+		<ActionButton description="Check the GQ Github repository" variant="subtle" className="h-full">
+			<a
+				href="https://github.com/jorgehermo9/gq"
+				rel="noreferrer"
+				target="_blank"
+				className={cn("flex items-center select-none", className)}
+			>
+				<Github className="w-3.5 h-3.5 mr-2" />
 				{fetching ? (
 					<Loader />
 				) : (
-					<div className="animate-in fade-in duration-300 flex items-center">
-						<span className="text-[0.7rem] font-medium mr-1">{stars}</span>
-						<Star className="w-2 h-2 text-accent data-[visible=false]:opacity-0 data-[visible=true]:opacity-1 transition-opacity" />
+					<div className="animate-in fade-in duration-300 flex items-center mt-[1px]">
+						<span className="text-xxs font-normal mr-1">{stars}</span>
+						<Star className="w-2 h-2 mb-[1px] text-accent data-[visible=false]:opacity-0 data-[visible=true]:opacity-1 transition-opacity" />
 					</div>
 				)}
 			</a>

crates/web/frontend/src/components/web-assembly-badge/web-assembly-badge.tsx

@@ -4,9 +4,9 @@ import Image from "next/image";
 export const WebAssemblyBadge = ({ className }: React.HTMLProps<HTMLDivElement>) => {
 	return (
 		<div className={cn("flex items-center", className)}>
-			<span className="text-xxs font-mono font-normal">Powered by</span>
+			<span className="text-xxs font-normal">Powered by</span>
 			<Image
-				className="ml-2 inline mb-[2px]"
+				className="ml-2 inline"
 				src="/web-assembly-icon.svg"
 				alt="Web Assemboy logo"
 				width={12}