Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added the custom not found page #655

Closed
wants to merge 4 commits into from
Closed

added the custom not found page #655

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1294cac
added the custom not found page
Pratham271 Oct 4, 2024
7abc5d4
solved the bug for view and other pages directory
Pratham271 Oct 11, 2024
2d5380b
Merge branch 'main' into custom-not-found-page
Pratham271 Oct 12, 2024
8de4099
Update 404.tsx
Pratham271 Oct 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
'use client'

import { useState } from 'react'
import Link from 'next/link'
import { motion } from 'framer-motion'
import { Search, Home, Book, Users } from 'lucide-react'

export default function NotFound({ message }: { message?: string }) {
const [searchQuery, setSearchQuery] = useState('')

const handleSearch = (e: React.FormEvent) => {
e.preventDefault()
// Implement search functionality here
// console.log('Searching for:', searchQuery)
}

const paperVariants = {
initial: { y: -100, opacity: 0 },
animate: { y: 0, opacity: 1, transition: { type: 'spring', stiffness: 100 } },
}

return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-50 to-white px-4 py-12">
<motion.div
className="w-64 h-64 mb-8"
initial="initial"
animate="animate"
variants={paperVariants}
>
<svg viewBox="0 0 100 100" className="w-full h-full">
<motion.path
d="M10 10 L90 10 L90 90 L10 90 Z"
fill="none"
stroke="#3B82F6"
strokeWidth="2"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{ duration: 2, ease: "easeInOut" }}
/>
<motion.path
d="M20 30 L80 30 M20 50 L80 50 M20 70 L60 70"
fill="none"
stroke="#3B82F6"
strokeWidth="2"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{ duration: 2, ease: "easeInOut", delay: 0.5 }}
/>
</svg>
</motion.div>

<h1 className="text-5xl font-bold text-blue-600 mb-4">404</h1>
<h2 className="text-2xl font-semibold text-gray-800 mb-8">Page Not Found</h2>

<form onSubmit={handleSearch} className="w-full max-w-md mb-8">
<div className="relative">
<input
type="text"
placeholder="Search Papermark.io"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full px-4 py-2 rounded-full border-2 border-blue-300 focus:outline-none focus:border-blue-500 pr-10"
/>
<button type="submit" className="absolute right-3 top-1/2 transform -translate-y-1/2">
<Search className="text-blue-500 w-5 h-5" />
</button>
</div>
</form>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<Link href="/welcome" className="flex items-center p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
<Home className="text-blue-500 w-6 h-6 mr-3" />
<span className="text-gray-800">Home</span>
</Link>
<Link href="/documents" className="flex items-center p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
<Book className="text-blue-500 w-6 h-6 mr-3" />
<span className="text-gray-800">Documents</span>
</Link>
<Link href="/settings/general" className="flex items-center p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
<Users className="text-blue-500 w-6 h-6 mr-3" />
<span className="text-gray-800">Settings</span>
</Link>
</div>

<p className="text-center text-gray-600 max-w-md">
{message ||
"Sorry, we couldn’t find the page you’re looking for."}
</p>

<footer className="mt-16 text-center text-gray-500">
<p>&copy; {new Date().getFullYear()} Papermark.io. All rights reserved.</p>
</footer>
</div>
)
}
118 changes: 89 additions & 29 deletions pages/404.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,94 @@
import Link from "next/link";
'use client'

import { useState } from 'react'
import Link from 'next/link'
import { motion } from 'framer-motion'
import { Search, Home, Book, Users } from 'lucide-react'

