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

Commit 2f89ebd

Browse files
saeidexsaeidex
committed
add(nextjs): navber
1 parent 12125f6 commit 2f89ebd

File tree

8 files changed

+181
-58
lines changed

8 files changed

+181
-58
lines changed

‎apps/nextjs/public/ubus-dark.svg

Lines changed: 9 additions & 0 deletions
Loading

‎apps/nextjs/public/ubus.svg

Lines changed: 9 additions & 0 deletions
Loading

‎apps/nextjs/src/app/(landing)/layout.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from "react";
2+
3+
import { Navbar } from "../_components/navbar";
4+
5+
const LandingPageLayout = (props: { children: React.ReactNode }) => {
6+
return (
7+
<>
8+
<Navbar />
9+
<main className="container">{props.children}</main>
10+
</>
11+
);
12+
};
13+
14+
export default LandingPageLayout;

‎apps/nextjs/src/app/(landing)/page.tsx

Lines changed: 1 addition & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,3 @@
1-
import { Suspense } from "react";
2-
3-
import { api, HydrateClient } from "~/trpc/server";
4-
import { AuthShowcase } from "../_components/auth-showcase";
5-
import {
6-
CreatePostForm,
7-
PostCardSkeleton,
8-
PostList,
9-
} from "../_components/posts";
10-
11-
export const runtime = "edge";
12-
131
export default function HomePage() {
14-
// You can await this here if you don't want to show Suspense fallback below
15-
void api.post.all.prefetch();
16-
17-
return (
18-
<HydrateClient>
19-
<main className="container h-screen py-16">
20-
<div className="flex flex-col items-center justify-center gap-4">
21-
<h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
22-
Create <span className="text-primary">T3</span> Turbo
23-
</h1>
24-
<AuthShowcase />
25-
26-
<CreatePostForm />
27-
<div className="w-full max-w-2xl overflow-y-scroll">
28-
<Suspense
29-
fallback={
30-
<div className="flex w-full flex-col gap-4">
31-
<PostCardSkeleton />
32-
<PostCardSkeleton />
33-
<PostCardSkeleton />
34-
</div>
35-
}
36-
>
37-
<PostList />
38-
</Suspense>
39-
</div>
40-
</div>
41-
</main>
42-
</HydrateClient>
43-
);
2+
return <div>Hello, World!</div>;
443
}

‎apps/nextjs/src/app/_components/navbar.tsx

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
"use client";
2+
3+
import React from "react";
4+
import Image from "next/image";
5+
import Link from "next/link";
6+
import { usePathname } from "next/navigation";
7+
import { useTheme } from "next-themes";
8+
9+
import { cn } from "@ubus/ui";
10+
import { Button } from "@ubus/ui/button";
11+
import { MenuIcon } from "@ubus/ui/icons";
12+
13+
const links: ILink[] = [
14+
{
15+
label: "Home",
16+
href: "/",
17+
},
18+
{
19+
label: "Features",
20+
href: "#features",
21+
},
22+
{
23+
label: "Testimonials",
24+
href: "#testimonials",
25+
},
26+
{
27+
label: "Contact",
28+
href: "#contact",
29+
},
30+
];
31+
32+
export const Navbar = () => {
33+
const { theme } = useTheme();
34+
const logoSrc = theme === "light" ? "ubus-dark.svg" : "ubus.svg";
35+
36+
return (
37+
<nav className="border-outline">
38+
<div className="mx-auto flex h-24 flex-wrap items-center justify-between">
39+
<Link
40+
href="/"
41+
className="flex items-center space-x-3 rtl:space-x-reverse"
42+
>
43+
<Image
44+
src={logoSrc}
45+
width={32}
46+
height={24}
47+
className="h-8 w-6"
48+
alt="ubus logo"
49+
/>
50+
<span className="self-center whitespace-nowrap text-2xl font-semibold dark:text-white">
51+
UBus
52+
</span>
53+
</Link>
54+
<div className="flex space-x-3 md:order-2 md:space-x-3 rtl:space-x-reverse">
55+
<NavLink link={{ href: "sign in", label: "Sign in" }} />
56+
<Button variant={"primary"}>Get started</Button>
57+
<Button className="md:hidden">
58+
<span className="sr-only">Open main menu</span>
59+
<MenuIcon />
60+
</Button>
61+
</div>
62+
<div className="hidden w-full items-center justify-between md:order-1 md:flex md:w-auto">
63+
<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">
64+
{links.map((link) => (
65+
<li key={link.href}>
66+
<NavLink link={link} />
67+
</li>
68+
))}
69+
</ul>
70+
</div>
71+
</div>
72+
</nav>
73+
);
74+
};
75+
76+
export const NavLink = ({ link }: { link: ILink }) => {
77+
const pathname = usePathname();
78+
return (
79+
<>
80+
<Link href={link.href}>
81+
<Button
82+
className={cn(
83+
"px-0 text-on-surface hover:text-primary",
84+
pathname === link.href && "text-primary",
85+
)}
86+
variant={"link"}
87+
>
88+
{link.label}
89+
</Button>
90+
</Link>
91+
</>
92+
);
93+
};
94+
95+
interface ILink {
96+
href: string;
97+
label: string;
98+
}

