@@ -9,142 +9,142 @@ import Image from "next/image";
9
9
import Link from "next/link" ;
10
10
11
11
export const metadata : Metadata = {
12
- title : "Noty" ,
12
+ title : "Noty" ,
13
13
} ;
14
14
15
15
const sponsors = [
16
- {
17
- url : "https://www.correctcasinos.com/free-slots" ,
18
- imageSrc : "correct-casino-logo.svg" ,
19
- alt : "Best Free Slots" ,
20
- } ,
21
- {
22
- url : "https://www.gambledex.com/" ,
23
- imageSrc : "gambledex.png" ,
24
- alt : "Gambledex" ,
25
- } ,
26
- {
27
- url : "https://www.boostmmr.com" ,
28
- imageSrc : "boostmmr.jpg" ,
29
- alt : "" ,
30
- } ,
31
- // {
32
- // url: "https://goread.io/buy-instagram-followers",
33
- // imageSrc: "Favicongoread.png",
34
- // alt: "Buy Instagram Followers",
35
- // },
36
- {
37
- url : "https://nettikasinot.org" ,
38
- imageSrc : "nettikasino.png" ,
39
- alt : "Nettikasinot" ,
40
- } ,
16
+ {
17
+ url : "https://www.correctcasinos.com/free-slots" ,
18
+ imageSrc : "correct-casino-logo.svg" ,
19
+ alt : "Best Free Slots" ,
20
+ } ,
21
+ {
22
+ url : "https://www.gambledex.com/" ,
23
+ imageSrc : "gambledex.png" ,
24
+ alt : "Gambledex" ,
25
+ } ,
26
+ {
27
+ url : "https://www.boostmmr.com" ,
28
+ imageSrc : "boostmmr.jpg" ,
29
+ alt : "" ,
30
+ } ,
31
+ // {
32
+ // url: "https://goread.io/buy-instagram-followers",
33
+ // imageSrc: "Favicongoread.png",
34
+ // alt: "Buy Instagram Followers",
35
+ // },
36
+ {
37
+ url : "https://nettikasinot.org" ,
38
+ imageSrc : "nettikasino.png" ,
39
+ alt : "Nettikasinot" ,
40
+ } ,
41
41
42
- {
43
- url : "https://casinoshunter.com/online-casinos/real-money" ,
44
- imageSrc : "casinoshunter-dark.png" ,
45
- alt : "Casinos Hunter" ,
46
- } ,
47
- // {
48
- // url: "https://reddogcasino.com/en/games/blackjack",
49
- // imageSrc: "Red-Dog-Casino-Logo.png",
50
- // alt: "RedDogCasino",
51
- // },
52
- {
53
- url : "https://slotsempire.com" ,
54
- imageSrc : "slots-empire.svg" ,
55
- alt : "Online Slots Empire Casino" ,
56
- } ,
57
- {
58
- url : "https://idealecasinos.nl" ,
59
- imageSrc : "ideal_casinos_logo_140_140.svg" ,
60
- alt : "online casinos met ideal" ,
61
- } ,
42
+ {
43
+ url : "https://casinoshunter.com/online-casinos/real-money" ,
44
+ imageSrc : "casinoshunter-dark.png" ,
45
+ alt : "Casinos Hunter" ,
46
+ } ,
47
+ // {
48
+ // url: "https://reddogcasino.com/en/games/blackjack",
49
+ // imageSrc: "Red-Dog-Casino-Logo.png",
50
+ // alt: "RedDogCasino",
51
+ // },
52
+ {
53
+ url : "https://slotsempire.com" ,
54
+ imageSrc : "slots-empire.svg" ,
55
+ alt : "Online Slots Empire Casino" ,
56
+ } ,
57
+ {
58
+ url : "https://idealecasinos.nl" ,
59
+ imageSrc : "ideal_casinos_logo_140_140.svg" ,
60
+ alt : "online casinos met ideal" ,
61
+ } ,
62
62
] ;
63
63
64
64
export default function RootLayout ( {
65
- children,
65
+ children,
66
66
} : Readonly < {
67
- children : React . ReactNode ;
67
+ children : React . ReactNode ;
68
68
} > ) {
69
- return (
70
- < div className = "flex min-h-full flex-col" >
71
- < header className = "shrink-0 border-b bg-white dark:bg-zinc-900" >
72
- < div className = "mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8" >
73
- < div className = "flex items-center" >
74
- < Avatar />
75
- < IconSlash />
76
- < span className = "font-semibold font-mono" > noty</ span >
77
- </ div >
78
- < div className = "flex items-center gap-x-8" >
79
- < ThemeToggle hideIndicator />
80
- </ div >
81
- </ div >
82
- </ header >
69
+ return (
70
+ < div className = "flex min-h-full flex-col" >
71
+ < header className = "shrink-0 border-b bg-white dark:bg-zinc-900" >
72
+ < div className = "mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8" >
73
+ < div className = "flex items-center" >
74
+ < Avatar />
75
+ < IconSlash />
76
+ < span className = "font-semibold font-mono" > noty</ span >
77
+ </ div >
78
+ < div className = "flex items-center gap-x-8" >
79
+ < ThemeToggle hideIndicator />
80
+ </ div >
81
+ </ div >
82
+ </ header >
83
83
84
- < div className = "mx-auto flex w-full max-w-7xl items-start gap-x-8 px-4 py-10 sm:px-6 lg:px-8" >
85
- < aside className = "sticky top-8 hidden w-44 shrink-0 lg:block" >
86
- < nav >
87
- < div className = "flex flex-col gap-2 *:font-medium *:text-muted-foreground text-sm" >
88
- < Link href = "/noty" > About</ Link >
89
- < Link href = "/noty/installation" > Installation</ Link >
90
- < Link href = "/noty/options" > Options</ Link >
91
- < Link href = "/noty/types-and-layouts" > Types & Layouts </ Link >
92
- < Link href = "/noty/themes" > Themes</ Link >
93
- < Link href = "/noty/animations" > Animations</ Link >
94
- < Link href = "/noty/web-push-notifications" >
95
- Web Push Notifications
96
- </ Link >
97
- < Link href = "/noty/confirm-dialogs" > Confirm Dialogs</ Link >
98
- < Link href = "/noty/api-and-callbacks" > API & Callbacks </ Link >
99
- </ div >
100
- </ nav >
101
- </ aside >
84
+ < div className = "mx-auto flex flex-col lg:flex-row w-full max-w-7xl items-start gap-x-8 px-4 py-10 sm:px-6 lg:px-8" >
85
+ < aside className = "lg: sticky top-8 mb-8 lg:mb-0 w-full lg: w-44 shrink-0 lg:block" >
86
+ < nav >
87
+ < div className = "flex flex-row lg:flex- col divide-x lg:divide-x-0 lg:*:pr-0 *:pr-2 flex-wrap gap-2 *:font-medium *:text-muted-foreground text-sm" >
88
+ < Link href = "/noty" > About</ Link >
89
+ < Link href = "/noty/installation" > Installation</ Link >
90
+ < Link href = "/noty/options" > Options</ Link >
91
+ < Link href = "/noty/types-and-layouts" > Types & Layouts </ Link >
92
+ < Link href = "/noty/themes" > Themes</ Link >
93
+ < Link href = "/noty/animations" > Animations</ Link >
94
+ < Link href = "/noty/web-push-notifications" >
95
+ Web Push Notifications
96
+ </ Link >
97
+ < Link href = "/noty/confirm-dialogs" > Confirm Dialogs</ Link >
98
+ < Link href = "/noty/api-and-callbacks" > API & Callbacks </ Link >
99
+ </ div >
100
+ </ nav >
101
+ </ aside >
102
102
103
- < main className = "flex-1 pro" > { children } </ main >
103
+ < main className = "flex-1 grow max-w-full pro" > { children } </ main >
104
104
105
- < aside className = "sticky top-8 hidden w-60 shrink-0 xl:block" >
106
- < h2 className = "text-xl font-semibold mb-2" > Sponsorship</ h2 >
107
- < p className = "text-balance" >
108
- If you enjoy my work and want to support me creating stuff, I'm
109
- on Patreon!
110
- < br />
111
- < Link
112
- href = "https://patreon.com/needim"
113
- className = { cn ( buttonVariants ( ) , "inline-block mt-2" ) }
114
- >
115
- < IconBrandPatreonFilled className = "inline-block text-sm mr-2 -ml-1" /> { " " }
116
- Become a Patron
117
- </ Link >
118
- </ p >
105
+ < aside className = "sticky top-8 hidden w-60 shrink-0 xl:block" >
106
+ < h2 className = "text-xl font-semibold mb-2" > Sponsorship</ h2 >
107
+ < p className = "text-balance" >
108
+ If you enjoy my work and want to support me creating stuff, I'm
109
+ on Patreon!
110
+ < br />
111
+ < Link
112
+ href = "https://patreon.com/needim"
113
+ className = { cn ( buttonVariants ( ) , "inline-block mt-2" ) }
114
+ >
115
+ < IconBrandPatreonFilled className = "inline-block text-sm mr-2 -ml-1" /> { " " }
116
+ Become a Patron
117
+ </ Link >
118
+ </ p >
119
119
120
- < CarbonAds className = "mt-4" />
120
+ < CarbonAds className = "mt-4" />
121
121
122
- < div >
123
- < h2 className = "text-xl font-semibold mt-2 mb-2" > Sponsors</ h2 >
122
+ < div >
123
+ < h2 className = "text-xl font-semibold mt-2 mb-2" > Sponsors</ h2 >
124
124
125
- < ul className = "divide-y mt-4 divide-border border bg-zinc-100/75 dark:bg-zinc-900/75" >
126
- { sponsors . map ( ( product , index ) => (
127
- < li
128
- key = { index }
129
- className = "flex items-center justify-center w-full py-2 pl-4 pr-5 text-sm leading-6 group relative "
130
- >
131
- < div className = "filter grayscale hover:grayscale-0 transition-all dark:invert dark:hover:invert-0 duration-300 ease-in-out" >
132
- < Link href = { product . url } target = "_blank" >
133
- < Image
134
- src = { `/sponsors/${ product . imageSrc } ` }
135
- alt = { product . alt }
136
- width = { 140 }
137
- height = { 140 }
138
- className = "max-w-64 min-h-6 transition-all duration-300 ease-in-out"
139
- />
140
- </ Link >
141
- </ div >
142
- </ li >
143
- ) ) }
144
- </ ul >
145
- </ div >
146
- </ aside >
147
- </ div >
148
- </ div >
149
- ) ;
125
+ < ul className = "divide-y mt-4 divide-border border bg-zinc-100/75 dark:bg-zinc-900/75" >
126
+ { sponsors . map ( ( product , index ) => (
127
+ < li
128
+ key = { index }
129
+ className = "flex items-center justify-center w-full py-2 pl-4 pr-5 text-sm leading-6 group relative "
130
+ >
131
+ < div className = "filter grayscale hover:grayscale-0 transition-all dark:invert dark:hover:invert-0 duration-300 ease-in-out" >
132
+ < Link href = { product . url } target = "_blank" >
133
+ < Image
134
+ src = { `/sponsors/${ product . imageSrc } ` }
135
+ alt = { product . alt }
136
+ width = { 140 }
137
+ height = { 140 }
138
+ className = "max-w-64 min-h-6 transition-all duration-300 ease-in-out"
139
+ />
140
+ </ Link >
141
+ </ div >
142
+ </ li >
143
+ ) ) }
144
+ </ ul >
145
+ </ div >
146
+ </ aside >
147
+ </ div >
148
+ </ div >
149
+ ) ;
150
150
}
0 commit comments