export default function NotFound({ message }: { message?: string }) {
const [searchQuery, setSearchQuery] = useState('')

const handleSearch = (e: React.FormEvent) => {
e.preventDefault()
// Implement search functionality here
// console.log('Searching for:', searchQuery)
}

const paperVariants = {
initial: { y: -100, opacity: 0 },
animate: { y: 0, opacity: 1, transition: { type: 'spring', stiffness: 100 } },
}

return (
<>
<div className="flex min-h-screen flex-col pb-12 pt-16">
<main className="mx-auto flex w-full max-w-7xl flex-grow flex-col justify-center px-4 sm:px-6 lg:px-8">
<div className="py-16">
<div className="text-center">
<p className="text-sm font-semibold uppercase tracking-wide text-indigo-600">
404 error
</p>
<h1 className="mt-2 text-4xl font-extrabold tracking-tight text-slate-950 dark:text-gray-100 sm:text-5xl">
Page not found.
</h1>
<p className="mt-2 text-base text-gray-600">
{message ||
"Sorry, we couldn’t find the page you’re looking for."}
</p>
<div className="mt-6">
<Link
href="/"
className="text-base font-medium text-indigo-600 hover:text-indigo-500"
>
Go back home <span aria-hidden="true"> &rarr;</span>
</Link>
</div>
</div>
</div>
</main>
<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-50 to-white px-4 py-12">
<motion.div
className="w-64 h-64 mb-8"
initial="initial"
animate="animate"
variants={paperVariants}
>
<svg viewBox="0 0 100 100" className="w-full h-full">
<motion.path
d="M10 10 L90 10 L90 90 L10 90 Z"
fill="none"
stroke="#3B82F6"
strokeWidth="2"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{ duration: 2, ease: "easeInOut" }}
/>
<motion.path
d="M20 30 L80 30 M20 50 L80 50 M20 70 L60 70"
fill="none"
stroke="#3B82F6"
strokeWidth="2"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{ duration: 2, ease: "easeInOut", delay: 0.5 }}
/>
</svg>
</motion.div>

<h1 className="text-5xl font-bold text-blue-600 mb-4">404</h1>
<h2 className="text-2xl font-semibold text-gray-800 mb-8">Page Not Found</h2>

<form onSubmit={handleSearch} className="w-full max-w-md mb-8">
<div className="relative">
<input
type="text"
placeholder="Search Papermark.io"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full px-4 py-2 rounded-full border-2 border-blue-300 focus:outline-none focus:border-blue-500 pr-10"
/>
<button type="submit" className="absolute right-3 top-1/2 transform -translate-y-1/2">
<Search className="text-blue-500 w-5 h-5" />
</button>
</div>
</form>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<Link href="/welcome" className="flex items-center p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
<Home className="text-blue-500 w-6 h-6 mr-3" />
<span className="text-gray-800">Home</span>
</Link>
<Link href="/documents" className="flex items-center p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
<Book className="text-blue-500 w-6 h-6 mr-3" />
<span className="text-gray-800">Documents</span>
</Link>
<Link href="/settings/general" className="flex items-center p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
<Users className="text-blue-500 w-6 h-6 mr-3" />
<span className="text-gray-800">Settings</span>
</Link>
</div>
</>
);
<p className="text-center text-gray-600 max-w-md">
{message ||
"Sorry, we couldn’t find the page you’re looking for."}
</p>

<footer className="mt-16 text-center text-gray-500">
<p>&copy; {new Date().getFullYear()} Papermark.io. All rights reserved.</p>
</footer>
</div>
)
}
2 changes: 1 addition & 1 deletion pages/view/[linkId]/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useRouter } from "next/router";

import { useEffect, useState } from "react";

import NotFound from "@/pages/404";
import NotFound from "@/app/not-found";
import { Brand, DataroomBrand } from "@prisma/client";
import Cookies from "js-cookie";
import { useSession } from "next-auth/react";
Expand Down
2 changes: 1 addition & 1 deletion pages/view/domains/[domain]/[slug]/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useRouter } from "next/router";

import { useEffect, useState } from "react";

import NotFound from "@/pages/404";
import NotFound from "@/app/not-found";
import { Brand, DataroomBrand } from "@prisma/client";
import Cookies from "js-cookie";
import { useSession } from "next-auth/react";
Expand Down