From 67458dc609c41b214358ccde653449bda4cfb79a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=BDofie=20T=C5=AFmov=C3=A1?= <zofietumova@gmail.com>
Date: Thu, 4 Apr 2024 20:12:59 +0200
Subject: [PATCH] button disabled

---
 src/app/components/add-item.tsx | 4 +++-
 src/app/components/button.tsx   | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/components/add-item.tsx b/src/app/components/add-item.tsx
index a07ad0a..4a80bb9 100644
--- a/src/app/components/add-item.tsx
+++ b/src/app/components/add-item.tsx
@@ -27,7 +27,9 @@ export function AddItem({ onAddItem: addItem }: Props) {
 				onValueChange={handleOnValueChange}
 				onEnter={handleAdd}
 			/>
-			<Button onClick={handleAdd}>Add item</Button>
+			<Button onClick={handleAdd} disabled={value === ''}>
+				Add item
+			</Button>
 		</div>
 	);
 }
diff --git a/src/app/components/button.tsx b/src/app/components/button.tsx
index 14ee322..00533bf 100644
--- a/src/app/components/button.tsx
+++ b/src/app/components/button.tsx
@@ -3,9 +3,10 @@ import React from 'react';
 type Props = {
 	onClick: () => void;
 	children: React.ReactNode;
+	disabled: boolean;
 };
 
-export const Button = ({ onClick, children }: Props) => (
+export const Button = ({ onClick, children, disabled }: Props) => (
 	<button
 		onClick={onClick}
 		data-testid="button"
@@ -15,6 +16,7 @@ export const Button = ({ onClick, children }: Props) => (
 		 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
 		active:bg-destructive/80
 		disabled:opacity-50"
+		disabled={disabled}
 	>
 		{children}
 	</button>