From 374cf4036f7a10ce403b2c71b858ccf632972046 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Fri, 14 Jun 2024 23:12:31 +0530
Subject: [PATCH] feat: url & navbar buttons

---
 src/components/atoms/buttons/buttons.tsx | 47 ++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/components/atoms/buttons/buttons.tsx

diff --git a/src/components/atoms/buttons/buttons.tsx b/src/components/atoms/buttons/buttons.tsx
new file mode 100644
index 00000000..506e0de0
--- /dev/null
+++ b/src/components/atoms/buttons/buttons.tsx
@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+
+export const NavBarButton = styled.button<{ disabled: boolean }>`
+    margin-left: 5px;
+    margin-right: 5px;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    cursor: ${({ disabled }) => disabled ? 'default' : 'pointer'};
+    width: 24px;
+    height: 24px;
+    border-radius: 12px;
+    outline: none;
+    color: ${({ disabled }) => disabled ? '#999' : '#333'};
+
+    ${({ disabled }) => disabled ? null : `
+        &:hover {
+            background-color: #ddd;
+        }
+       &:active {
+           background-color: #d0d0d0;
+       }
+    `};
+`;
+
+export const UrlFormButton = styled.button`
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    border-radius: 12px;
+    outline: none;
+    color: #333;
+    
+    &:hover {
+      background-color: #ddd;
+    },
+    
+    &:active {
+      background-color: #d0d0d0;
+    },
+`;