chore: wip

Author: glennmichael123

resources/components/Bench/Article.vue

@@ -20,7 +20,7 @@ useHead({
 </script>
 
 <template>
-  <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 pb-32">
     <div class="mx-auto mt-6 text-gray-500">
       <div class="flex items-center mb-8">
         <div class="flex items-center">

resources/components/Bench/ArticleHeader.vue

@@ -38,7 +38,7 @@ const review = props.review
             </span>
             <h2 class="text-lg font-semibold text-gray-900">Reviewing</h2>
             <div class="mt-1 flex items-center justify-end">
-              <img class="h-10 w-10 rounded-full" :src="review.judge.imageUrl" :alt="review.judge.name">
+              <img class="h-10 w-10 rounded-full" :src="review.judge.photo" :alt="review.judge.name">
               <div class="ml-3">
                 <p class="text-sm font-medium text-gray-900">{{ review.judge.name }}</p>
                 <p class="text-sm text-gray-500">{{ review.judge.court }}</p>

resources/components/Bench/Blog/Blog.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { BlogPost } from '@/types/bench';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  post: BlogPost
+}>()
+
+const post = props.post
+
+defineOptions({
+  name: 'BlogDetailPage',
+})
+
+useHead({
+  title: `${post.title} - The Chamber of Secrets`,
+  meta: [
+    { name: 'description', content: post.content.substring(0, 160) },
+  ],
+})
+
+const shareUrl = computed(() => {
+  return window.location.href
+})
+
+const sharePost = () => {
+  if (navigator.share) {
+    navigator.share({
+      title: post.title,
+      text: post.content.substring(0, 160),
+      url: shareUrl.value,
+    })
+  } else {
+    // Fallback: Copy to clipboard
+    navigator.clipboard.writeText(shareUrl.value)
+    // You might want to add a toast notification here
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 pb-32">
+    <div class="mx-auto mt-6 text-gray-500">
+      <div class="blog-content relative">
+        <div class="text-lg text-gray-700 space-y-6 whitespace-pre-line" v-html="post.content"></div>
+      </div>
+
+      <!-- Article footer -->
+      <div class="mt-16 border-t border-gray-200 pt-8">
+        <div class="flex items-center justify-end">
+          <button 
+            @click="sharePost"
+            class="inline-flex items-center space-x-2 text-gray-600 hover:text-gray-900 transition-colors duration-200"
+          >
+            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
+            </svg>
+            <span>Share</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template> 

resources/components/Bench/Blog/BlogHeader.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { BlogPost } from '@/types/bench';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  post: BlogPost
+}>()
+
+const post = props.post
+
+// Calculate reading time (assuming average reading speed of 200 words per minute)
+const readingTime = computed(() => {
+  const words = post.content.trim().split(/\s+/).length
+  const minutes = Math.ceil(words / 200)
+  return `${minutes} min read`
+})
+</script>
+
+<template>
+  <header class="relative">
+    <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 pt-16 pb-8">
+      <div class="text-center">
+        <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+          {{ post.title }}
+        </h1>
+      </div>
+
+      <!-- Author and meta info -->
+      <div class="mt-8 flex items-center justify-between border-t border-gray-200 pt-8">
+        <!-- Author info -->
+        <div class="flex items-center">
+          <img class="h-12 w-12 rounded-full" :src="post.author.imageUrl" :alt="post.author.name">
+          <div class="ml-3">
+            <p class="text-sm font-medium text-gray-900">
+              <a href="#" class="hover:underline">{{ post.author.name }}</a>
+            </p>
+          </div>
+        </div>
+
+        <!-- Reading time and date -->
+        <div class="flex items-center space-x-4 text-sm text-gray-500">
+          <span>{{ readingTime }}</span>
+          <span aria-hidden="true">&middot;</span>
+          <time :datetime="post.dateTime">{{ post.date }}</time>
+        </div>
+      </div>
+    </div>
+  </header>
+</template> 

resources/components/Bench/Judge/JudgeDirectory.vue

@@ -88,7 +88,7 @@
           <div class="relative z-10 p-6">
             <div class="relative">
               <div class="mx-auto h-40 w-40 overflow-hidden rounded-full ring-4 ring-gray-50 group-hover:ring-softBrown transition-all duration-300">
-                <img class="h-full w-full object-cover filter grayscale group-hover:grayscale-0 transition-all duration-300" :src="judge.image" :alt="judge.name">
+                <img class="h-full w-full object-cover filter grayscale group-hover:grayscale-0 transition-all duration-300" :src="judge.photo" :alt="judge.name">
               </div>
               <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2">
                 <span class="inline-flex items-center rounded-full bg-warm-gray px-3 py-1 text-sm font-medium text-gray-700 ring-1 ring-inset ring-gray-700/10">

resources/components/Bench/Judge/ProfileHeader.vue

@@ -1,13 +1,36 @@
 <script setup lang="ts">
+import type { Judge } from '@/types/bench';
+
+const props = defineProps<{
+  judge: Judge
+}>()
+
+const judge = props.judge
+
 const showCopiedFeedback = ref(false)
 
-const copyProfileLink = () => {
+const shareProfile = async () => {
   const url = window.location.href
-  navigator.clipboard.writeText(url)
-  showCopiedFeedback.value = true
-  setTimeout(() => {
-    showCopiedFeedback.value = false
-  }, 2000)
+  const title = 'Judge Profile'
+  
+  if (navigator.share) {
+    try {
+      await navigator.share({
+        title,
+        url,
+      })
+    } catch (err) {
+      // User cancelled or share failed
+      console.error('Error sharing:', err)
+    }
+  } else {
+    // Fallback to copy
+    navigator.clipboard.writeText(url)
+    showCopiedFeedback.value = true
+    setTimeout(() => {
+      showCopiedFeedback.value = false
+    }, 2000)
+  }
 }
 </script>
 
@@ -30,11 +53,11 @@ const copyProfileLink = () => {
           <button 
             type="button" 
             class="hidden text-sm/6 font-semibold text-gray-900 sm:block"
-            @click="copyProfileLink"
+            @click="shareProfile"
           >
-            {{ showCopiedFeedback ? 'Copied!' : 'Copy Profile Link' }}
+            {{ showCopiedFeedback ? 'Copied!' : 'Share Profile' }}
           </button>
-          <router-link to="/review" class="hidden text-sm/6 font-semibold text-gray-900 sm:block">Write Review</router-link>
+          <router-link :to="`/review/judge/${judge.id}`" class="hidden text-sm/6 font-semibold text-gray-900 sm:block">Write Review</router-link>
           <a href="#" class="rounded-md bg-gray-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">Follow</a>
 
           <div class="relative sm:hidden">
@@ -46,7 +69,7 @@ const copyProfileLink = () => {
             </button>
 
             <div class="absolute right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="more-menu-button" tabindex="-1">
-              <button type="button" class="block w-full px-3 py-1 text-left text-sm/6 text-gray-900" role="menuitem" tabindex="-1" id="more-menu-item-0">Share Profile</button>
+              <button type="button" class="block w-full px-3 py-1 text-left text-sm/6 text-gray-900" role="menuitem" tabindex="-1" id="more-menu-item-0" @click="shareProfile">Share Profile</button>
               <router-link to="/review" class="block px-3 py-1 text-sm/6 text-gray-900" role="menuitem" tabindex="-1" id="more-menu-item-1">Write Review</router-link>
             </div>
           </div>

resources/components/Bench/LeftSidebar.vue

@@ -6,7 +6,7 @@
         <h2 class="text-base font-semibold text-gray-900">Trending Judges</h2>
         <div class="mt-4 space-y-4">
           <div v-for="judge in trendingJudges" :key="judge.id" class="flex items-center space-x-3">
-            <img class="h-8 w-8 rounded-full filter grayscale" :src="judge.imageUrl" :alt="judge.name" />
+            <img class="h-8 w-8 rounded-full filter grayscale" :src="judge.photo" :alt="judge.name" />
             <div class="min-w-0 flex-1">
               <p class="text-sm font-medium text-gray-900">{{ judge.name }}</p>
               <p class="text-sm text-gray-500">{{ judge.court }}</p>

resources/components/Bench/ReviewForm.vue

@@ -94,7 +94,7 @@ function handleCancel() {
       <div class="pb-12">
         <div>
           <div class="text-center mb-8">
-            <img class="inline-block h-24 w-24 rounded-full ring-2 ring-white mb-4 filter grayscale" :src="judge.imageUrl" :alt="judge.name" />
+            <img class="inline-block h-24 w-24 rounded-full ring-2 ring-white mb-4 filter grayscale" :src="judge.photo" :alt="judge.name" />
             <h3 class="text-lg font-semibold text-gray-800">{{ judge.name }}</h3>
             <p class="text-sm text-gray-600">{{ judge.court }}</p>
             <p class="text-sm text-gray-600">{{ judge.department }}</p>