woedii/app/docs/swot/page.tsx

64 lines
2.1 KiB
TypeScript

"use client";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import Link from "next/link";
export default function SwotAnalysisPage() {
const [isClient, setIsClient] = useState(false);
// This ensures the PDF viewer only renders on the client side
useEffect(() => {
setIsClient(true);
}, []);
return (
<div className="container mx-auto px-4 py-8">
<div className="mb-6">
<Link href="/docs">
<Button variant="outline" className="mb-4">
Back to Documentation
</Button>
</Link>
<h1 className="text-3xl font-bold mb-2">WODEY SWOT Analysis</h1>
<p className="text-gray-600 mb-6">
An in-depth analysis of Strengths, Weaknesses, Opportunities, and
Threats for the WODEY platform.
</p>
</div>
<div className="flex justify-end mb-4">
<a
href="/docs/SWOT-Analysis.pdf"
download="WODEY-SWOT-Analysis.pdf"
className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded shadow-md"
>
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Download PDF
</a>
</div>
{isClient ? (
<div className="w-full h-[calc(100vh-200px)] border border-gray-300 rounded-lg overflow-hidden">
<object
data="/docs/SWOT-Analysis.pdf#toolbar=0"
type="application/pdf"
className="w-full h-full"
title="SWOT Analysis PDF"
>
<p>
Your browser does not support PDFs. Please download to view.
</p>
</object>
</div>
) : (
<div className="flex items-center justify-center w-full h-[calc(100vh-200px)] bg-gray-100 rounded-lg">
Loading PDF viewer...
</div>
)}
</div>
);
}