refactor: format every file using prettier

.prettierignore

@@ -0,0 +1 @@
+docs

components.json

@@ -1,15 +1,15 @@
 {
- "style": "default",
- "typescript": true,
- "tailwind": {
- "config": "tailwind.config.js",
- "css": "src/assets/index.scss",
- "baseColor": "slate",
- "cssVariables": true
- },
- "framework": "vite",
- "aliases": {
- "components": "src/components",
- "utils": "src/lib/utils"
- }
-}
+  "style": "default",
+  "typescript": true,
+  "tailwind": {
+  "config": "tailwind.config.js",
+  "css": "src/assets/index.scss",
+  "baseColor": "slate",
+  "cssVariables": true
+  },
+  "framework": "vite",
+  "aliases": {
+  "components": "src/components",
+  "utils": "src/lib/utils"
+  }
+}

src/components/AppDialog.vue

@@ -4,26 +4,26 @@
  <DialogOverlay class="overlay" />
  <DialogContent
  as="article"
- class="content rounded-medium bg-surface-primary text-primary py-x3 border-primary border"
+ class="content rounded-medium border border-primary bg-surface-primary py-x3 text-primary"
  >
  <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"
+ class="h-6 w-auto text-surface-brand"
  ></component>
 
  <DialogTitle
- class="text-heading-small font-space-grotesk ml-2 font-bold capitalize"
+ class="ml-2 font-space-grotesk text-heading-small font-bold capitalize"
  >
  {{ title }}
  </DialogTitle>
  </div>
 
  <DialogClose class="flex items-center" type="button">
- <XIcon class="text-surface-tertiary h-6 w-auto" />
+ <XIcon class="h-6 w-auto text-surface-tertiary" />
  </DialogClose>
  </div>
 

src/components/CopyLink.vue

@@ -1,6 +1,6 @@
 <template>
  <div
- class="copy-link text-xs cursor-pointer border border-neutral-300 rounded-md px-3 py-2.5 truncate"
+ class="copy-link cursor-pointer truncate rounded-md border border-neutral-300 px-3 py-2.5 text-xs"
  @click="copyLink()"
  >
  {{ link }}

src/components/FileItem.vue

@@ -1,10 +1,10 @@
 <template>
- <article class="gap-x4 px-x4 py-x2 flex items-center justify-between">
+ <article class="flex items-center justify-between gap-x4 px-x4 py-x2">
  <div class="flex-grow">
- <div class="gap-x2 flex items-center">
+ <div class="flex items-center gap-x2">
  <component
  :is="icon"
- class="h-x4 text-surface-brand w-auto"
+ class="h-x4 w-auto text-surface-brand"
  ></component>
 
  <div class="text-paragraph-small text-primary">
@@ -14,15 +14,15 @@
 
  <ProgressRoot
  :model-value="clampedProgress"
- class="progress translate- mt-x2 h-x1 bg-surface-tertiary w-8/12 overflow-hidden rounded-full"
+ class="progress translate- mt-x2 h-x1 w-8/12 overflow-hidden rounded-full bg-surface-tertiary"
  >
  <ProgressIndicator
- class="indicator bg-surface-brand w-full h-full rounded-full"
+ class="indicator h-full w-full rounded-full bg-surface-brand"
  :style="`transform: translateX(-${100 - clampedProgress}%)`"
  />
  </ProgressRoot>
 
- <div class="mt-x2 text-paragraph-x-small text-secondary uppercase">
+ <div class="mt-x2 text-paragraph-x-small uppercase text-secondary">
  {{ filesizeString(file.size, "b") }}
  </div>
  </div>
@@ -37,7 +37,7 @@
  <PauseIcon v-if="state === 'transferring'" class="h-x6 w-auto" />
  <CheckIcon
  v-if="state === 'done'"
- class="h-x6 text-surface-brand w-auto"
+ class="h-x6 w-auto text-surface-brand"
  />
  </button>
  </article>

src/components/SpaceCard.vue

@@ -1,39 +1,41 @@
 <template>
  <button
- class="rounded-medium p-x4 w-full text-left border"
+ class="w-full rounded-medium border p-x4 text-left"
  :class="[
  state === 'active'
- ? 'shadow-brand-focus-ring border-brand'
+ ? 'border-brand shadow-brand-focus-ring'
  : 'border-primary',
  ]"
  >
- <header class="font-space-grotesk flex items-center justify-between">
+ <header class="flex items-center justify-between font-space-grotesk">
  <section class="flex items-center">
  <component
  :is="icon[type]"
- class="w-auto h-6"
+ class="h-6 w-auto"
  :class="[
  state === 'active'
  ? 'text-surface-brand'
  : 'text-surface-tertiary',
  ]"
  />
- <h3 class="ml-x2 text-primary font-bold capitalize">{{ name }}</h3>
+ <h3 class="ml-x2 font-bold capitalize text-primary">
+ {{ name }}
+ </h3>
  </section>
 
  <section
- class="text-paragraph-x-small flex items-center justify-center w-6 h-6 font-bold border rounded-full"
+ class="flex h-6 w-6 items-center justify-center rounded-full border text-paragraph-x-small font-bold"
  :class="[
  state === 'active'
- ? 'border-brand text-brand-purple bg-opacity-35 bg-surface-brand'
- : 'text-placeholder bg-surface-secondary border-primary',
+ ? 'border-brand bg-surface-brand bg-opacity-35 text-brand-purple'
+ : 'border-primary bg-surface-secondary text-placeholder',
  ]"
  >
  {{ count }}
  </section>
  </header>
 
- <p class="text-paragraph-x-small mt-x2 text-secondary">
+ <p class="mt-x2 text-paragraph-x-small text-secondary">
  Space created on {{ formattedDate }}
  </p>
  </button>

src/layouts/BaseLayout.vue

@@ -1,13 +1,13 @@
 <template>
  <article class="h-screen-d bg-[#0F172A]">
- <div class="px-x4 py-x3 flex flex-col h-full max-w-3xl mx-auto">
+ <div class="mx-auto flex h-full max-w-3xl flex-col px-x4 py-x3">
  <header>
  <slot name="header"></slot>
  </header>
 
  <AppDivider class="my-3" />
 
- <main class="flex flex-col flex-grow">
+ <main class="flex flex-grow flex-col">
  <slot name="body"></slot>
  </main>
 

src/layouts/SpaceLayout.vue

@@ -1,13 +1,13 @@
 <template>
  <article
- class="h-screen-d bg-surface-primary pt-x4 text-primary flex flex-col w-screen overflow-x-hidden"
+ class="flex h-screen-d w-screen flex-col overflow-x-hidden bg-surface-primary pt-x4 text-primary"
  >
- <header class="px-x4 py-x4 relative flex items-center justify-between">
+ <header class="relative flex items-center justify-between px-x4 py-x4">
  <button @click="onBackBtnClick">
- <ArrowLeft class="w-auto h-6" />
+ <ArrowLeft class="h-6 w-auto" />
  </button>
- <div class="flex items-center mx-auto">
- <SpaceIcon class="text-surface-brand w-auto h-6" />
+ <div class="mx-auto flex items-center">
+ <SpaceIcon class="h-6 w-auto text-surface-brand" />
  <h1 class="ml-x2 font-space-grotesk font-bold capitalize">
  Design Space
  </h1>
@@ -16,7 +16,7 @@
 
  <AppDivider class="my-x2" />
 
- <section class="pb-x3 flex-grow">
+ <section class="flex-grow pb-x3">
  <slot></slot>
  </section>
  </article>