Skip to content

Commit 9586e85

Browse files
sanderhdsanderhd
committed
feat: restyle pages + add single blog page
1 parent 762a44a commit 9586e85

File tree

6 files changed

+297
-18
lines changed

6 files changed

+297
-18
lines changed

‎app/admin/AdminBlogForm.tsx‎

Lines changed: 72 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,90 @@
11
"use client";
22
import React, { useState } from "react";
3+
import { motion } from "framer-motion"
34

45
export default function AdminBlogForm() {
56
const [title, setTitle] = useState("");
67
const [content, setContent] = useState("");
8+
const [isSubmitting, setIsSubmitting] = useState(false);
9+
const [message, setMessage] = useState<string | null>(null);
710

811
async function onSubmit(e: React.FormEvent) {
912
e.preventDefault();
13+
setIsSubmitting(true);
14+
setMessage(null);
15+
16+
try {
17+
const res = await fetch("/api/admin/blogs", {
18+
method: "POST",
19+
headers: { "Content-Type": "application/json" },
20+
body: JSON.stringify({ title, content, published: true }),
21+
});
22+
23+
if (!res.ok) {
24+
setMessage(await res.text());
25+
return;
26+
}
1027

11-
const res = await fetch("/api/admin/blogs", {
12-
method: "POST",
13-
headers: { "Content-Type": "application/json" },
14-
body: JSON.stringify({ title, content, published: true }),
15-
});
16-
if (!res.ok) alert(await res.text());
17-
else {
1828
setTitle("");
1929
setContent("");
20-
alert("Saved");
30+
setMessage("Blog succesfully saved!");
31+
} catch {
32+
setMessage("Something went wrong!");
33+
} finally {
34+
setIsSubmitting(false);
2135
}
22-
}
36+
}
2337

2438
return (
25-
<form onSubmit={onSubmit} className="space-y-2">
26-
<input value={title} onChange={e=>setTitle(e.target.value)} placeholder="Title" className="border p-2 w-full" />
27-
<textarea value={content} onChange={e=>setContent(e.target.value)} placeholder="Content" className="border p-2 w-full" />
28-
<button className="border px-3 py-2">Create</button>
39+
<form onSubmit={onSubmit} className="space-y-4">
40+
<motion.div
41+
initial={{ opacity: 0, y: 12}}
42+
animate={{ opacity: 1, y: 0}}
43+
transition={{ delay: 0.1, duration: 0.4 }}
44+
>
45+
<label htmlFor="title" className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
46+
Title
47+
</label>
48+
<input
49+
id="title"
50+
value={title}
51+
onChange={(e) => setTitle(e.target.value)}
52+
placeholder="Title..."
53+
required
54+
className="w-full rounded-xl border border-slate-300 bg-white/90 px-4 py-3 text-slate-900 outline-none ring-blue-300 transition placeholder:text-slate-400 focus:ring-2 dark:border-slate-800 dark:bg-slate-950/60 dark:text-slate-100"
55+
/>
56+
</motion.div>
57+
58+
<motion.div
59+
initial={{ opacity: 0, y: 12}}
60+
animate={{ opacity: 1, y: 0}}
61+
transition={{ delay: 0.1, duration: 0.4 }}
62+
>
63+
<label htmlFor="content" className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
64+
Content
65+
</label>
66+
<textarea
67+
id="content"
68+
value={content}
69+
onChange={(e) => setContent(e.target.value)}
70+
placeholder="Content..."
71+
required
72+
className="w-full rounded-xl border border-slate-300 bg-white/90 px-4 py-3 text-slate-900 outline-none ring-blue-300 transition placeholder:text-slate-400 focus:ring-2 dark:border-slate-800 dark:bg-slate-950/60 dark:text-slate-100"
73+
/>
74+
</motion.div>
75+
76+
{message ? (
77+
<p className="text-sm text-slate-600 dark:text-slate-300">{message}</p>
78+
) : null}
79+
80+
<motion.button
81+
type="submit"
82+
disabled={isSubmitting}
83+
whileHover={{ scale: 1.02 }}
84+
whileTap={{ scale: 0.98 }}
85+
className="inline-flex items-center justify-center rounded-full border border-slate-200 bg-slate-900 px-5 py-2 text-sm font-medium text-white shadow-lg transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-60 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700">
86+
{isSubmitting ? "Saving..." : "Create Blog"}
87+
</motion.button>
2988
</form>
3089
);
3190
}

