feat: lab button added, responsive install block

mvriu5 · Aug 1, 2024 · b75f6f2 · b75f6f2
1 parent 65e6117
commit b75f6f2
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "griller",
   "license": "MIT",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "private": false,
   "repository": {
     "url": "https://github.com/mvriu5/griller"

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import {
-    Ban,
+    Ban, FlagTriangleRight,
     FlaskConical,
     GitBranch,
     Github,
@@ -50,24 +50,31 @@ export default function Home() {
                 transition={{duration: 0.65}}
                 className={"flex flex-col space-y-4"}
             >
-                <div className={"flex flex-row justify-between space-x-2 pb-8"}>
+                <div className={"flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:justify-between sm:space-y-0 pb-8"}>
                     <div className={"flex flex-row space-x-2"}>
                         <Button title={"Test"}
-                                icon={<FlaskConical size={15} className={"mr-2"}/>}
-                                onClick={() => addToast({
-                                    icon: <ShieldAlert size={24}/>,
-                                    title: 'Toast Notification',
-                                    secondTitle: 'This is the second toast title'
-                                })}
-                                className={"text-zinc-200 bg-zinc-900 hover:bg-zinc-800 hover:text-zinc-100"}
+                                icon={<FlagTriangleRight size={15} className={"mr-2"}/>}
+                                onClick={() =>
+                                    addToast({
+                                        icon: <ShieldAlert size={24}/>,
+                                        title: 'Toast Notification',
+                                        secondTitle: 'This is the second toast title'
+                                    }
+                                )}
+                                className={"text-zinc-200 bg-zinc-900 hover:bg-zinc-800 hover:text-zinc-100 py-1.5"}
                         />
                         <Button title={"Docs"}
                                 icon={<SquareArrowOutUpRight size={16} className={"mr-2"}/>}
+                                className={"py-1.5"}
+                        />
+                        <Button title={"Lab"}
+                                icon={<FlaskConical size={15} className={"mr-2"}/>}
+                                className={"py-1.5"}
                         />
                     </div>
 
                     <div
-                        className={"flex flex-row space-x-8 items-center bg-zinc-50 px-2 py-1 text-zinc-500 rounded-lg border border-zinc-200 overflow-hidden"}>
+                        className={"w-max flex flex-row space-x-8 items-center bg-zinc-50 px-2 py-1 text-zinc-500 rounded-lg border border-zinc-200 overflow-hidden"}>
                         <span className={"font-mono text-sm truncate"}>npm install griller</span>
                         <CopyButton copyText={"npm install griller"}/>
                     </div>

diff --git a/src/lib/button.tsx b/src/lib/button.tsx
@@ -11,7 +11,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 const Button: React.FC<ButtonProps> = ({ title, icon, className, ...props }) => {
     return (
         <button
-            className={cn("flex flex-row items-center w-max px-3 py-1 text-zinc-500 rounded-lg text-sm text-nowrap " +
+            className={cn("flex flex-row items-center w-max h-max px-3 py-1 text-zinc-500 rounded-lg text-sm text-nowrap " +
                 "bg-zinc-100 border border-zinc-200 hover:bg-zinc-200", className)} {...props}>
             {icon}
             {title}

diff --git a/src/lib/codeblock.tsx b/src/lib/codeblock.tsx
@@ -10,9 +10,8 @@ interface CodeBockProps extends HTMLAttributes<HTMLDivElement> {
     filePath: string;
 }
 
-const CodeBlock: React.FC<CodeBockProps> = ({ title, fileName, filePath, className, ...props }) => {
+const CodeBlock: React.FC<CodeBockProps> = ({ title, fileName, filePath }) => {
     const [fileContent, setFileContent] = useState('');
-    const [lineCount, setLineCount] = useState(0);
 
     useEffect(() => {
         fetch(filePath)
@@ -24,8 +23,6 @@ const CodeBlock: React.FC<CodeBockProps> = ({ title, fileName, filePath, classNa
             })
             .then(text => {
                 setFileContent(text);
-                const lines = text.split(/\r\n|\r|\n/);
-                setLineCount(lines.length);
             })
             .catch(error => console.error('Error fetching the file:', error));
     }, [filePath]);