Merge branch 'main' of https://github.com/WebmasterCamp/ywc20-hackathon-gml

Author: peamz4

app/profile/[id]/UserProfileClient.tsx

@@ -24,17 +24,7 @@ export default function UserProfileClient({ user }: { user: User }) {
     }
   };
 
-  // Placeholder badges
-  const badges = [
-    { src: "/badges/words.png", alt: "Words of Affirmation" },
-    { src: "/badges/quality.png", alt: "Quality Time" },
-    { src: "/badges/physical.png", alt: "Physical Touch" },
-    { src: "/badges/acts.png", alt: "Acts of Service" },
-    { src: "/badges/receiving.png", alt: "Receiving Gifts" },
-  ];
-
-  // Placeholder tags
-  const tags = ["#บาร์แจ๊ส", "#นั่งชิว", "#หุ้น"];
+;
 
   return (
     <div className="min-h-screen bg-background flex flex-col items-center px-4 pb-8 relative">
@@ -61,7 +51,7 @@ export default function UserProfileClient({ user }: { user: User }) {
       {/* Quote */}
       <div className="flex justify-center mb-2">
         <div className="relative bg-white bg-opacity-90 rounded-xl px-6 py-2 text-theme-dark text-base font-semibold shadow-lg border-2 border-theme-pink" style={{ filter: "drop-shadow(0 0 12px #F7B0E0)" }}>
-          <span className="">ต้องการใครสักคนที่เข้าใจ</span>
+          <span >{user.note}</span>
         </div>
       </div>
       {/* Avatar with badge */}
@@ -82,28 +72,22 @@ export default function UserProfileClient({ user }: { user: User }) {
       </div>
       {/* Tags */}
       <div className="flex justify-center gap-3 mb-4">
-        {tags.map((tag, i) => (
+        {user.preferences?.favoriteCategories?.map((tag, i) => (
           <span key={tag} className={`px-5 py-2 rounded-full text-base font-semibold ${i === 2 ? 'bg-muted text-white' : 'bg-gradient-to-r from-theme-pink to-theme-purple text-white'} shadow-md`}>
-            {tag}
+            #{tag}
           </span>
         ))}
       </div>
       {/* Badges */}
-      <div className="flex flex-wrap justify-center gap-4 mb-8 max-w-xs mx-auto">
-        {badges.map((badge) => (
-          <div key={badge.alt} className="w-24 h-24 flex items-center justify-center">
-            <Image src={badge.src} alt={badge.alt} width={90} height={90} className="object-contain" />
-          </div>
-        ))}
-      </div>
+      <Image src="/images/badge.png" alt="skitger" width={300} height={300} />
       {/* Action Button */}
       <button 
         onClick={handleFriendRequest}
         disabled={isLoading}
         className="w-full max-w-md mx-auto py-4 text-xl font-bold rounded-full bg-gradient-to-r from-[#F7B0E0] to-[#5B5BFF] text-white shadow-xl hover:from-[#FE8CC5] hover:to-[#9F45B0] transition mt-2 disabled:opacity-50" 
         style={{ boxShadow: '0 4px 24px 0 #0002' }}
       >
-        {isLoading ? 'กำลังรอการตอบรับ...' : 'ขอเป็นเพื่อนก่อนน้า :)'}
+        {isLoading ? 'กำลังรอการตอบรับ...' : 'ส่งคำขอเป็นเพื่อน'}
       </button>
     </div>
   );