‎apps/nextjs/src/app/layout.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,21 @@ import { env } from "~/env";
1515
export const metadata: Metadata = {
1616
metadataBase: new URL(
1717
env.VERCEL_ENV === "production"
18-
? "https://turbo.t3.gg"
18+
? "https://ubus.vercel.app"
1919
: "http://localhost:3000",
2020
),
21-
title: "Create T3 Turbo",
22-
description: "Simple monorepo with shared backend for web & mobile apps",
21+
title: "Ubus",
22+
description: "IUBAT Bus Tracking and Schedule",
2323
openGraph: {
24-
title: "Create T3 Turbo",
25-
description: "Simple monorepo with shared backend for web & mobile apps",
26-
url: "https://create-t3-turbo.vercel.app",
27-
siteName: "Create T3 Turbo",
24+
title: "Ubus",
25+
description: "IUBAT Bus Tracking and Schedule",
26+
url: "https://ubus.vercel.app",
27+
siteName: "Ubus",
2828
},
2929
twitter: {
3030
card: "summary_large_image",
31-
site: "@jullerino",
32-
creator: "@jullerino",
31+
site: "@saeidex",
32+
creator: "@saeidex",
3333
},
3434
};
3535

@@ -51,7 +51,11 @@ export default function RootLayout(props: { children: React.ReactNode }) {
5151
)}
5252
>
5353
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
54-
<TRPCReactProvider>{props.children}</TRPCReactProvider>
54+
<TRPCReactProvider>
55+
<div className="container h-dvh !max-w-screen-xl">
56+
{props.children}
57+
</div>
58+
</TRPCReactProvider>
5559
<div className="absolute bottom-4 right-4">
5660
<ThemeToggle />
5761
</div>

‎packages/ui/src/button.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { cva } from "class-variance-authority";
66
import { cn } from "@ubus/ui";
77

88
const buttonVariants = cva(
9-
"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",
9+
"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",
1010
{
1111
variants: {
1212
variant: {
@@ -15,22 +15,22 @@ const buttonVariants = cva(
1515
destructive:
1616
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
1717
outline:
18-
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18+
"hover:bg-accent hover:text-accent-foreground border border-input bg-background shadow-sm",
1919
secondary:
2020
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
21-
ghost: "hover:bg-accent hover:text-accent-foreground",
21+
ghost: "hover:bg-accent hover:text-accent-foreground !px-3",
2222
link: "text-primary underline-offset-4 hover:underline",
2323
},
2424
size: {
25-
sm: "h-8 rounded-md px-3 text-xs",
25+
sm: "h-8 px-3 text-xs",
2626
md: "h-9 px-4 py-2",
27-
lg: "h-10 rounded-md px-8",
27+
lg: "h-10 px-6",
2828
icon: "size-9",
2929
},
3030
},
3131
defaultVariants: {
3232
variant: "primary",
33-
size: "md",
33+
size: "lg",
3434
},
3535
},
3636
);

‎packages/ui/src/icons.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from "react";
2+
3+
import { cn } from ".";
4+
5+
const MenuIcon = ({
6+
className,
7+
...props
8+
}: {
9+
className?: React.HtmlHTMLAttributes<"svg">;
10+
props?: React.HtmlHTMLAttributes<"svg">;
11+
}) => (
12+
<svg
13+
className={cn("h-5 w-5", className)}
14+
aria-hidden="true"
15+
xmlns="http://www.w3.org/2000/svg"
16+
fill="none"
17+
viewBox="0 0 17 14"
18+
{...props}
19+
>
20+
<path
21+
stroke="currentColor"
22+
stroke-linecap="round"
23+
stroke-linejoin="round"
24+
stroke-width="2"
25+
d="M1 1h15M1 7h15M1 13h15"
26+
/>
27+
</svg>
28+
);
29+
30+
export { MenuIcon };

0 commit comments

Comments
 (0)