Skip to content

Commit 7e851ed

Browse files
PSkinnerTechPSkinnerTech
authored
Merge pull request #14 from vorcigernix/main
basic layout
2 parents 114616d + 3b32e14 commit 7e851ed

File tree

19 files changed

+2116
-177
lines changed

19 files changed

+2116
-177
lines changed

‎app/dashboard/layout.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,11 @@ export default function RootLayout({
1717
children: React.ReactNode;
1818
}) {
1919
return (
20-
<html lang="en">
21-
<body className={karla.className}>
2220
<div className="flex min-h-screen">
2321
<Sidebar />
2422

2523
<Navbar />
2624
<PageWrapper children={children}></PageWrapper>
2725
</div>
28-
</body>
29-
</html>
3026
);
3127
}

‎app/layout.tsx‎

Lines changed: 78 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,89 @@
1-
import type { Metadata } from "next";
1+
import { Metadata } from "next"
22
import { Inter } from "next/font/google";
33
import "./globals.css";
4+
import { ThemeProvider } from "@/components/theme";
5+
import { Navigation } from "@/components/navigation"
6+
import { cn } from "@/lib/utils";
7+
import { Footer } from "@/components/footer";
48

59
const inter = Inter({ subsets: ["latin"] });
610

711
export const metadata: Metadata = {
8-
title: "D_D RPC",
9-
description: "D_D RPC is a dashboard for managing your decentralized RPCs.",
10-
};
12+
title: {
13+
default: "D_D RPC",
14+
template: `%s - "D_D RPC"`,
15+
},
16+
//chore add real url
17+
metadataBase: new URL("https://ddrpc.developerdao.com"),
18+
description: "D_D RPC is a gatweay to Web3 world.",
19+
keywords: [
20+
"Developer DAO",
21+
"Web3",
22+
"RPC",
23+
"Gateway",
24+
"Decentralized",
25+
],
26+
authors: [
27+
{
28+
//chore add other authors
29+
name: "@PSkinnerTech, @vorcigernix",
30+
},
31+
],
32+
openGraph: {
33+
type: "website",
34+
locale: "en_US",
35+
url: "https://ddrpc.developerdao.com",
36+
title: "D_D RPC",
37+
description: "D_D RPC is a gatweay to Web3 world.",
38+
siteName: "D_D RPC",
39+
images: [
40+
{
41+
url: "https://ddrpc.developerdao.com/og-image.png",
42+
width: 1200,
43+
height: 630,
44+
alt: "D_D RPC",
45+
},
46+
],
47+
},
48+
twitter: {
49+
card: "summary_large_image",
50+
title: "D_D RPC",
51+
description: "D_D RPC is a gatweay to Web3 world.",
52+
images: "https://ddrpc.developerdao.com/og-image.png",
53+
},
54+
icons: {
55+
icon: "/favicon.ico",
56+
shortcut: "/favicon-16x16.png",
57+
apple: "/apple-touch-icon.png",
58+
},
59+
manifest: "site.webmanifest",
60+
}
61+
62+
interface RootLayoutProps {
63+
children: React.ReactNode
64+
}
1165

