diff --git a/frontend/src/app/[username]/page.tsx b/frontend/src/app/[username]/page.tsx index c9dba55..e425143 100644 --- a/frontend/src/app/[username]/page.tsx +++ b/frontend/src/app/[username]/page.tsx @@ -24,6 +24,7 @@ import { ShareProfileBox, PresentationsGrid, SharedPresentationsGrid, + TemplatesGrid, } from "@/features/profile"; import type { ProfileUser, @@ -65,6 +66,11 @@ export default function UserProfilePage() { Presentation[] >([]); + // Templates + // Note: setTemplates will be used when backend API is implemented + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [templates, setTemplates] = useState([]); + // Presentation modals const [deleteModal, setDeleteModal] = useState({ isOpen: false, @@ -510,6 +516,32 @@ export default function UserProfilePage() { {/* Shared Presentations - only for own profile */} {isOwnProfile && ( + <> + + + {/* Templates */} + +
- +

No shared presentations diff --git a/frontend/src/features/profile/components/TemplatesGrid.tsx b/frontend/src/features/profile/components/TemplatesGrid.tsx new file mode 100644 index 0000000..09f4d54 --- /dev/null +++ b/frontend/src/features/profile/components/TemplatesGrid.tsx @@ -0,0 +1,82 @@ +"use client"; + +import { FileSymlink } from "lucide-react"; +import type { Presentation } from "@/features/presentation/services/presentationService"; +import type { SharePlatform } from "../types"; +import { PresentationCard } from "./PresentationCard"; + +interface TemplatesGridProps { + templates: Presentation[]; + username: string; + shareMenuOpen: string | null; + presentationLinkCopied: string | null; + onShare: (slug: string, name: string, platform?: SharePlatform) => void; + onView: (slug: string) => void; + onEdit: (presentation: Presentation) => void; + onDelete: (slug: string, name: string) => void; + menuRefs: Record; +} + +export function TemplatesGrid({ + templates, + username, + shareMenuOpen, + presentationLinkCopied, + onShare, + onView, + onEdit, + onDelete, + menuRefs, +}: TemplatesGridProps) { + return ( +
+ {/* Header */} +
+
+ +
+
+

Templates

+

+ Browse and use presentation templates +

+
+
+ + {/* Templates Grid */} + {templates.length > 0 ? ( +
+ {templates.map((template) => ( + { + menuRefs[template.slug] = el; + }} + /> + ))} +
+ ) : ( +
+
+ +
+

+ No templates available +

+

+ Templates will appear here when they become available +

+
+ )} +
+ ); +} diff --git a/frontend/src/features/profile/components/index.ts b/frontend/src/features/profile/components/index.ts index 84c2d24..cdad644 100644 --- a/frontend/src/features/profile/components/index.ts +++ b/frontend/src/features/profile/components/index.ts @@ -2,5 +2,6 @@ export { ProfileCard } from "./ProfileCard"; export { ShareProfileBox } from "./ShareProfileBox"; export { PresentationsGrid } from "./PresentationsGrid"; export { SharedPresentationsGrid } from "./SharedPresentationsGrid"; +export { TemplatesGrid } from "./TemplatesGrid"; export { PresentationCard } from "./PresentationCard"; export { ShareMenu } from "./ShareMenu";