feat: implement create space dialog

src/components/AppButton.vue

@@ -1,7 +1,7 @@
 <template>
  <button
  :type="type"
- class="bg-[#7A5AF8] p-4 font-space-grotek font-medium capitalize text-white hover:bg-[#633CFF] active:bg-[#5024FF]"
+ class="font-space-grotesk bg-[#7A5AF8] p-4 font-medium capitalize text-white hover:bg-[#633CFF] active:bg-[#5024FF]"
  :class="[
  {
  'w-full': fullWidth,

src/components/AppDialog.vue

@@ -0,0 +1,161 @@
+<template>
+ <DialogRoot :open="open" @update:open="emitState">
+ <DialogPortal>
+ <DialogOverlay class="overlay" />
+ <DialogContent
+ as="article"
+ class="content rounded-medium bg-surface-primary text-primary py-x3 border-primary border"
+ >
+ <header class="px-x4 py-x3">
+ <div class="flex items-center justify-between">
+ <div class="flex items-center">
+ <component
+ :is="icon"
+ v-if="icon"
+ class="text-surface-brand h-6 w-auto"
+ ></component>
+
+ <DialogTitle
+ class="text-heading-small font-space-grotesk ml-2 font-bold capitalize"
+ >
+ {{ title }}
+ </DialogTitle>
+ </div>
+
+ <DialogClose class="flex items-center" type="button">
+ <XIcon class="text-surface-tertiary h-6 w-auto" />
+ </DialogClose>
+ </div>
+
+ <DialogDescription
+ class="mt-x2 text-paragraph-small text-secondary"
+ >
+ {{ description }}
+ </DialogDescription>
+ </header>
+
+ <section>
+ <slot></slot>
+ </section>
+ </DialogContent>
+ </DialogPortal>
+ </DialogRoot>
+</template>
+
+<script setup lang="ts">
+import XIcon from "#src/icons/XIcon.vue";
+import {
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogOverlay,
+ DialogPortal,
+ DialogRoot,
+ DialogTitle,
+} from "radix-vue";
+import { type Component } from "vue";
+
+export interface AppDialogProps {
+ /**
+ * When `true` dialog will be opened
+ */
+ open: boolean;
+
+ /**
+ * Title of the dialog
+ */
+ title?: string;
+
+ /**
+ * Description text shown under title
+ */
+ description?: string;
+
+ icon?: Component;
+}
+
+export type AppDialogEvents = {
+ "update:open": [state: boolean];
+ close: [];
+};
+
+defineProps<AppDialogProps>();
+const emit = defineEmits<AppDialogEvents>();
+
+function emitState(val: boolean) {
+ emit("update:open", val);
+
+ if (!val) {
+ emit("close");
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.overlay {
+ background: rgba(122, 90, 248, 0.2);
+ backdrop-filter: blur(4px);
+ position: fixed;
+ inset: 0;
+ animation: overlay-show 150ms cubic-bezier(0.16, 1, 0.3, 1);
+
+ &[data-state="closed"] {
+ animation: overlay-hide 150ms cubic-bezier(0.16, 1, 0.3, 1);
+ }
+}
+
+.content {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 95vw;
+ max-width: 450px;
+ max-height: 85vh;
+ animation: content-show 150ms cubic-bezier(0.16, 1, 0.3, 1);
+
+ &[data-state="closed"] {
+ animation: content-hide 150ms cubic-bezier(0.16, 1, 0.3, 1);
+ }
+}
+
+@keyframes overlay-show {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes overlay-hide {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes content-show {
+ from {
+ opacity: 0;
+ transform: translate(-50%, -48%) scale(0.96);
+ }
+ to {
+ opacity: 1;
+ transform: translate(-50%, -50%) scale(1);
+ }
+}
+
+@keyframes content-hide {
+ from {
+ opacity: 1;
+ transform: translate(-50%, -50%) scale(1);
+ }
+ to {
+ opacity: 0;
+ transform: translate(-50%, -48%) scale(0.96);
+ }
+}
+</style>

src/components/CreateSpaceDialog.vue

@@ -0,0 +1,54 @@
+<template>
+ <AppDialog
+ :open="open"
+ title="create space"
+ :icon="SpaceIcon"
+ description="Create a custom space to start sharing files to any devices connected on the internet"
+ @update:open="emitModalState"
+ @close="emit('close')"
+ >
+ <div class="py-x3 px-x4">
+ <TextInput
+ label="Space name"
+ placeholder="Space name"
+ hide-label
+ full-width
+ />
+ </div>
+
+ <div class="px-x4 py-x3">
+ <AppButton full-width @click="emitModalState(false)">
+ create space
+ </AppButton>
+ </div>
+ </AppDialog>
+</template>
+
+<script setup lang="ts">
+import AppDialog from "#src/components/AppDialog.vue";
+import TextInput from "#src/components/TextInput.vue";
+import SpaceIcon from "#src/icons/SpaceIcon.vue";
+import AppButton from "#src/components/AppButton.vue";
+
+export interface CreateSpaceDialogProps {
+ open: boolean;
+}
+
+export type CreateSpaceDialogEvents = {
+ close: [];
+ "update:open": [state: boolean];
+};
+
+defineProps<CreateSpaceDialogProps>();
+const emit = defineEmits<CreateSpaceDialogEvents>();
+
+function emitModalState(value: boolean) {
+ emit("update:open", value);
+
+ if (!value) {
+ emit("close");
+ }
+}
+</script>
+
+<style scoped></style>

src/icons/SpaceIcon.vue

@@ -0,0 +1,17 @@
+<template>
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g>
+ <path
+ d="M20.5 7.27771L12 11.9999M12 11.9999L3.49997 7.27771M12 11.9999L12 21.5M21 16.0585V7.94141C21 7.59876 21 7.42744 20.9495 7.27464C20.9049 7.13947 20.8318 7.01539 20.7354 6.9107C20.6263 6.79236 20.4766 6.70916 20.177 6.54276L12.777 2.43164C12.4934 2.27409 12.3516 2.19531 12.2015 2.16442C12.0685 2.13709 11.9315 2.13709 11.7986 2.16442C11.6484 2.19531 11.5066 2.27409 11.223 2.43165L3.82297 6.54276C3.52345 6.70916 3.37369 6.79236 3.26463 6.9107C3.16816 7.01539 3.09515 7.13947 3.05048 7.27465C3 7.42745 3 7.59877 3 7.94141V16.0585C3 16.4012 3 16.5725 3.05048 16.7253C3.09515 16.8605 3.16816 16.9845 3.26463 17.0892C3.37369 17.2076 3.52345 17.2908 3.82297 17.4572L11.223 21.5683C11.5066 21.7258 11.6484 21.8046 11.7986 21.8355C11.9315 21.8628 12.0685 21.8628 12.2015 21.8355C12.3516 21.8046 12.4934 21.7258 12.777 21.5683L20.177 17.4572C20.4766 17.2908 20.6263 17.2076 20.7354 17.0892C20.8318 16.9845 20.9049 16.8605 20.9495 16.7253C21 16.5725 21 16.4012 21 16.0585Z"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </g>
+ </svg>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/icons/XIcon.vue

@@ -0,0 +1,14 @@
+<template>
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g id="x">
+ <path
+ d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
+ fill="currentColor"
+ />
+ </g>
+ </svg>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/pages/ChooseNamePage.vue

@@ -2,7 +2,9 @@
  <BaseLayout>
  <template #header>
  <section class="py-3">
- <h1 class="font-space-grotek text-2xl font-bold text-[#F1F5F9]">
+ <h1
+ class="font-space-grotesk text-2xl font-bold text-[#F1F5F9]"
+ >
  Give yourself a nickname
  </h1>
  <p class="mt-2 text-sm leading-5 text-[#CBD5E1]">

src/pages/ListSpacesPage.vue

@@ -1,7 +1,7 @@
 <template>
  <BaseLayout>
  <template #header>
- <h1 class="font-space-grotek text-xl font-bold text-[#F1F5F9]">
+ <h1 class="font-space-grotesk text-xl font-bold text-[#F1F5F9]">
  Hey, Shadow! 👋
  </h1>
  <p class="mt-2 text-sm text-[#CBD5E1]">
@@ -19,7 +19,11 @@
 
  <div class="flex justify-center">
  <div class="flex flex-col items-center justify-center">
- <AppButton id="create-space-btn" variant="rounded">
+ <AppButton
+ id="create-space-btn"
+ variant="rounded"
+ @click="openCreateSpaceModal"
+ >
  <PlusIcon class="h-auto w-8 text-white" />
  </AppButton>
 
@@ -32,14 +36,33 @@
  </div>
  </div>
  </div>
+
+ <CreateSpaceDialog
+ :open="state === 'create'"
+ @close="closeCreateSpaceModal"
+ />
  </template>
  </BaseLayout>
 </template>
 
 <script setup lang="ts">
 import AppButton from "#src/components/AppButton.vue";
+import CreateSpaceDialog from "#src/components/CreateSpaceDialog.vue";
 import PlusIcon from "#src/icons/PlusIcon.vue";
 import BaseLayout from "#src/layouts/BaseLayout.vue";
+import { ref } from "vue";
+
+type State = "listing" | "create";
+
+const state = ref<State>("listing");
+
+function openCreateSpaceModal() {
+ state.value = "create";
+}
+
+function closeCreateSpaceModal() {
+ state.value = "listing";
+}
 </script>
 
 <style scoped lang="scss"></style>

tailwind.config.js

@@ -11,11 +11,40 @@ export default {
  extend: {
  fontFamily: {
  lexend: ["Lexend"],
- "space-grotek": ["Space Grotesk"],
+ "space-grotesk": ["Space Grotesk"],
  },
  height: {
  "h-screen-d": "100dvh",
  },
+ fontSize: {
+ "heading-small": ["1.125rem", { lineHeight: "1.6875rem" }],
+ "paragraph-small": ["0.875rem", { lineHeight: "1.3125rem" }],
+ },
+ textColor: {
+ primary: "#F1F5F9",
+ secondary: "#94A3B8",
+ },
+ borderColor: {
+ primary: "#334155",
+ },
+ colors: {
+ surface: {
+ brand: "#7A5AF8",
+ primary: "#0F172A",
+ tertiary: "#334155",
+ },
+ primary: {
+ 700: "#5925DC",
+ },
+ },
+ spacing: {
+ x2: "0.5rem",
+ x3: "0.75rem",
+ x4: "1rem",
+ },
+ borderRadius: {
+ medium: "8px",
+ },
  },
  },
 };