feat: tap for motions, codeblock sm fixed

mvriu5 · Jul 31, 2024 · bc02325 · bc02325
1 parent 5de1836
commit bc02325
Show file tree

Hide file tree

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

diff --git a/public/component-example.txt b/public/component-example.txt
@@ -1,6 +1,6 @@
 import {Toast} from "griller/toast";
 
- const { addToast } = useToast();
+const { addToast } = useToast();
 
 <button onClick={() =>
     addToast({title: 'Toast Notification'})}

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -37,6 +37,7 @@ export default function Home() {
                     className={"flex flex-row space-x-2 items-center text-zinc-500 p-2 rounded-lg cursor-pointer hover:bg-zinc-100"}
                     onClick={() => window.location.href = 'https://github.com/mvriu5/griller'}
                     whileHover={{y: -4}}
+                    whileTap={{y: -4}}
                 >
                     <Github/>
                 </motion.div>
@@ -75,10 +76,12 @@ export default function Home() {
                 <CodeBlock title={"Code Example"}
                            fileName={"layout.tsx"}
                            filePath={"/layout-example.txt"}
+                           additionalLines={1}
                 />
 
                 <CodeBlock fileName={"component.tsx"}
                            filePath={"/component-example.txt"}
+                           additionalLines={1}
                 />
 
                 <div className={"flex flex-wrap space-x-2 space-y-2 items-center pt-8"}>
@@ -231,6 +234,7 @@ export default function Home() {
                         className={"text-zinc-700 underline cursor-pointer"}
                         onClick={() => window.location.href = 'https://ahsmus.com'}
                         whileHover={{y: -4}}
+                        whileTap={{y: -4}}
                     >
                         mvriu5
                     </motion.span>

diff --git a/src/lib/codeblock.tsx b/src/lib/codeblock.tsx
@@ -7,9 +7,10 @@ interface CodeBockProps extends HTMLAttributes<HTMLDivElement> {
     title?: string;
     fileName: string;
     filePath: string;
+    additionalLines?: number;
 }
 
-const CodeBlock: React.FC<CodeBockProps> = ({ title, fileName, filePath, className, ...props }) => {
+const CodeBlock: React.FC<CodeBockProps> = ({ title, fileName, filePath, className, additionalLines, ...props }) => {
     const [fileContent, setFileContent] = useState('');
     const [lineCount, setLineCount] = useState(0);
 
@@ -33,20 +34,19 @@ const CodeBlock: React.FC<CodeBockProps> = ({ title, fileName, filePath, classNa
         <div className={"flex flex-col space-y-2"}>
             {title && <span className={"text-sm text-zinc-700 font-medium"}>{title}</span>}
             <div className={"flex flex-row justify-between w-full h-max bg-zinc-50 rounded-lg border border-zinc-200"}>
-                <div className={"w-full flex flex-col"}>
+                <div className={"w-full h-max flex flex-col"}>
                     <div className={"flex flex-row justify-between items-center px-2 py-1 bg-zinc-100 border-b border-zinc-200 rounded-t-lg"}>
                         <span className={"text-zinc-500 text-xs"}>{fileName}</span>
                         <CopyButton copyText={fileContent}/>
                     </div>
                      <textarea
-                         className={"p-2 w-full h-full font-mono text-sm text-zinc-500 bg-zinc-50 overflow-hidden resize-none focus:outline-none rounded-b-lg"}
+                         className={"p-2 w-full h-auto font-mono text-sm text-zinc-500 bg-zinc-50 overflow-hidden resize-none focus:outline-none rounded-b-lg"}
                          value={fileContent}
-                         rows={lineCount}
+                         rows={lineCount + (additionalLines || 0)}
                          readOnly
                      />
                 </div>
             </div>
-
         </div>
     );
 }