Implement Add Comment

components/dashboard/comment.tsx

@@ -0,0 +1,58 @@
+import { View, Pressable, TextInput, InputAccessoryView } from "react-native";
+import { Image, ImageSource } from "expo-image";
+import Send from "@/assets/icons/Send.svg";
+import { beat, drop, comment } from "@/types";
+import { useState } from "react";
+interface props {
+  photo: ImageSource;
+  beat: Record<string, never> | (beat & drop);
+  setBeat: any;
+}
+
+const Comment = ({ photo, beat, setBeat }: props) => {
+  const [message, setMessage] = useState("");
+
+  const handlePress = () => {
+    if (message.length === 0) return;
+    console.log(message);
+    const NEWCOMMENT: comment = {
+      timestamp: new Date(),
+      username: "bobby",
+      likes: 150,
+      comment: message,
+      photo: {
+        uri: "https://media.licdn.com/dms/image/C5603AQFRF-WuzzVSPw/profile-displayphoto-shrink_200_200/0/1648079904789?e=2147483647&v=beta&t=iQ5MB_agi9aY0JUDxSXlAEa3icdQWn8l9twByRP5ItQ",
+      },
+    };
+
+    setBeat({
+      ...beat,
+      comments: [NEWCOMMENT, ...(beat.comments ? beat.comments : [])],
+    });
+  };
+  return (
+    <InputAccessoryView backgroundColor="white">
+      <View className="bg-white p-2 border-t border-beatdrop-border/50 flex-row items-center justify-between">
+        <View className="w-full flex flex-row items-center justify-between">
+          <Image
+            source={photo}
+            style={{ height: 35, width: 35, borderRadius: 999, marginLeft: 4 }}
+          />
+          <TextInput
+            className="placeholder:text-beatdrop-placeholder w-9/12 pl-2"
+            placeholder="Write a comment"
+            onChangeText={setMessage}
+          />
+          <Pressable
+            className="flex flex-col bg-beatdrop-primary rounded-full items-center justify-center p-3"
+            onPress={handlePress}
+          >
+            <Image source={Send} style={{ height: 20, width: 20 }} />
+          </Pressable>
+        </View>
+      </View>
+    </InputAccessoryView>
+  );
+};
+
+export default Comment;

components/dashboard/index.tsx

@@ -6,7 +6,7 @@ import BottomSheet, {
 } from "@gorhom/bottom-sheet";
 import { Image } from "expo-image";
 import Like from "@/assets/icons/Like.svg";
-import Comment from "@/assets/icons/Comment.svg";
+import CommentIcon from "@/assets/icons/Comment.svg";
 import Beat from "@/components/global/beat";
 import moment from "moment";
 import MapView from "react-native-maps";
@@ -15,6 +15,7 @@ import Entypo from "@expo/vector-icons/Entypo";
 import { comment, drop, beat } from "@/types";
 import Toolbar from "./toolbar";
 import Toaster from "@/utils/toast";
+import Comment from "@/components/dashboard/comment";
 
 const comments: comment[] = [
   {
@@ -91,7 +92,7 @@ const beats: (drop & beat)[] = [
     artist: "G(I)-DLE",
     description:
       "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
-    comments: comments.slice(0, 1),
+    comments: [],
   },
   {
     uid: "1",
@@ -173,7 +174,7 @@ const DashboardScreen = () => {
           </View>
           <View className="flex flex-row gap-2">
             <Image source={Like} style={{ width: 22, height: 22 }} />
-            <Image source={Comment} style={{ width: 22, height: 22 }} />
+            <Image source={CommentIcon} style={{ width: 22, height: 22 }} />
           </View>
         </View>
         <Beat
@@ -244,7 +245,10 @@ const DashboardScreen = () => {
                 </View>
                 <View className="flex flex-row gap-2">
                   <Image source={Like} style={{ width: 22, height: 22 }} />
-                  <Image source={Comment} style={{ width: 22, height: 22 }} />
+                  <Image
+                    source={CommentIcon}
+                    style={{ width: 22, height: 22 }}
+                  />
                 </View>
               </View>
               <Beat
@@ -291,6 +295,7 @@ const DashboardScreen = () => {
                 )}
               </View>
             </View>
+            <Comment photo={comments[2].photo} beat={beat} setBeat={setBeat} />
           </BottomSheetScrollView>
         )}
       </BottomSheet>