Merge pull request #95 from codeunia-dev/feat/implementprofileview

feat: implement profile view and enhance profile page with new components

Author: codeunia-dev

app/protected/profile/page.tsx

@@ -35,6 +35,20 @@ export default async function ProfilePage() {
         <div className="relative">
           <ProfileSettings />
         </div>
+
+        {/* View Profile Link */}
+        <div className="text-center">
+          <a 
+            href="/protected/profile/view" 
+            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-green-500 to-blue-600 text-white rounded-lg hover:from-green-600 hover:to-blue-700 transition-all duration-200 font-medium"
+          >
+            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+            </svg>
+            View Your Profile
+          </a>
+        </div>
       </div>
     </div>
   );

app/protected/profile/view.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useProfile } from '@/hooks/useProfile';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Loader2, User, MapPin, Briefcase } from 'lucide-react';
+
+export default function ProfileView() {
+  const { profile, loading } = useProfile();
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <Loader2 className="h-8 w-8 animate-spin" />
+      </div>
+    );
+  }
+
+  if (!profile) {
+    return <div className="text-center">Profile not found.</div>;
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto p-6 space-y-6">
+      <Card className="hover:shadow-lg transition-shadow">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <User className="h-5 w-5" />
+            {profile.display_name || `${profile.first_name} ${profile.last_name}`}
+          </CardTitle>
+          <CardDescription>Your public profile information</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center gap-2">
+            <MapPin className="h-4 w-4" />
+            {profile.location || 'Location not set'}
+          </div>
+          <div className="flex items-center gap-2">
+            <Briefcase className="h-4 w-4" />
+            {profile.current_position || 'Position not set'} at {profile.company || 'Company not set'}
+          </div>
+          <div>
+            <h2 className="text-lg font-medium">Bio</h2>
+            <p>{profile.bio || 'No bio available.'}</p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/protected/profile/view/page.tsx

@@ -0,0 +1,42 @@
+import { redirect } from "next/navigation";
+import { createClient } from "@/lib/supabase/server";
+import { ProfileView } from "@/components/users/ProfileView";
+
+export default async function ProfileViewPage() {
+  const supabase = await createClient();
+
+  const { data, error } = await supabase.auth.getUser();
+  if (error || !data?.user) {
+    redirect("/auth/signin");
+  }
+
+  return (
+    <div className="flex-1 w-full flex flex-col gap-8 p-6 max-w-6xl mx-auto">
+      <div className="space-y-6">
+        {/* Page Header */}
+        <div className="text-center space-y-4">
+          <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-green-500 to-blue-600 rounded-full mb-4">
+            <svg className="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+            </svg>
+          </div>
+          
+          <div className="space-y-2">
+            <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-900 via-green-800 to-blue-800 dark:from-white dark:via-green-200 dark:to-blue-200 bg-clip-text text-transparent">
+              Profile View
+            </h1>
+            <p className="text-xl text-gray-600 dark:text-gray-300 font-medium">
+              See how your profile appears to others
+            </p>
+          </div>
+        </div>
+
+        {/* Profile View Component */}
+        <div className="relative">
+          <ProfileView />
+        </div>
+      </div>
+    </div>
+  );
+}

components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }