Skip to content
This repository has been archived by the owner on Dec 10, 2024. It is now read-only.

Commit

Permalink
add(nextjs): navber
Browse files Browse the repository at this point in the history
  • Loading branch information
saeidex committed Sep 19, 2024
1 parent 12125f6 commit 2f89ebd
Show file tree
Hide file tree
Showing 8 changed files with 181 additions and 58 deletions.
9 changes: 9 additions & 0 deletions apps/nextjs/public/ubus-dark.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions apps/nextjs/public/ubus.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions apps/nextjs/src/app/(landing)/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from "react";

import { Navbar } from "../_components/navbar";

const LandingPageLayout = (props: { children: React.ReactNode }) => {
return (
<>
<Navbar />
<main className="container">{props.children}</main>
</>
);
};

export default LandingPageLayout;
43 changes: 1 addition & 42 deletions apps/nextjs/src/app/(landing)/page.tsx
Original file line number Diff line number Diff line change
@@ -1,44 +1,3 @@
import { Suspense } from "react";

import { api, HydrateClient } from "~/trpc/server";
import { AuthShowcase } from "../_components/auth-showcase";
import {
CreatePostForm,
PostCardSkeleton,
PostList,
} from "../_components/posts";

export const runtime = "edge";

export default function HomePage() {
// You can await this here if you don't want to show Suspense fallback below
void api.post.all.prefetch();

return (
<HydrateClient>
<main className="container h-screen py-16">
<div className="flex flex-col items-center justify-center gap-4">
<h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
Create <span className="text-primary">T3</span> Turbo
</h1>
<AuthShowcase />

<CreatePostForm />
<div className="w-full max-w-2xl overflow-y-scroll">
<Suspense
fallback={
<div className="flex w-full flex-col gap-4">
<PostCardSkeleton />
<PostCardSkeleton />
<PostCardSkeleton />
</div>
}
>
<PostList />
</Suspense>
</div>
</div>
</main>
</HydrateClient>
);
return <div>Hello, World!</div>;
}
98 changes: 98 additions & 0 deletions apps/nextjs/src/app/_components/navbar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
"use client";

import React from "react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useTheme } from "next-themes";

import { cn } from "@ubus/ui";
import { Button } from "@ubus/ui/button";
import { MenuIcon } from "@ubus/ui/icons";

const links: ILink[] = [
{
label: "Home",
href: "/",
},
{
label: "Features",
href: "#features",
},
{
label: "Testimonials",
href: "#testimonials",
},
{
label: "Contact",
href: "#contact",
},
];

export const Navbar = () => {
const { theme } = useTheme();
const logoSrc = theme === "light" ? "ubus-dark.svg" : "ubus.svg";

return (
<nav className="border-outline">
<div className="mx-auto flex h-24 flex-wrap items-center justify-between">
<Link
href="/"
className="flex items-center space-x-3 rtl:space-x-reverse"
>
<Image
src={logoSrc}
width={32}
height={24}
className="h-8 w-6"
alt="ubus logo"
/>
<span className="self-center whitespace-nowrap text-2xl font-semibold dark:text-white">
UBus
</span>
</Link>
<div className="flex space-x-3 md:order-2 md:space-x-3 rtl:space-x-reverse">
<NavLink link={{ href: "sign in", label: "Sign in" }} />
<Button variant={"primary"}>Get started</Button>
<Button className="md:hidden">
<span className="sr-only">Open main menu</span>
<MenuIcon />
</Button>
</div>
<div className="hidden w-full items-center justify-between md:order-1 md:flex md:w-auto">
<ul className="mt-4 flex flex-col rounded-lg p-4 font-medium md:mt-0 md:flex-row md:space-x-8 md:p-0 rtl:space-x-reverse">
{links.map((link) => (
<li key={link.href}>
<NavLink link={link} />
</li>
))}
</ul>
</div>
</div>
</nav>
);
};

export const NavLink = ({ link }: { link: ILink }) => {
const pathname = usePathname();
return (
<>
<Link href={link.href}>
<Button
className={cn(
"px-0 text-on-surface hover:text-primary",
pathname === link.href && "text-primary",
)}
variant={"link"}
>
{link.label}
</Button>
</Link>
</>
);
};

interface ILink {
href: string;
label: string;
}
24 changes: 14 additions & 10 deletions apps/nextjs/src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,21 @@ import { env } from "~/env";
export const metadata: Metadata = {
metadataBase: new URL(
env.VERCEL_ENV === "production"
? "https://turbo.t3.gg"
? "https://ubus.vercel.app"
: "http://localhost:3000",
),
title: "Create T3 Turbo",
description: "Simple monorepo with shared backend for web & mobile apps",
title: "Ubus",
description: "IUBAT Bus Tracking and Schedule",
openGraph: {
title: "Create T3 Turbo",
description: "Simple monorepo with shared backend for web & mobile apps",
url: "https://create-t3-turbo.vercel.app",
siteName: "Create T3 Turbo",
title: "Ubus",
description: "IUBAT Bus Tracking and Schedule",
url: "https://ubus.vercel.app",
siteName: "Ubus",
},
twitter: {
card: "summary_large_image",
site: "@jullerino",
creator: "@jullerino",
site: "@saeidex",
creator: "@saeidex",
},
};

Expand All @@ -51,7 +51,11 @@ export default function RootLayout(props: { children: React.ReactNode }) {
)}
>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<TRPCReactProvider>{props.children}</TRPCReactProvider>
<TRPCReactProvider>
<div className="container h-dvh !max-w-screen-xl">
{props.children}
</div>
</TRPCReactProvider>
<div className="absolute bottom-4 right-4">
<ThemeToggle />
</div>
Expand Down
12 changes: 6 additions & 6 deletions packages/ui/src/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { cva } from "class-variance-authority";
import { cn } from "@ubus/ui";

const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
"inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
Expand All @@ -15,22 +15,22 @@ const buttonVariants = cva(
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
"hover:bg-accent hover:text-accent-foreground border border-input bg-background shadow-sm",
secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
ghost: "hover:bg-accent hover:text-accent-foreground !px-3",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
sm: "h-8 rounded-md px-3 text-xs",
sm: "h-8 px-3 text-xs",
md: "h-9 px-4 py-2",
lg: "h-10 rounded-md px-8",
lg: "h-10 px-6",
icon: "size-9",
},
},
defaultVariants: {
variant: "primary",
size: "md",
size: "lg",
},
},
);
Expand Down
30 changes: 30 additions & 0 deletions packages/ui/src/icons.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from "react";

import { cn } from ".";

const MenuIcon = ({
className,
...props
}: {
className?: React.HtmlHTMLAttributes<"svg">;
props?: React.HtmlHTMLAttributes<"svg">;
}) => (
<svg
className={cn("h-5 w-5", className)}
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 17 14"
{...props}
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 1h15M1 7h15M1 13h15"
/>
</svg>
);

export { MenuIcon };

0 comments on commit 2f89ebd

Please sign in to comment.