‎app/admin/page.tsx‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,47 @@
1+
"use client";
2+
3+
import { motion } from "framer-motion";
14
import AdminBlogForm from "./AdminBlogForm";
25

36
export default function AdminPage() {
47
return (
5-
<main className="p-6 space-y-6">
6-
<h1 className="text-2xl font-bold">Admin</h1>
7-
<AdminBlogForm />
8+
<main className="relative isolate flex min-h-screen items0center justify-center overflow-hidden px-4 py-10">
9+
<div className="pointer-events-none absolute inset-0 overflow-hidden bg-white dark:bg-gray-950">
10+
<div className="absolute inset-0 bg-linear-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-gray-900 dark:via-slate-900 dark:to-gray-950" />
11+
<div className="absolute -right-24 -top-24 h-80 w-80 rounded-full bg-blue-200/40 blur-3xl dark:bg-blue-800/20" />
12+
<div className="absolute -bottom-20 -left-20 h-72 w-72 rounded-full bg-indigo-200/35 blur-3xl dark:bg-indigo-800/20" />
13+
14+
<div className="absolute inset-0 opacity-55 dark:opacity-40">
15+
<svg width="100%" height="100%" className="text-slate-500 dark:text-slate-500">
16+
<pattern id="tech-pattern-admin" x="0" y="0" width="36" height="36" patternUnits="userSpaceOnUse">
17+
<circle cx="18" cy="18" r="1.5" fill="currentColor" />
18+
</pattern>
19+
<rect width="100%" height="100%" fill="url(#tech-pattern-admin)" />
20+
</svg>
21+
</div>
22+
23+
<div className="absolute bottom-0 right-0 h-1/2 w-full bg-linear-to-t from-blue-100/30 to-transparent dark:from-blue-900/15 dark:to-transparent" />
24+
</div>
25+
26+
<section className="relative z-10 w-full max-w-3xl">
27+
<motion.div
28+
initial={{ opacity: 0, y: 24, filter: "blur(6px)"}}
29+
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
30+
transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
31+
className="rounded-3xl border border-slate-200/80 bg-white/80 p-6 shadow-2xl backdrop-blur-xl sm:p-8 dark:border-slate-800 dark:bg-slate-900/75"
32+
>
33+
<h1 className="font-mono text-3xl tracking-tight text-gray-900 sm:text04xl dark:text-white">
34+
Admin Panel
35+
</h1>
36+
<p className="mt-2 text-sm text-slate-600 dark:text-slate-400">
37+
Create & publish new blog posts.
38+
</p>
39+
40+
<div className="mt-8">
41+
<AdminBlogForm />
42+
</div>
43+
</motion.div>
44+
</section>
845
</main>
946
)
1047
}

