Skip to content

Commit a6f0b8a

Browse files
author
Your
committed
Header responsive works
1 parent 8894b53 commit a6f0b8a

File tree

6 files changed

+101
-52
lines changed

6 files changed

+101
-52
lines changed

‎package-lock.json

Lines changed: 24 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@radix-ui/react-slot": "^1.0.1",
1213
"@types/node": "20.1.2",
1314
"@types/react-dom": "18.2.4",
1415
"autoprefixer": "10.4.14",

‎src/app/(home)/page.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default async function IndexPage() {
2+
return (
3+
<div>
4+
<p>hello</p>
5+
</div>
6+
)
7+
}

‎src/app/layout.tsx

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
import { Inter as FontSans} from 'next/font/google'
1+
import { Inter as FontSans } from "next/font/google"
22
import localFont from "next/font/local"
33

44
import "@/styles/globals.css"
55
import { siteConfig } from "@/config/site"
6-
import {cn} from "@/lib/utils"
6+
import { cn } from "@/lib/utils"
77

88
// Import optimized fonts (fontSans, fontHeading) -> create CSS vars
99
const fontSans = FontSans({
10-
subsets: ['latin'],
10+
subsets: ["latin"],
1111
variable: "--font-sans",
12-
display: "swap"
12+
display: "swap",
1313
})
1414

1515
const fontHeading = localFont({
1616
src: "../assets/fonts/CalSans-SemiBold.woff2",
1717
variable: "--font-heading",
18-
display: "swap"
18+
display: "swap",
1919
})
2020

2121
interface RootLayoutProps {
@@ -36,7 +36,7 @@ export const metadata = {
3636
"PaaS",
3737
"BMS",
3838
"integration",
39-
"building"
39+
"building",
4040
],
4141
authors: [
4242
{
@@ -45,12 +45,12 @@ export const metadata = {
4545
},
4646
{
4747
name: "Eric",
48-
url: "https://lsdflksjdfdlf.com",
48+
url: "https://lsdflksjdfdlf.com",
4949
},
5050
{
5151
name: "Adi",
5252
url: "https://lsdsdfflksjdlf.com",
53-
}
53+
},
5454
],
5555
creator: "jan",
5656
/*
@@ -87,16 +87,15 @@ export default function RootLayout({ children }: RootLayoutProps) {
8787
return (
8888
<html lang="en" suppressHydrationWarning>
8989
<head />
90-
<body className={cn(
91-
"min-h-screen bg-background font-sans antialiased",
92-
fontSans.variable,
93-
fontHeading.variable
94-
)}>
95-
<nav>
96-
<p>Navbar</p>
97-
</nav>
90+
<body
91+
className={cn(
92+
"min-h-screen bg-background font-sans antialiased",
93+
fontSans.variable,
94+
fontHeading.variable
95+
)}
96+
>
9897
{children}
9998
</body>
10099
</html>
101100
)
102-
}
101+
}

‎src/app/page.tsx

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/components/ui/Button.tsx

Lines changed: 53 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,55 @@
1-
import { cva, VariantProps } from "cva"
1+
import * as React from "react"
2+
import { Slot } from "@radix-ui/react-slot"
3+
import { VariantProps, cva } from "class-variance-authority"
24

3-
const button = cva(
4-
"rounded-md relative", {
5-
variants: {
6-
variant: { //can also change intent here to variant
7-
default: "",
8-
outline: "",
9-
danger: "",
10-
monochrome: "",
11-
},
12-
outline: {
13-
true: "bg-transparent border",
14-
},
15-
fullWidth: {
16-
true: "w-full",
17-
},
18-
},
19-
20-
defaultVariants: {
21-
variant: "default",
22-
fullWidth: false
23-
},
24-
compoundVariants: [{
25-
variant: "danger",
26-
outline: true,
27-
class: "",
28-
}]
5+
import { cn } from "@/lib/utils"
6+
7+
const buttonVariants = cva(
8+
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
9+
{
10+
variants: {
11+
variant: {
12+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
13+
destructive:
14+
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
15+
outline:
16+
"border border-input hover:bg-accent hover:text-accent-foreground",
17+
secondary:
18+
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
19+
ghost: "hover:bg-accent hover:text-accent-foreground",
20+
link: "underline-offset-4 hover:underline text-primary",
21+
},
22+
size: {
23+
default: "h-10 py-2 px-4",
24+
sm: "h-9 px-3 rounded-md",
25+
lg: "h-11 px-8 rounded-md",
26+
},
27+
},
28+
defaultVariants: {
29+
variant: "default",
30+
size: "default",
2931
},
30-
);
32+
}
33+
)
34+
35+
export interface ButtonProps
36+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
37+
VariantProps<typeof buttonVariants> {
38+
asChild?: boolean
39+
}
40+
41+
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
42+
({ className, variant, size, asChild = false, ...props }, ref) => {
43+
const Comp = asChild ? Slot : "button"
44+
return (
45+
<Comp
46+
className={cn(buttonVariants({ variant, size, className }))}
47+
ref={ref}
48+
{...props}
49+
/>
50+
)
51+
}
52+
)
53+
Button.displayName = "Button"
54+
55+
export { Button, buttonVariants }

0 commit comments

Comments
 (0)