Updated Notion API properties and README with sample database link + …

…cleanup

README.md

@@ -19,6 +19,11 @@ The UI is built using a mix of shadcn/ui, Magic UI and Tailwind CSS.
 
 **Demo:** [https://nextjs-notion-waitlist.vercel.app](https://nextjs-notion-waitlist.vercel.app)
 
+**Sample Database** (Click to view):
+<a href="https://lakshaybhushan.notion.site/15e45b25609e80408f83ebb97b45882b?v=c949c24dff4a42b3baa31bfb3e8a3354" target="_blank" rel="noopener noreferrer">
+ <img src ="./public/sample-db.png">
+</a>
+
 ## Features
 
 - **Next.js 14**: The latest stable version of Next.js.
@@ -42,12 +47,10 @@ There are a few things you need to do before you can use this template:
 
 Assuming that you have a Notion account and a workspace, you can create a new database in your workspace and add the following columns:
 
-- **Id**: A unique identifier for each record.
 - **Name**: Title
 - **Email**: Email
-- **Timestamp**: Created Time
 
-Now you need to get the secret key for your workspace. You can get it from the [Notion Integrations page](https://www.notion.so/my-integrations). You will need this key to fetch data from your workspace.
+Now you need to get the `SECRET` key for your workspace. You can get it from the [Notion Integrations page](https://www.notion.so/my-integrations). You will need this key to fetch data from your workspace.
 
 Now you need to get the ID of the database you created. You can get it from the URL of the database. It will look something like this:
 

app/api/notion/route.ts

@@ -11,17 +11,12 @@ export async function POST(request: Request) {
       },
       properties: {
         Email: {
-          title: [
-            {
-              text: {
-                content: body?.email,
-              },
-            },
-          ],
+          type: "email",
+          email: body?.email,
         },
-        "Name": {
-          type: "rich_text",
-          rich_text: [
+        Name: {
+          type: "title",
+          title: [
             {
               type: "text",
               text: {

components/header.tsx

@@ -2,6 +2,8 @@ import Link from "next/link";
 import { Button } from "./ui/button";
 import { motion } from "framer-motion";
 import { FaGithub } from "react-icons/fa6";
+import { SiNotion } from "react-icons/si";
+
 import { containerVariants, itemVariants } from "@/lib/animation-variants";
 
 export default function Header() {
@@ -10,9 +12,20 @@ export default function Header() {
       variants={containerVariants}
       initial="hidden"
       animate="visible"
-      className="fixed right-0 top-0 z-[50] m-4">
+      className="fixed flex right-0 left-0 justify-between top-0 z-[50] m-4">
+      <motion.div variants={itemVariants}>
+        <Link href="https://lakshaybhushan.notion.site/15e45b25609e80408f83ebb97b45882b?v=c949c24dff4a42b3baa31bfb3e8a3354" rel="noopener noreferrer" target="_blank">
+          <Button
+            size="sm"
+            variant="secondary"
+            className="text-yellow-50 transition-all duration-150 ease-linear md:hover:text-yellow-200">
+            <SiNotion className="md:mr-1.5" />
+            <span className="hidden md:inline">Notion DB sample</span>
+          </Button>
+        </Link>
+      </motion.div>
       <motion.div variants={itemVariants}>
-        <Link href="https://github.com/lakshaybhushan/nextjs-notion-waitlist-template/fork">
+        <Link href="https://github.com/lakshaybhushan/nextjs-notion-waitlist-template/fork" rel="noopener noreferrer" target="_blank">
           <Button
             size="sm"
             variant="secondary"