Skip to content

Commit

Permalink
Add top menu
Browse files Browse the repository at this point in the history
  • Loading branch information
pahans committed May 19, 2024
1 parent a06c709 commit 2dbc9b6
Show file tree
Hide file tree
Showing 11 changed files with 122 additions and 18 deletions.
13 changes: 13 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"react-hook-form": "^7.51.4",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7",
"vaul": "^0.9.1",
"zod": "^3.23.8"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion scripts/seed.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ async function seedPosts() {
.createTable("posts")
.addColumn("id", "serial", (cb) => cb.primaryKey())
.addColumn("title", "varchar(255)", (cb) => cb.notNull())
.addColumn("description", "varchar(255)", (cb) => cb.notNull())
.addColumn("description", "text", (cb) => cb.notNull())
.addColumn("createdAt", sql`timestamp with time zone`, (cb) =>
cb.defaultTo(sql`current_timestamp`)
)
Expand Down
12 changes: 1 addition & 11 deletions src/app/admin/posts-table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import { ColumnDef } from "@tanstack/react-table";

import { BlogPost } from "@/app/components/posts-list/posts-list";
import { Edit as EditIcon, Trash2Icon } from "lucide-react";
import { usePathname, useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
Expand All @@ -19,6 +18,7 @@ import {
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { DataTable } from "./data-table";
import { BlogPost } from "@/app/lib/definitions";

interface PostsTableProps {
posts: BlogPost[];
Expand All @@ -33,12 +33,6 @@ export const PostsTable: React.FC<PostsTableProps> = ({ posts }) => {
router.refresh();
};

const onCreatePost = () => {
const params = new URLSearchParams();
params.set("overlay", "new-post");
router.replace(`${pathname}?${params.toString()}`);
};

const onEditPost = (id: number) => {
const params = new URLSearchParams();
params.set("overlay", "edit-post");
Expand Down Expand Up @@ -97,10 +91,6 @@ export const PostsTable: React.FC<PostsTableProps> = ({ posts }) => {
];
return (
<div>
<Button className="my-2" onClick={onCreatePost}>
<span className="pr-2">Add Post</span>
<EditIcon className="h-4 w-4" />
</Button>
<DataTable columns={columns} data={posts} />
</div>
);
Expand Down
Binary file added src/app/components/header/compose-icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 49 additions & 0 deletions src/app/components/header/header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
"use client";

import { Drawer } from "vaul";
import Image from "next/image";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import ComposeLogo from "./compose-icon.png";
import React from "react";
import { Menu } from "./menu";
import { MenuIcon } from "lucide-react";

interface HeaderProps {}

export const Header: React.FC<HeaderProps> = () => {
return (
<header className="border-b mb-10 py-2 sticky top-0 flex-none w-full mx-auto bg-white border-gray-200 dark:border-gray-600 dark:bg-gray-800">
<div className="flex gap-2 max-w-2xl mx-auto items-center justify-between container">
<Link className="flex gap-2 relative items-center" href="/">
<Image
src={ComposeLogo}
alt="Simple Press Logo"
className="object-contain"
height={50}
/>
<h1>Simple Press</h1>
</Link>
<div className="flex gap-4 items-center">
<Menu className="hidden md:block" />
</div>

<Drawer.Root direction="right">
<Drawer.Trigger asChild className="md:hidden">
<Button size="icon" variant="ghost" asChild>
<MenuIcon className="h-4 w-4 justify-end" />
</Button>
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay className="fixed inset-0 bg-black/40" />
<Drawer.Content className="bg-white flex flex-col h-full w-40 mt-24 fixed bottom-0 right-0 py-10">
<div className="flex flex-col items-center justify-center">
<Menu mobile />
</div>
</Drawer.Content>
</Drawer.Portal>
</Drawer.Root>
</div>
</header>
);
};
1 change: 1 addition & 0 deletions src/app/components/header/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Header } from "./header";
46 changes: 46 additions & 0 deletions src/app/components/header/menu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { Edit as EditIcon, LogIn as LogInIcon } from "lucide-react";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import React from "react";
import { cn } from "@/lib/utils";

interface MenuProps {
mobile?: boolean;
className?: string;
}

const menuItems = [
{ icon: EditIcon, label: "Add Post", link: "/admin?overlay=new-post" },
{ icon: LogInIcon, label: "Login", link: "#" },
];

export const Menu: React.FC<MenuProps> = ({ mobile, className = "" }) => {
return (
<div
className={cn("flex items-center gap-4", {
"flex-col items-start": mobile,
className,
})}
>
{menuItems.map((item) => (
<>
<Button variant="ghost" asChild>
<Link
key={item.label}
href={item.link}
className={cn("flex items-center", {
"items-start justify-start": mobile,
})}
>
<item.icon className="mr-2" />
{item.label}
</Link>
</Button>
{mobile && <Separator />}
</>
))}
</div>
);
};
6 changes: 3 additions & 3 deletions src/app/components/posts-list/posts-list.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import type { Meta, StoryObj } from "@storybook/react";
import { PostsList } from ".";
import { BlogPost } from "./posts-list";
import { BlogPost } from "@/app/lib/definitions";

const posts: Array<BlogPost> = Array.from({ length: 10 }, (_, i) => {
return {
id: i,
title: `hello world${i}`,
description: `${i}Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.`,
description: `${i} Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.`,
author: "Pahan",
date: "2024-05-17",
createdAt: new Date(2024, 5, 1),
};
});

Expand Down
6 changes: 4 additions & 2 deletions src/app/components/posts-list/posts-list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,10 @@ export const PostsList: React.FC<PostsListProps> = async () => {
<p className="text-xs text-muted-foreground">
{createdAt.toDateString()}
</p>
<h2 className="text-sm font-medium leading-none">{title}</h2>
<p className="text-sm text-muted-foreground">{description}</p>
<h2 className="font-medium leading-none capitalize">{title}</h2>
<p className="text-sm text-muted-foreground text-justify">
{description}
</p>
</div>
<Separator className="my-4" />
</div>
Expand Down
4 changes: 3 additions & 1 deletion src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { cn } from "@/lib/utils";
import type { Metadata } from "next";
import { fontSans } from "./fonts";
import "./globals.css";
import { Header } from "@/app/components/header";

export const metadata: Metadata = {
title: "Simple Press",
Expand All @@ -21,7 +22,8 @@ export default function RootLayout({ children }: RootLayoutProps) {
fontSans.variable
)}
>
<div className="max-w-2xl mx-auto">{children}</div>
<Header />
<div className="max-w-2xl container">{children}</div>
</body>
</html>
);
Expand Down

0 comments on commit 2dbc9b6

Please sign in to comment.