style: 🎨 format with prettier

RihanArfan · Jan 20, 2024 · 37d3c87 · 37d3c87
1 parent 89cf4a0
commit 37d3c87
Show file tree

Hide file tree

Showing 52 changed files with 368 additions and 313 deletions.
diff --git a/app.vue b/app.vue
@@ -49,7 +49,7 @@ const isDark = usePreferredDark();
       />
     </Head>
 
-    <Body class="bg-black text-white overscroll-none" />
+    <Body class="overscroll-none bg-black text-white" />
 
     <VitePwaManifest />
     <NuxtLoadingIndicator />

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -1,78 +1,78 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
- 
+
     --muted: 240 4.8% 95.9%;
     --muted-foreground: 240 3.8% 46.1%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
- 
+
     --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;
- 
+
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
- 
+
     --primary: 240 5.9% 10%;
     --primary-foreground: 0 0% 98%;
- 
+
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
- 
+
     --accent: 240 4.8% 95.9%;
     --accent-foreground: 240 5.9% 10%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
- 
+
     --ring: 240 10% 3.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
- 
+
     --muted: 240 3.7% 15.9%;
     --muted-foreground: 240 5% 64.9%;
- 
+
     --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
- 
+
     --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
- 
+
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
- 
+
     --primary: 0 0% 98%;
     --primary-foreground: 240 5.9% 10%;
- 
+
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
- 
+
     --accent: 240 3.7% 15.9%;
     --accent-foreground: 0 0% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
- 
+
     --ring: 240 4.9% 83.9%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}
diff --git a/components.json b/components.json
@@ -13,4 +13,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}
diff --git a/components/MyPost.vue b/components/MyPost.vue
@@ -12,7 +12,7 @@ const props = defineProps<Props>();
 const sortedPosts = computed(() =>
   props.posts.toSorted((a, b) => {
     return new Date(b.postedAt).getTime() - new Date(a.postedAt).getTime();
-  })
+  }),
 );
 
 const api = ref<CarouselApi>();
@@ -39,7 +39,7 @@ const currentPost = computed(() => sortedPosts.value[current.value - 1]);
 const timeAgo = useTimeAgo(currentPost.value.postedAt);
 const lateDuration = useLateDuration(
   new Date(currentPost.value.takenAt),
-  currentPost.value.lateInSeconds
+  currentPost.value.lateInSeconds,
 );
 </script>
 