12-
export default function RootLayout({
13-
children,
14-
}: {
15-
children: React.ReactNode;
16-
}) {
66+
export default function RootLayout({ children }: RootLayoutProps) {
1767
return (
18-
<html lang="en">
19-
<body className={inter.className}>{children}</body>
68+
<html lang="en" suppressHydrationWarning>
69+
<head />
70+
71+
<body
72+
className={cn(
73+
"min-h-screen bg-background font-sans antialiased",
74+
inter.className
75+
)}
76+
> <ThemeProvider
77+
attribute="class"
78+
defaultTheme="system"
79+
enableSystem
80+
disableTransitionOnChange
81+
>
82+
<div>
83+
{children}
84+
</div>
85+
</ThemeProvider></body>
86+
2087
</html>
2188
);
2289
}

‎app/page.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1+
import { Footer } from "@/components/footer";
2+
import { Navigation } from "@/components/navigation";
13
import React from "react";
24

35
export default function HomePage() {
46
return (
5-
<>
6-
<div>D_D RPC Home Page</div>
7-
<div>
8-
<button className="rounded-md p-3 bg-gray-800 text-white m-3">
9-
<a href="/dashboard">Go to Dashboard</a>
10-
</button>
11-
</div>
12-
</>
7+
<div className="relative flex min-h-screen flex-col bg-background">
8+
<Navigation />
9+
<main className="flex-1">
10+
MAIN SITE CONTENT
11+
</main>
12+
<Footer />
13+
</div>
1314
);
1415
}

‎components/footer.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
export function Footer() {
2+
return (
3+
<footer className="py-6 md:px-8 md:py-0">
4+
<div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
5+
<p className="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
6+
Built by{" "}
7+
<a
8+
href="https://developerdao.com"
9+
target="_blank"
10+
rel="noreferrer"
11+
className="font-medium underline underline-offset-4"
12+
>
13+
Developer DAO
14+
</a>
15+
. The source code is available on{" "}
16+
<a
17+
href="https://github.com/Developer-DAO/ddrpc-frontend"
18+
target="_blank"
19+
rel="noreferrer"
20+
className="font-medium underline underline-offset-4"
21+
>
22+
GitHub
23+
</a>
24+
.
25+
</p>
26+
</div>
27+
</footer>
28+
)
29+
}

‎components/mode.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
5+
import { useTheme } from "next-themes"
6+
7+
import { Button } from "@/components/ui/button"
8+
import {
9+
DropdownMenu,
10+
DropdownMenuContent,
11+
DropdownMenuItem,
12+
DropdownMenuTrigger,
13+
} from "@/components/ui/dropdown-menu"
14+
15+
export function ModeToggle() {
16+
const { setTheme } = useTheme()
17+
18+
return (
19+
<DropdownMenu>
20+
<DropdownMenuTrigger asChild>
21+
<Button variant="ghost" className="w-9 px-0">
22+
<SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
23+
<MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
24+
<span className="sr-only">Toggle theme</span>
25+
</Button>
26+
</DropdownMenuTrigger>
27+
<DropdownMenuContent align="end">
28+
<DropdownMenuItem onClick={() => setTheme("light")}>
29+
Light
30+
</DropdownMenuItem>
31+
<DropdownMenuItem onClick={() => setTheme("dark")}>
32+
Dark
33+
</DropdownMenuItem>
34+
<DropdownMenuItem onClick={() => setTheme("system")}>
35+
System
36+
</DropdownMenuItem>
37+
</DropdownMenuContent>
38+
</DropdownMenu>
39+
)
40+
}

‎components/navigation.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import Link from "next/link"
2+
import { Button } from "@/components/ui/button"
3+
4+
export function Navigation() {
5+
return (
6+
<header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
7+
<div className="container flex h-14 max-w-screen-2xl items-center">
8+
Main Navigation
9+
<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
10+
<div className="w-full flex-1 md:w-auto md:flex-none">
11+
12+
</div>
13+
<nav className="flex items-center">
14+
<Button asChild>
15+
<Link href="/dashboard" className="mx-2"> Application</Link>
16+
</Button>
17+
</nav>
18+
</div>
19+
</div>
20+
</header>
21+
)
22+
}

‎components/theme.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { ThemeProvider as NextThemesProvider } from "next-themes"
5+
import { type ThemeProviderProps } from "next-themes/dist/types"
6+
7+
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8+
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
9+
}

