feat(nextjs): Header added on custom layout and layout preview
This commit is contained in:
shiva raj badu
parent
2622f2846b
commit
65924bd3fd
10 changed files with 94 additions and 75 deletions
Binary file not shown.
|
|
@ -107,7 +107,7 @@ const SlideContent = ({ slide, index, presentationId }: SlideContentProps) => {
|
|||
if (isStreaming || loading) {
|
||||
return;
|
||||
}
|
||||
if (slide) {
|
||||
if (slide.layout_group.includes("custom")) {
|
||||
const existingScript = document.querySelector(
|
||||
'script[src*="tailwindcss.com"]'
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
import Header from '@/app/dashboard/components/Header'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import React from 'react'
|
||||
import Header from "@/components/Header";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import React from "react";
|
||||
|
||||
const loading = () => {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<div className='max-w-[1440px] w-[95%] mx-auto pb-10 lg:max-w-[70%] xl:max-w-[65%] py-6'>
|
||||
<Skeleton className="h-6 w-full max-w-lg mx-auto" />
|
||||
<Skeleton className="h-40 w-full mx-auto mt-10" />
|
||||
<Skeleton className="h-64 w-full mx-auto mt-16" />
|
||||
<Skeleton className="h-16 w-full mx-auto mt-16" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<div className="max-w-[1440px] w-[95%] mx-auto pb-10 lg:max-w-[70%] xl:max-w-[65%] py-6">
|
||||
<Skeleton className="h-6 w-full max-w-lg mx-auto" />
|
||||
<Skeleton className="h-40 w-full mx-auto mt-10" />
|
||||
<Skeleton className="h-64 w-full mx-auto mt-16" />
|
||||
<Skeleton className="h-16 w-full mx-auto mt-16" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default loading
|
||||
export default loading;
|
||||
|
|
|
|||
|
|
@ -1,56 +1,60 @@
|
|||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
import UploadPage from './components/UploadPage'
|
||||
import Header from '@/app/dashboard/components/Header'
|
||||
import { Metadata } from 'next'
|
||||
import UploadPage from "./components/UploadPage";
|
||||
import Header from "@/components/Header";
|
||||
import { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Presenton | Open Source AI presentation generator",
|
||||
description: "Open-source AI presentation generator with custom layouts, multi-model support (OpenAI, Gemini, Ollama), and PDF/PPTX export. A free Gamma alternative.",
|
||||
alternates: {
|
||||
canonical: "https://presenton.ai/create"
|
||||
},
|
||||
keywords: [
|
||||
"presentation generator",
|
||||
"AI presentations",
|
||||
"data visualization",
|
||||
"automatic presentation maker",
|
||||
"professional slides",
|
||||
"data-driven presentations",
|
||||
"document to presentation",
|
||||
"presentation automation",
|
||||
"smart presentation tool",
|
||||
"business presentations"
|
||||
],
|
||||
openGraph: {
|
||||
title: "Create Data Presentation | PresentOn",
|
||||
description: "Open-source AI presentation generator with custom layouts, multi-model support (OpenAI, Gemini, Ollama), and PDF/PPTX export. A free Gamma alternative.",
|
||||
type: "website",
|
||||
url: "https://presenton.ai/create",
|
||||
siteName: "PresentOn"
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Create Data Presentation | PresentOn",
|
||||
description: "Open-source AI presentation generator with custom layouts, multi-model support (OpenAI, Gemini, Ollama), and PDF/PPTX export. A free Gamma alternative.",
|
||||
site: "@presenton_ai",
|
||||
creator: "@presenton_ai"
|
||||
}
|
||||
}
|
||||
title: "Presenton | Open Source AI presentation generator",
|
||||
description:
|
||||
"Open-source AI presentation generator with custom layouts, multi-model support (OpenAI, Gemini, Ollama), and PDF/PPTX export. A free Gamma alternative.",
|
||||
alternates: {
|
||||
canonical: "https://presenton.ai/create",
|
||||
},
|
||||
keywords: [
|
||||
"presentation generator",
|
||||
"AI presentations",
|
||||
"data visualization",
|
||||
"automatic presentation maker",
|
||||
"professional slides",
|
||||
"data-driven presentations",
|
||||
"document to presentation",
|
||||
"presentation automation",
|
||||
"smart presentation tool",
|
||||
"business presentations",
|
||||
],
|
||||
openGraph: {
|
||||
title: "Create Data Presentation | PresentOn",
|
||||
description:
|
||||
"Open-source AI presentation generator with custom layouts, multi-model support (OpenAI, Gemini, Ollama), and PDF/PPTX export. A free Gamma alternative.",
|
||||
type: "website",
|
||||
url: "https://presenton.ai/create",
|
||||
siteName: "PresentOn",
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Create Data Presentation | PresentOn",
|
||||
description:
|
||||
"Open-source AI presentation generator with custom layouts, multi-model support (OpenAI, Gemini, Ollama), and PDF/PPTX export. A free Gamma alternative.",
|
||||
site: "@presenton_ai",
|
||||
creator: "@presenton_ai",
|
||||
},
|
||||
};
|
||||
|
||||
const page = () => {
|
||||
return (
|
||||
<div className='relative'>
|
||||
<Header />
|
||||
<div className='flex flex-col items-center justify-center py-8'>
|
||||
<h1 className='text-3xl font-semibold font-instrument_sans'>Create Presentation </h1>
|
||||
{/* <p className='text-sm text-gray-500'>We will generate a presentation for you</p> */}
|
||||
</div>
|
||||
return (
|
||||
<div className="relative">
|
||||
<Header />
|
||||
<div className="flex flex-col items-center justify-center py-8">
|
||||
<h1 className="text-3xl font-semibold font-instrument_sans">
|
||||
Create Presentation{" "}
|
||||
</h1>
|
||||
{/* <p className='text-sm text-gray-500'>We will generate a presentation for you</p> */}
|
||||
</div>
|
||||
|
||||
<UploadPage />
|
||||
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default page
|
||||
<UploadPage />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import { ApiResponseHandler } from "@/app/(presentation-generator)/services/api/
|
|||
import { v4 as uuidv4 } from "uuid";
|
||||
import EachSlide from "./components/EachSlide";
|
||||
import GlobalFontManager from "./components/GlobalFontManager";
|
||||
import Header from "@/components/Header";
|
||||
|
||||
// Types
|
||||
interface SlideData {
|
||||
|
|
@ -562,10 +563,11 @@ const CustomLayoutPage = () => {
|
|||
slides.length > 0 ? Math.round((completedSlides / slides.length) * 100) : 0;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-4">
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 ">
|
||||
<Header />
|
||||
<div className="max-w-[1440px] aspect-video mx-auto px-6 ">
|
||||
{/* Header */}
|
||||
<div className="text-center space-y-2 mb-6">
|
||||
<div className="text-center space-y-2 my-6">
|
||||
<h1 className="text-4xl font-bold text-gray-900">
|
||||
Custom Layout Processor
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import Wrapper from "@/components/Wrapper";
|
|||
import { DashboardApi } from "../api/dashboard";
|
||||
import { PresentationGrid } from "./PresentationGrid";
|
||||
|
||||
import Header from "./Header";
|
||||
import Header from "@/components/Header";
|
||||
|
||||
const DashboardPage: React.FC = () => {
|
||||
const [presentations, setPresentations] = useState<any>(null);
|
||||
|
|
@ -26,7 +26,10 @@ const DashboardPage: React.FC = () => {
|
|||
setIsLoading(true);
|
||||
setError(null);
|
||||
const data = await DashboardApi.getPresentations();
|
||||
data.sort((a: any, b: any) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime());
|
||||
data.sort(
|
||||
(a: any, b: any) =>
|
||||
new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
|
||||
);
|
||||
setPresentations(data);
|
||||
} catch (err) {
|
||||
setError(null);
|
||||
|
|
|
|||
|
|
@ -5,13 +5,14 @@ import { useLayout } from "../(presentation-generator)/context/LayoutContext";
|
|||
import LoadingStates from "./components/LoadingStates";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { ExternalLink } from "lucide-react";
|
||||
import Header from "@/components/Header";
|
||||
|
||||
const LayoutPreview = () => {
|
||||
const {
|
||||
getAllGroups,
|
||||
getLayoutsByGroup,
|
||||
getGroupSetting,
|
||||
getAllLayouts,
|
||||
|
||||
loading,
|
||||
error,
|
||||
} = useLayout();
|
||||
|
|
@ -53,6 +54,7 @@ const LayoutPreview = () => {
|
|||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Header />
|
||||
<div className=" sticky top-0 z-30">
|
||||
<div className="max-w-7xl mx-auto border-b px-6 py-6">
|
||||
<div className="text-center">
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import Link from "next/link";
|
|||
import BackBtn from "@/components/BackBtn";
|
||||
import { usePathname } from "next/navigation";
|
||||
import HeaderNav from "@/app/(presentation-generator)/components/HeaderNab";
|
||||
import { Layout } from "lucide-react";
|
||||
const Header = () => {
|
||||
const pathname = usePathname();
|
||||
return (
|
||||
|
|
@ -13,7 +14,7 @@ const Header = () => {
|
|||
<Wrapper>
|
||||
<div className="flex items-center justify-between py-1">
|
||||
<div className="flex items-center gap-3">
|
||||
{pathname !== '/upload' && <BackBtn />}
|
||||
{pathname !== "/upload" && <BackBtn />}
|
||||
<Link href="/dashboard">
|
||||
<img
|
||||
src="/logo-white.png"
|
||||
|
|
@ -22,7 +23,16 @@ const Header = () => {
|
|||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 sm:gap-5 md:gap-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
href="/layout-preview"
|
||||
prefetch={false}
|
||||
className="flex items-center gap-2 px-3 py-2 text-white hover:bg-primary/80 rounded-md transition-colors outline-none"
|
||||
role="menuitem"
|
||||
>
|
||||
<Layout className="w-5 h-5" />
|
||||
<span className="text-sm font-medium font-inter">Layouts</span>
|
||||
</Link>
|
||||
<HeaderNav />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue