feat: create RowButtonBlock components

AboutClan · May 6, 2024 · a7ae98d · a7ae98d
1 parent fa335dc
commit a7ae98d
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/components/atoms/blocks/RowButtonBlock.tsx b/components/atoms/blocks/RowButtonBlock.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import Link, { LinkProps } from "next/link";
 import styled from "styled-components";
 
 interface RowButtonBlockProps {
@@ -8,7 +8,9 @@ interface RowButtonBlockProps {
 }
 
 function RowButtonBlock({ text, url, func }: RowButtonBlockProps) {
-  return <Button onClick={func}>{url ? <Link href={url}>{text}</Link> : text}</Button>;
+  return (
+    <>{url ? <CustomLink href={url}>{text}</CustomLink> : <Button onClick={func}>{text}</Button>}</>
+  );
 }
 
 const Button = styled.button`
@@ -18,4 +20,11 @@ const Button = styled.button`
   border-bottom: var(--border);
 `;
 
+const CustomLink = styled(Link)<LinkProps>`
+  display: block;
+  padding: var(--gap-4) var(--gap-4);
+  text-align: start;
+  border-bottom: var(--border);
+`;
+
 export default RowButtonBlock;