From d3b1dc6263bfe770514ff46c2a5ee3e8fe74550a Mon Sep 17 00:00:00 2001
From: Berke KAYADA <berke.kayada@primetech.com>
Date: Tue, 29 Aug 2023 17:28:23 +0300
Subject: [PATCH] room invite friends

---
 components/Room/Invite/index.vue | 68 ++++++++++++++++++++++++++++++++
 components/Room/Invite/user.vue  | 59 +++++++++++++++++++++++++++
 pages/rooms/[id].vue             |  7 +++-
 3 files changed, 132 insertions(+), 2 deletions(-)
 create mode 100644 components/Room/Invite/index.vue
 create mode 100644 components/Room/Invite/user.vue

diff --git a/components/Room/Invite/index.vue b/components/Room/Invite/index.vue
new file mode 100644
index 0000000..594459f
--- /dev/null
+++ b/components/Room/Invite/index.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const emit = defineEmits(['closeModals'])
+const isOpen = false
+function closeModal() {
+  emit('closeModals', isOpen)
+}
+const inputValues = ref('http://localhost:3000/rooms/1')
+const copiedText = ref('')
+function copied() {
+  navigator.clipboard.writeText(inputValues.value)
+    .then(() => {
+      copiedText.value = inputValues.value
+    })
+    .catch((error) => {
+      console.error('Copy failed:', error)
+    })
+}
+</script>
+
+<template>
+  <div>
+    <div>
+      <UCard
+        :ui="{ divide: 'divide-y divide-gray-100 dark:divide-gray-800' } "
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+            >
+              Invite Friends
+            </h3>
+            <UButton
+              color="gray"
+              variant="ghost"
+              icon="i-heroicons-x-mark-20-solid"
+              class="-my-1"
+              @click="closeModal"
+            />
+          </div>
+        </template>
+        <div class="mb-5">
+          <p class="mb-2">
+            You can copy this room link and share with friends.
+          </p>
+          <div class="flex  justify-between items-center bg-gray-700 py-1 px-2 rounded-xl">
+            <p class="text-sm">{{ inputValues }}</p>
+            <UButton variant="text" icon="i-ph-copy" @click="copied" />
+          </div>
+        </div>
+   
+        <div class="flex relative gap-5 flex-col overflow-scroll max-h-[350px] ">
+          <RoomInviteUser />
+        </div>
+        <div class="flex  justify-end gap-3">
+          <UButton>Invite</UButton>
+          <UButton class="backdrop-blur-sm" variant="secondary" @click="closeModal">
+            Cancel
+          </UButton>
+        </div>
+      </UCard>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/components/Room/Invite/user.vue b/components/Room/Invite/user.vue
new file mode 100644
index 0000000..45fd706
--- /dev/null
+++ b/components/Room/Invite/user.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="flex justify-between items-center bg-gray-600  p-2 rounded-lg ">
+    <div class="flex items-center justify-center gap-2">
+      <UAvatar size="lg" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar" />
+      <span>Berke Kayada</span>
+    </div>
+    <UCheckbox />
+  </div>
+  <div class="flex justify-between items-center bg-gray-600  p-2 rounded-lg ">
+    <div class="flex items-center justify-center gap-2">
+      <UAvatar size="lg" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar" />
+      <span>Berke Kayada</span>
+    </div>
+    <UCheckbox />
+  </div>
+  <div class="flex justify-between items-center bg-gray-600  p-2 rounded-lg ">
+    <div class="flex items-center justify-center gap-2">
+      <UAvatar size="lg" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar" />
+      <span>Berke Kayada</span>
+    </div>
+    <UCheckbox />
+  </div>
+  <div class="flex justify-between items-center bg-gray-600  p-2 rounded-lg ">
+    <div class="flex items-center justify-center gap-2">
+      <UAvatar size="lg" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar" />
+      <span>Berke Kayada</span>
+    </div>
+    <UCheckbox />
+  </div>
+  <div class="flex justify-between items-center bg-gray-600  p-2 rounded-lg ">
+    <div class="flex items-center justify-center gap-2">
+      <UAvatar size="lg" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar" />
+      <span>Berke Kayada</span>
+    </div>
+    <UCheckbox />
+  </div>
+  <div class="flex justify-between items-center bg-gray-600  p-2 rounded-lg ">
+    <div class="flex items-center justify-center gap-2">
+      <UAvatar size="lg" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar" />
+      <span>Berke Kayada</span>
+    </div>
+    <UCheckbox />
+  </div>
+  <div class="flex justify-between items-center bg-gray-600  p-2 rounded-lg ">
+    <div class="flex items-center justify-center gap-2">
+      <UAvatar size="lg" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar" />
+      <span>Berke Kayada</span>
+    </div>
+    <UCheckbox />
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/pages/rooms/[id].vue b/pages/rooms/[id].vue
index ac6a08e..e1d05df 100644
--- a/pages/rooms/[id].vue
+++ b/pages/rooms/[id].vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const crateVideoModal = ref(false)
 const player = ref()
+const isOpen = ref(false)
 </script>
 
 <template>
+  <UModal v-model="isOpen">
+    <RoomInvite @closeModals="isOpen = false" />
+  </UModal>
   <div class="page h-full flex flex-col w-full">
     <div class="flex justify-between w-full">
       <div class="flex flex-col lg:flex-row items-center pb-4 gap-3">
@@ -23,7 +26,7 @@ const player = ref()
           <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
           <UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
         </UAvatarGroup>
-        <UButton class="!text-gray-600" :ui="{ size: { custom: 'text-4xl' } }" variant="ghost" size="custom" icon="i-ph-plus-circle" @click="crateVideoModal = !crateVideoModal" />
+        <UButton class="!text-gray-600" :ui="{ size: { custom: 'text-4xl' } }" variant="ghost" size="custom" icon="i-ph-plus-circle" @click="isOpen = true" />
       </div>
     </div>
     <div class="h-full flex w-full">