From 5cc80a35df2a8680ead7da9060d4a458a7c998e9 Mon Sep 17 00:00:00 2001
From: Vinicius Souza <dev@viniciussouza.me>
Date: Mon, 28 Oct 2024 10:46:32 -0300
Subject: [PATCH] feat: create toast message component

---
 src/components/ToastMessage.tsx | 41 +++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/components/ToastMessage.tsx

diff --git a/src/components/ToastMessage.tsx b/src/components/ToastMessage.tsx
new file mode 100644
index 0000000..58e3228
--- /dev/null
+++ b/src/components/ToastMessage.tsx
@@ -0,0 +1,41 @@
+import { Icon, Pressable, Toast, ToastDescription, ToastTitle, VStack } from '@gluestack-ui/themed';
+import { X } from 'lucide-react-native';
+
+type ToastMessageProps = {
+  id: string;
+  title: string;
+  description?: string;
+  action?: 'error' | 'success';
+  onClose: () => void;
+};
+
+export function ToastMessage({
+  id,
+  title,
+  description,
+  action = 'success',
+  onClose,
+}: ToastMessageProps) {
+  return (
+    <Toast
+      nativeID={`toast=${id}`}
+      action={action}
+      bgColor={action === 'success' ? '$green500' : '$red500'}>
+      <VStack space="xs" w="$full">
+        <Pressable onPress={onClose} alignSelf="flex-end">
+          <Icon as={X} color="$coolGray50" size="md" />
+        </Pressable>
+
+        <ToastTitle color="$white" fontFamily="$heading">
+          {title}
+        </ToastTitle>
+
+        {description && (
+          <ToastDescription color="$white" fontFamily="$body">
+            {description}
+          </ToastDescription>
+        )}
+      </VStack>
+    </Toast>
+  );
+}