‎components/ui/avatar.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as AvatarPrimitive from "@radix-ui/react-avatar"
5+
6+
import { cn } from "@/lib/utils"
7+
8+
const Avatar = React.forwardRef<
9+
React.ElementRef<typeof AvatarPrimitive.Root>,
10+
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11+
>(({ className, ...props }, ref) => (
12+
<AvatarPrimitive.Root
13+
ref={ref}
14+
className={cn(
15+
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16+
className
17+
)}
18+
{...props}
19+
/>
20+
))
21+
Avatar.displayName = AvatarPrimitive.Root.displayName
22+
23+
const AvatarImage = React.forwardRef<
24+
React.ElementRef<typeof AvatarPrimitive.Image>,
25+
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26+
>(({ className, ...props }, ref) => (
27+
<AvatarPrimitive.Image
28+
ref={ref}
29+
className={cn("aspect-square h-full w-full", className)}
30+
{...props}
31+
/>
32+
))
33+
AvatarImage.displayName = AvatarPrimitive.Image.displayName
34+
35+
const AvatarFallback = React.forwardRef<
36+
React.ElementRef<typeof AvatarPrimitive.Fallback>,
37+
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38+
>(({ className, ...props }, ref) => (
39+
<AvatarPrimitive.Fallback
40+
ref={ref}
41+
className={cn(
42+
"flex h-full w-full items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800",
43+
className
44+
)}
45+
{...props}
46+
/>
47+
))
48+
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49+
50+
export { Avatar, AvatarImage, AvatarFallback }

‎components/ui/badge.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import * as React from "react"
2+
import { cva, type VariantProps } from "class-variance-authority"
3+
4+
import { cn } from "@/lib/utils"
5+
6+
const badgeVariants = cva(
7+
"inline-flex items-center rounded-full border border-gray-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 dark:border-gray-800 dark:focus:ring-gray-300",
8+
{
9+
variants: {
10+
variant: {
11+
default:
12+
"border-transparent bg-gray-900 text-gray-50 hover:bg-gray-900/80 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/80",
13+
secondary:
14+
"border-transparent bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80",
15+
destructive:
16+
"border-transparent bg-red-500 text-gray-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/80",
17+
outline: "text-gray-950 dark:text-gray-50",
18+
},
19+
},
20+
defaultVariants: {
21+
variant: "default",
22+
},
23+
}
24+
)
25+
26+
export interface BadgeProps
27+
extends React.HTMLAttributes<HTMLDivElement>,
28+
VariantProps<typeof badgeVariants> {}
29+
30+
function Badge({ className, variant, ...props }: BadgeProps) {
31+
return (
32+
<div className={cn(badgeVariants({ variant }), className)} {...props} />
33+
)
34+
}
35+
36+
export { Badge, badgeVariants }

‎components/ui/button.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import * as React from "react"
2+
import { Slot } from "@radix-ui/react-slot"
3+
import { cva, type VariantProps } from "class-variance-authority"
4+
5+
import { cn } from "@/lib/utils"
6+
7+
const buttonVariants = cva(
8+
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-gray-950 dark:focus-visible:ring-gray-300",
9+
{
10+
variants: {
11+
variant: {
12+
default: "bg-gray-900 text-gray-50 hover:bg-gray-900/90 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90",
13+
destructive:
14+
"bg-red-500 text-gray-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90",
15+
outline:
16+
"border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50",
17+
secondary:
18+
"bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80",
19+
ghost: "hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50",
20+
link: "text-gray-900 underline-offset-4 hover:underline dark:text-gray-50",
21+
},
22+
size: {
23+
default: "h-10 px-4 py-2",
24+
sm: "h-9 rounded-md px-3",
25+
lg: "h-11 rounded-md px-8",
26+
icon: "h-10 w-10",
27+
},
28+
},
29+
defaultVariants: {
30+
variant: "default",
31+
size: "default",
32+
},
33+
}
34+
)
35+
36+
export interface ButtonProps
37+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38+
VariantProps<typeof buttonVariants> {
39+
asChild?: boolean
40+
}
41+
42+
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43+
({ className, variant, size, asChild = false, ...props }, ref) => {
44+
const Comp = asChild ? Slot : "button"
45+
return (
46+
<Comp
47+
className={cn(buttonVariants({ variant, size, className }))}
48+
ref={ref}
49+
{...props}
50+
/>
51+
)
52+
}
53+
)
54+
Button.displayName = "Button"
55+
56+
export { Button, buttonVariants }

0 commit comments

Comments
 (0)