feat(profile-layout): create dummy layout skeleton

Author: habibayman

app/components/profile/ProfileDetails.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="bg-accent/10 h-[460px]">
+    <h1 class="p-4 text-2xl font-bold"></h1>
+  </div>
+</template>

app/pages/profile/index.vue

@@ -1,8 +1,33 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import ProfileDetails from '~/components/profile/ProfileDetails.vue';
+import Tabs from '@/components/ui/Tabs.vue';
+import Tab from '@/components/ui/Tab.vue';
+</script>
 
 <template>
   <div>
-    <h1 class="p-4 text-2xl font-bold">{{ $t('leftsidebar.nav.profile') }}</h1>
-    <!-- Profile content will go here -->
+    <ProfileDetails />
+    <Tabs>
+      <Tab
+        :label="$t('profile.tabs.posts')"
+        route="/home"
+        :is-active="$route.path === '/profile'"
+      />
+      <Tab
+        :label="$t('profile.tabs.replies')"
+        route="/home"
+        :is-active="$route.path !== '/profile'"
+      />
+      <Tab
+        :label="$t('profile.tabs.media')"
+        route="/home"
+        :is-active="$route.path !== '/profile'"
+      />
+      <Tab
+        :label="$t('profile.tabs.likes')"
+        route="/home"
+        :is-active="$route.path !== '/profile'"
+      />
+    </Tabs>
   </div>
 </template>

i18n/locales/en.json

@@ -37,6 +37,14 @@
   "homepage": {
     "tweets": "Tweets"
   },
+  "profile": {
+    "tabs": {
+      "posts": "Posts",
+      "replies": "Replies",
+      "media": "Media",
+      "likes": "Likes"
+    }
+  },
   "playground": {
     "dialog": {
       "title": "Create your account",