‎app/blog/[id]/page.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { notFound } from "next/navigation";
2+
import { prisma } from "@/lib/prisma"
3+
4+
type BlogPageProps = {
5+
params: Promise<{
6+
id: string;
7+
}>;
8+
};
9+
10+
export default async function BlogDetailPage({ params }: BlogPageProps) {
11+
const { id } = await params;
12+
13+
const blog = await prisma.blog.findFirst({
14+
where: {
15+
id,
16+
published: true,
17+
},
18+
});
19+
20+
if (!blog) {
21+
notFound();
22+
}
23+
24+
return (
25+
<main className="relative isolate min-h-screen overflow-hidden px-4 py-16 sm:px-6">
26+
<div className="pointer-events-none absolute inset-0 overflow-hidden bg-white dark:bg-gray-950">
27+
<div className="absolute inset-0 bg-linear-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-gray-900 dark:via-slate-900 dark:to-gray-950" />
28+
<div className="absolute -right-24 -top-24 h-80 w-80 rounded-full bg-blue-200/40 blur-3xl dark:bg-blue-800/20" />
29+
<div className="absolute -bottom-20 -left-20 h-72 w-72 rounded-full bg-indigo-200/35 blur-3xl dark:bg-indigo-800/20" />
30+
</div>
31+
32+
<article className="relative z-10 mx-auto w-full max-w-3xl rounded-3xl border border-slate-200/70 bg-white/80 p-6 shadow-xl backdrop-blur sm:p-10 dark:border-slate-700/70 dark:bg-slate-900/50 ">
33+
<p className="text-xs uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400">
34+
Blog
35+
</p>
36+
37+
<h1 className="mt-2 font-mono text-3xl tracking-tight text-slate-900 sm:text-5xl dark:text-white">
38+
{blog.title}
39+
</h1>
40+
41+
<p className="mt-3 text-sm text-slate-500 dark:text-slate-400">
42+
{new Date(blog.createdAt).toLocaleDateString("en-GB", {
43+
year: "numeric",
44+
month: "long",
45+
day: "numeric",
46+
})}
47+
</p>
48+
49+
<div className="prose prose-slate mt-8 max-w-none dark:prose-invert">
50+
{blog.content ? (
51+
blog.content.split("\n").map((line, i) => (
52+
<p key={i}>{line}</p>
53+
))
54+
) : (
55+
<p>No content.</p>
56+
)}
57+
</div>
58+
</article>
59+
</main>
60+
)
61+
}

‎app/blog/page.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
"use client";
2+
3+
import { ArrowRight } from "lucide-react";
4+
import { motion } from "framer-motion";
5+
6+
export default function Home() {
7+
return (
8+
<div className="relative isolate flex min-h-screen items-center justify-center overflow-hidden">
9+
<div className="pointer-events-none absolute inset-0 overflow-hidden bg-white dark:bg-gray-950">
10+
<div className="absolute inset-0 bg-linear-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-gray-900 dark:via-slate-900 dark:to-gray-950" />
11+
<div className="absolute -right-24 -top-24 h-80 w-80 rounded-full bg-blue-200/40 blur-3xl dark:bg-blue-800/20" />
12+
<div className="absolute -bottom-20 -left-20 h-72 w-72 rounded-full bg-indigo-200/35 blur-3xl dark:bg-indigo-800/20" />
13+
14+
<div className="absolute inset-0 opacity-55 dark:opacity-40">
15+
<svg width="100%" height="100%" className="text-slate-500 dark:text-slate-500">
16+
<pattern
17+
id="tech-pattern"
18+
x="0"
19+
y="0"
20+
width="36"
21+
height="36"
22+
patternUnits="userSpaceOnUse"
23+
>
24+
<circle cx="18" cy="18" r="1.5" fill="currentColor" />
25+
</pattern>
26+
<rect width="100%" height="100%" fill="url(#tech-pattern)" />
27+
</svg>
28+
</div>
29+
30+
<div className="absolute bottom-0 right-0 h-1/2 w-full bg-linear-to-t from-blue-100/30 to-transparent dark:from-blue-900/15 dark:to-transparent" />
31+
</div>
32+
33+
<div className="relative z-10 flex flex-col items-center gap-8">
34+
<motion.h1
35+
initial={{ opacity: 0, y: 24, filter: "blur(6px)" }}
36+
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
37+
transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
38+
className="font-mono text-5xl tracking-tight text-gray-900 select-none sm:text-7xl md:text-8xl lg:text-9xl dark:text-white">
39+
no blogs here!
40+
</motion.h1>
41+
42+
<div className="flex gap-4">
43+
<motion.button
44+
initial={{ opacity: 0, y: 20}}
45+
animate={{ opacity: 1, y: 0 }}
46+
transition={{ delay: 0.3, duration: 0.6 }}
47+
whileHover={{ scale: 1.05 }}
48+
whileTap={{ scale: 0.95 }}
49+
onClick={() => (window.location.href = '/blogs')}
50+
className="group inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-900 px-5 py-2 text-sm font-medium text-white shadow-lg transition hover:bg-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
51+
>
52+
<span>Blogs</span>
53+
<ArrowRight className="transition-transform group-hover:translate-x-1" size={18} />
54+
</motion.button>
55+
</div>
56+
</div>
57+
</div>
58+
);
59+
}

