feat(profile): add profile page and styles, update route access

2026-07-07 19:11:25 +08:00
parent 1f1674ee59
commit 43e5cc95af
6 changed files with 597 additions and 2 deletions
@@ -0,0 +1,164 @@
+"use client";
+
+import Image from "next/image";
+import { Camera, ImageIcon, LockKeyhole, MessageCircle, Sparkles } from "lucide-react";
+
+import { MobileShell } from "@/app/_components/core";
+import { useAppNavigator } from "@/router/use-app-navigator";
+
+import styles from "./profile-screen.module.css";
+
+const PROFILE = {
+  name: "Elio Silvestri",
+  handle: "@elio.private",
+  avatar: "/images/chat/pic-chat-elio.png",
+  postsCount: 10,
+  cta: "Join Me, unlock my private zoom",
+  bio: "Soft moments, private photos, and a little sweetness just for you.",
+} as const;
+
+const POSTS = [
+  {
+    id: "private-zoom-1",
+    timeAgo: "1 day ago",
+    price: "XXX coins",
+    photoCount: "7 photos",
+  },
+  {
+    id: "private-zoom-2",
+    timeAgo: "30 days ago",
+    price: "XXX coins",
+    photoCount: "7 photos",
+  },
+] as const;
+
+export function ProfileScreen() {
+  const navigator = useAppNavigator();
+
+  const openVipSubscription = () => {
+    navigator.openSubscription({ type: "vip" });
+  };
+
+  return (
+    <MobileShell background="#fff7ed">
+      <main className={styles.shell}>
+        <div className={styles.backgroundGlowOne} />
+        <div className={styles.backgroundGlowTwo} />
+
+        <section className={styles.hero} aria-labelledby="profile-title">
+          <div className={styles.heroTopline}>
+            <span className={styles.liveDot} aria-hidden="true" />
+            <span>Private zoom is open</span>
+          </div>
+
+          <div className={styles.identity}>
+            <div className={styles.avatarFrame}>
+              <Image
+                src={PROFILE.avatar}
+                alt={PROFILE.name}
+                width={72}
+                height={72}
+                priority
+              />
+            </div>
+
+            <div className={styles.identityText}>
+              <h1 id="profile-title" className={styles.title}>
+                {PROFILE.name}
+              </h1>
+              <p className={styles.handle}>{PROFILE.handle}</p>
+            </div>
+          </div>
+
+          <p className={styles.bio}>{PROFILE.bio}</p>
+
+          <button
+            type="button"
+            className={styles.primaryCta}
+            onClick={openVipSubscription}
+          >
+            <Sparkles size={16} aria-hidden="true" />
+            <span>{PROFILE.cta}</span>
+          </button>
+        </section>
+
+        <section className={styles.postsSection} aria-labelledby="posts-title">
+          <div className={styles.sectionHeader}>
+            <div>
+              <p className={styles.kicker}>Posts</p>
+              <h2 id="posts-title" className={styles.sectionTitle}>
+                Private moments
+              </h2>
+            </div>
+            <span className={styles.postCount}>{PROFILE.postsCount}</span>
+          </div>
+
+          <div className={styles.timeline}>
+            {POSTS.map((post, index) => (
+              <article
+                key={post.id}
+                className={styles.postCard}
+                style={{ "--reveal-index": index } as React.CSSProperties}
+              >
+                <header className={styles.postHeader}>
+                  <div className={styles.postAuthor}>
+                    <Image
+                      src={PROFILE.avatar}
+                      alt=""
+                      width={38}
+                      height={38}
+                      className={styles.postAvatar}
+                    />
+                    <div>
+                      <p className={styles.authorName}>{PROFILE.name}</p>
+                      <p className={styles.authorSubline}>Private zoom drop</p>
+                    </div>
+                  </div>
+                  <time className={styles.postTime}>{post.timeAgo}</time>
+                </header>
+
+                <button
+                  type="button"
+                  className={styles.lockedPreview}
+                  onClick={openVipSubscription}
+                  aria-label={`Unlock ${post.photoCount} from ${PROFILE.name}`}
+                >
+                  <div className={styles.previewIcon}>
+                    <LockKeyhole size={18} aria-hidden="true" />
+                  </div>
+                  <div className={styles.previewText}>
+                    <strong>{post.price}</strong>
+                    <span>Unlock to view</span>
+                    <small>
+                      <ImageIcon size={13} aria-hidden="true" />
+                      {post.photoCount}
+                    </small>
+                  </div>
+                </button>
+              </article>
+            ))}
+          </div>
+        </section>
+
+        <nav className={styles.bottomNav} aria-label="Profile navigation">
+          <button
+            type="button"
+            className={styles.navButton}
+            onClick={() => navigator.openChat({ replace: false })}
+          >
+            <MessageCircle size={20} aria-hidden="true" />
+            <span>Chat</span>
+          </button>
+          <button
+            type="button"
+            className={`${styles.navButton} ${styles.navButtonActive}`}
+            aria-current="page"
+          >
+            <Camera size={20} aria-hidden="true" />
+            <span>Elio Private zoom</span>
+          </button>
+        </nav>
+      </main>
+    </MobileShell>
+  );
+}