@@ -66,18 +66,18 @@ const lateDuration = useLateDuration(
     <RealMojis
       v-if="currentPost.realMojis.length"
       :real-mojis="currentPost.realMojis"
-      class="-mt-4 justify-center z-10"
+      class="z-10 -mt-4 justify-center"
       size="xs"
     />
 
     <p
       v-if="currentPost?.caption"
-      class="text-md mt-3 md:mt-4 px-3 font-medium sm:mt-2 text-center text-balance select-text"
+      class="text-md mt-3 select-text text-balance px-3 text-center font-medium sm:mt-2 md:mt-4"
     >
       {{ currentPost.caption }}
     </p>
 
-    <p v-else class="text-md mt-3 md:mt-4 px-3 font-medium sm:mt-2 text-center">
+    <p v-else class="text-md mt-3 px-3 text-center font-medium sm:mt-2 md:mt-4">
       Add a caption...
     </p>
 

diff --git a/components/RealMojis.vue b/components/RealMojis.vue
@@ -16,7 +16,7 @@ withDefaults(defineProps<Props>(), {
     <Avatar
       v-for="realMoji in realMojis.slice(0, 5)"
       :key="realMoji.id"
-      class="ring-2 ring-black -mr-1"
+      class="-mr-1 ring-2 ring-black"
       :size="size"
     >
       <AvatarImage :src="realMoji.media.url" :alt="realMoji.user.username" />

diff --git a/components/post/Post.vue b/components/post/Post.vue
@@ -13,7 +13,7 @@ const props = defineProps<Props>();
 const sortedPosts = computed(() =>
   props.posts.toSorted((a, b) => {
     return new Date(b.postedAt).getTime() - new Date(a.postedAt).getTime();
-  })
+  }),
 );
 
 const api = ref<CarouselApi>();
@@ -67,7 +67,7 @@ const currentPost = computed(() => sortedPosts.value[current.value - 1]);
       </Carousel>
     </div>
 
-    <div v-if="posts.length > 1" class="flex justify-center text-xl -mb-2">
+    <div v-if="posts.length > 1" class="-mb-2 flex justify-center text-xl">
       <span v-for="i in totalCount" :key="i">
         <span
           class="cursor-pointer"

diff --git a/components/post/PostBody.vue b/components/post/PostBody.vue
@@ -81,13 +81,13 @@ useDraggable(secondaryEl, {
 
 <template>
   <div class="relative w-screen max-w-full">
-    <AspectRatio :ratio="3 / 4" class="relative bg-zinc-900 rounded-xl">
+    <AspectRatio :ratio="3 / 4" class="relative rounded-xl bg-zinc-900">
       <Transition>
         <img
           ref="primaryEl"
           :key="imageSrc"
           :src="imageSrc"
-          class="absolute rounded-xl h-full w-full"
+          class="absolute h-full w-full rounded-xl"
           :alt="alt(!isSecondaryLarge)"
           loading="lazy"
           :width="primary.width"
@@ -98,7 +98,7 @@ useDraggable(secondaryEl, {
 
       <div
         ref="secondaryEl"
-        class="absolute top-0 left-0 mx-3 mt-3 w-1/3 rounded-xl bg-zinc-800"
+        class="absolute left-0 top-0 mx-3 mt-3 w-1/3 rounded-xl bg-zinc-800"
         draggable
         @click="isSecondaryLarge = !isSecondaryLarge"
       >

diff --git a/components/post/PostFooter.vue b/components/post/PostFooter.vue
@@ -13,7 +13,7 @@ defineProps<Props>();
 
   <NuxtLink
     v-if="!hideComments"
-    class="text-sm block px-4 text-gray-400 mt-2"
+    class="mt-2 block px-4 text-sm text-gray-400"
     :class="{ 'mt-0.5': caption }"
     to="/"
   >

diff --git a/components/post/PostHeader.vue b/components/post/PostHeader.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
 const timeAgo = useTimeAgo(props.post.takenAt);
 const lateDuration = useLateDuration(
   new Date(props.post.takenAt),
-  props.post.lateInSeconds
+  props.post.lateInSeconds,
 );
 
 // share

diff --git a/components/ui/aspect-ratio/AspectRatio.vue b/components/ui/aspect-ratio/AspectRatio.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AspectRatio, type AspectRatioProps } from 'radix-vue'
+import { AspectRatio, type AspectRatioProps } from "radix-vue";
 
-const props = defineProps<AspectRatioProps>()
+const props = defineProps<AspectRatioProps>();
 </script>
 
 <template>

diff --git a/components/ui/aspect-ratio/index.ts b/components/ui/aspect-ratio/index.ts
@@ -1 +1 @@
-export { default as AspectRatio } from './AspectRatio.vue'
+export { default as AspectRatio } from "./AspectRatio.vue";
diff --git a/components/ui/avatar/Avatar.vue b/components/ui/avatar/Avatar.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { AvatarRoot } from 'radix-vue'
-import { avatarVariant } from '.'
-import { cn } from '@/lib/utils'
+import { AvatarRoot } from "radix-vue";
+import { avatarVariant } from ".";
+import { cn } from "@/lib/utils";
 
 interface Props {
-  size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']
-  shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']
-  class?: string
+  size?: NonNullable<Parameters<typeof avatarVariant>[0]>["size"];
+  shape?: NonNullable<Parameters<typeof avatarVariant>[0]>["shape"];
+  class?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  size: 'sm',
-  shape: 'circle',
-})
+  size: "sm",
+  shape: "circle",
+});
 </script>
 
 <template>

diff --git a/components/ui/avatar/AvatarFallback.vue b/components/ui/avatar/AvatarFallback.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
+import { AvatarFallback, type AvatarFallbackProps } from "radix-vue";
 
-const props = defineProps<AvatarFallbackProps>()
+const props = defineProps<AvatarFallbackProps>();
 </script>
 
 <template>

diff --git a/components/ui/avatar/AvatarImage.vue b/components/ui/avatar/AvatarImage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'radix-vue'
+import { AvatarImage, type AvatarImageProps } from "radix-vue";
 
-const props = defineProps<AvatarImageProps>()
+const props = defineProps<AvatarImageProps>();
 </script>
 
 <template>

diff --git a/components/ui/avatar/index.ts b/components/ui/avatar/index.ts
@@ -1,11 +1,11 @@
-import { cva } from 'class-variance-authority'
+import { cva } from "class-variance-authority";
 
-export { default as Avatar } from './Avatar.vue'
-export { default as AvatarImage } from './AvatarImage.vue'
-export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as Avatar } from "./Avatar.vue";
+export { default as AvatarImage } from "./AvatarImage.vue";
+export { default as AvatarFallback } from "./AvatarFallback.vue";
 
 export const avatarVariant = cva(
-  'inline-flex items-center justify-center font-semibold text-foreground select-none shrink-0 bg-secondary overflow-hidden',
+  "inline-flex items-center justify-center font-semibold text-foreground select-none shrink-0 bg-secondary overflow-hidden",
   {
     variants: {
       size: {
@@ -19,5 +19,5 @@ export const avatarVariant = cva(
         square: "rounded-md",
       },
     },
-  }
+  },
 );
diff --git a/components/ui/button/Button.vue b/components/ui/button/Button.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { Primitive, type PrimitiveProps } from 'radix-vue'
-import { buttonVariants } from '.'
-import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from "radix-vue";
+import { buttonVariants } from ".";
+import { cn } from "@/lib/utils";
 
 interface Props extends PrimitiveProps {
-  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
-  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
-  as?: string
+  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>["variant"];
+  size?: NonNullable<Parameters<typeof buttonVariants>[0]>["size"];
+  as?: string;
 }
 
 withDefaults(defineProps<Props>(), {
-  as: 'button',
-})
+  as: "button",
+});
 </script>
 
 <template>

diff --git a/components/ui/button/index.ts b/components/ui/button/index.ts
@@ -1,32 +1,32 @@
-import { cva } from 'class-variance-authority'
+import { cva } from "class-variance-authority";
 
-export { default as Button } from './Button.vue'
+export { default as Button } from "./Button.vue";
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
   },
-)
+);
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,4 +13,4 @@ @@
         "components": "@/components",
         "utils": "@/lib/utils"
       }
-    }
+    }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { default as AspectRatio } from './AspectRatio.vue'
		export { default as AspectRatio } from "./AspectRatio.vue";