‎app/blogs/page.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import { motion } from "framer-motion";
44
import { useEffect, useState } from "react";
5+
import Link from "next/link";
56

67
type BlogPost = {
78
id: string;
@@ -103,9 +104,12 @@ export default function Home() {
103104
</p>
104105

105106
<div className="mt-4">
106-
<button className="inline-flex items-center rounded-full border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-100 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-800">
107+
<Link
108+
href={`/blog/${p.id}`}
109+
className="inline-flex items-center rounded-full border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-100 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-800"
110+
>
107111
Read more
108-
</button>
112+
</Link>
109113
</div>
110114
</motion.article>
111115
))}

‎app/not-found.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
"use client";
2+
3+
import { ArrowRight } from "lucide-react";
4+
import { motion } from "framer-motion";
5+
6+
export default function Home() {
7+
return (
8+
<div className="relative isolate flex min-h-screen items-center justify-center overflow-hidden">
9+
<div className="pointer-events-none absolute inset-0 overflow-hidden bg-white dark:bg-gray-950">
10+
<div className="absolute inset-0 bg-linear-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-gray-900 dark:via-slate-900 dark:to-gray-950" />
11+
<div className="absolute -right-24 -top-24 h-80 w-80 rounded-full bg-blue-200/40 blur-3xl dark:bg-blue-800/20" />
12+
<div className="absolute -bottom-20 -left-20 h-72 w-72 rounded-full bg-indigo-200/35 blur-3xl dark:bg-indigo-800/20" />
13+
14+
<div className="absolute inset-0 opacity-55 dark:opacity-40">
15+
<svg width="100%" height="100%" className="text-slate-500 dark:text-slate-500">
16+
<pattern
17+
id="tech-pattern"
18+
x="0"
19+
y="0"
20+
width="36"
21+
height="36"
22+
patternUnits="userSpaceOnUse"
23+
>
24+
<circle cx="18" cy="18" r="1.5" fill="currentColor" />
25+
</pattern>
26+
<rect width="100%" height="100%" fill="url(#tech-pattern)" />
27+
</svg>
28+
</div>
29+
30+
<div className="absolute bottom-0 right-0 h-1/2 w-full bg-linear-to-t from-blue-100/30 to-transparent dark:from-blue-900/15 dark:to-transparent" />
31+
</div>
32+
33+
<div className="relative z-10 flex flex-col items-center gap-8">
34+
<motion.h1
35+
initial={{ opacity: 0, y: 24, filter: "blur(6px)" }}
36+
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
37+
transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
38+
className="font-mono text-5xl tracking-tight text-gray-900 select-none sm:text-7xl md:text-8xl lg:text-9xl dark:text-white">
39+
dead end :(
40+
</motion.h1>
41+
42+
<div className="flex gap-4">
43+
<motion.button
44+
initial={{ opacity: 0, y: 20}}
45+
animate={{ opacity: 1, y: 0 }}
46+
transition={{ delay: 0.3, duration: 0.6 }}
47+
whileHover={{ scale: 1.05 }}
48+
whileTap={{ scale: 0.95 }}
49+
onClick={() => (window.location.href = '/')}
50+
className="group inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-900 px-5 py-2 text-sm font-medium text-white shadow-lg transition hover:bg-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
51+
>
52+
<span>Home</span>
53+
<ArrowRight className="transition-transform group-hover:translate-x-1" size={18} />
54+
</motion.button>
55+
</div>
56+
</div>
57+
</div>
58+
);
59+
}

0 commit comments

Comments
 (0)