Skip to content

Commit d01961a

Browse files
author
tkokhing
committed
major upgrade themeswitch in navbar, font change good
1 parent 30f7568 commit d01961a

7 files changed

Lines changed: 187 additions & 68 deletions

File tree

‎src/app/_components/main_frame/font-size-button.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
"use client";
2+
3+
import { useFontSize } from "@/app/_components/main_frame/font-size-ctrl";
4+
import { Fragment } from "react";
5+
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
6+
import { ChevronDownIcon } from "@heroicons/react/20/solid";
7+
8+
const fontSizes = ['sm', 'base', 'lg', 'xl', '2xl'];
9+
const sizeLabels: Record<string, string> = {
10+
sm: 'Small',
11+
base: 'Default',
12+
lg: 'Large',
13+
xl: 'XL',
14+
'2xl': '2XL',
15+
};
16+
17+
function classNames(...classes: string[]) {
18+
return classes.filter(Boolean).join(' ');
19+
}
20+
21+
export default function FontSizeDropdown() {
22+
const { fontSize, setFontSize } = useFontSize();
23+
24+
return (
25+
<Menu as="div" className="relative inline-block text-left z-50">
26+
<div>
27+
<MenuButton
28+
className="p-2 h-15 w-15 relative flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
29+
aria-label="Open font size menu"
30+
>
31+
<span className="absolute -inset-1.5" />
32+
<span className="text-xs font-normal mr-3">A</span>
33+
<span className="text-2xl font-bold -ml-1">| A</span>
34+
<ChevronDownIcon className="ml-1 h-5 w-5 text-gray-500" aria-hidden="true" />
35+
</MenuButton>
36+
</div>
37+
38+
<Transition
39+
as={Fragment}
40+
enter="transition ease-out duration-100"
41+
enterFrom="transform opacity-0 scale-95"
42+
enterTo="transform opacity-100 scale-100"
43+
leave="transition ease-in duration-75"
44+
leaveFrom="transform opacity-100 scale-100"
45+
leaveTo="transform opacity-0 scale-95"
46+
>
47+
<MenuItems className="absolute right-0 mt-2 w-36 origin-top-right rounded-md bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
48+
<div className="py-1">
49+
{fontSizes.map((size) => (
50+
<MenuItem key={size}>
51+
{({ focus }) => (
52+
<button
53+
onClick={() => setFontSize(size as typeof fontSize)}
54+
className={classNames(
55+
focus ? 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300',
56+
'flex justify-between w-full px-4 py-2 text-sm'
57+
)}
58+
>
59+
{sizeLabels[size]}
60+
{fontSize === size && <span>&#10003;</span>}
61+
</button>
62+
)}
63+
</MenuItem>
64+
))}
65+
</div>
66+
</MenuItems>
67+
</Transition>
68+
</Menu>
69+
);
70+
}

‎src/app/_components/main_frame/font-size-ctrl.tsx‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,59 @@
1+
//new
12
"use client";
23

34
import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
45

5-
const FontSizeContext = createContext({
6+
const sizes = ['sm', 'base', 'lg', 'xl', '2xl'];
7+
8+
type FontSizeType = typeof sizes[number];
9+
10+
interface FontSizeContextType {
11+
fontSize: FontSizeType;
12+
setFontSize: (size: FontSizeType) => void;
13+
increaseFont: () => void;
14+
decreaseFont: () => void;
15+
}
16+
17+
const FontSizeContext = createContext<FontSizeContextType>({
618
fontSize: 'base',
19+
setFontSize: () => {},
720
increaseFont: () => {},
821
decreaseFont: () => {},
922
});
1023

1124
export const FontSizeProvider = ({ children }: { children: ReactNode }) => {
12-
const [fontSize, setFontSize] = useState('base');
13-
const sizes = ['sm', 'base', 'lg', 'xl', '2xl'];
14-
const currentIndex = sizes.indexOf(fontSize);
25+
const [fontSize, setFontSize] = useState<FontSizeType>('base');
1526

1627
const increaseFont = () => {
17-
if (currentIndex < sizes.length - 1) {
18-
setFontSize(sizes[currentIndex + 1]);
28+
const index = sizes.indexOf(fontSize);
29+
if (index < sizes.length - 1) {
30+
setFontSize(sizes[index + 1]);
1931
}
2032
};
2133

2234
const decreaseFont = () => {
23-
if (currentIndex > 0) {
24-
setFontSize(sizes[currentIndex - 1]);
35+
const index = sizes.indexOf(fontSize);
36+
if (index > 0) {
37+
setFontSize(sizes[index - 1]);
2538
}
2639
};
2740

28-
// Keyboard shortcuts: Alt + = or Alt + -
2941
useEffect(() => {
3042
const handleKeyDown = (e: KeyboardEvent) => {
3143
if (e.altKey && e.key === '=') {
3244
e.preventDefault();
3345
increaseFont();
34-
}
35-
if (e.altKey && e.key === '-') {
46+
} else if (e.altKey && e.key === '-') {
3647
e.preventDefault();
3748
decreaseFont();
3849
}
3950
};
40-
4151
window.addEventListener('keydown', handleKeyDown);
4252
return () => window.removeEventListener('keydown', handleKeyDown);
43-
}, [currentIndex]);
53+
}, [fontSize]);
4454

4555
return (
46-
<FontSizeContext.Provider value={{ fontSize, increaseFont, decreaseFont }}>
56+
<FontSizeContext.Provider value={{ fontSize, setFontSize, increaseFont, decreaseFont }}>
4757
{children}
4858
</FontSizeContext.Provider>
4959
);

‎src/app/_components/main_frame/navi-bar.tsx‎

Lines changed: 73 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,26 @@
22

33
import { useEffect } from "react";
44
import { usePathname } from "next/navigation";
5-
import { useNavigation } from "@/app/_components/main_frame/navigation-context";
6-
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
7-
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
8-
import { ProfileLogoSVG } from "@/app/_components/main_frame/icons_svg";
5+
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
6+
import { Bars3Icon, BellIcon, XMarkIcon } from "@heroicons/react/24/outline";
97
import { HomeWithTextIcon, BlogWithTextIcon, TopicWithTextIcon, ResearchWithTextIcon } from "@/app/_components/main_frame/icons_svg";
8+
import { ProfileLogoSVG } from "@/app/_components/main_frame/icons_svg";
9+
import { useNavigation } from "@/app/_components/main_frame/navigation-context";
10+
import { TKOKHING_LOGO_SVG_URL } from "@/lib/constants";
11+
import { ThemeSwitcher } from "@/app/_components/main_frame/theme-switcher";
12+
import FontSizeDropdown from "@/app/_components/main_frame/font-size-button";
13+
14+
const user = {
15+
name: 'tkokhing',
16+
telegram: '@tkokhing',
17+
imageUrl: TKOKHING_LOGO_SVG_URL,
18+
};
19+
20+
const userFontPreference = [
21+
{ name: 'Your Profile', href: '#' },
22+
{ name: 'Settings', href: '#' },
23+
{ name: 'Sign out', href: '#' },
24+
];
1025

1126
const navigation = [
1227
{ name: 'Home', href: '/', icon: HomeWithTextIcon },
@@ -52,42 +67,51 @@ export default function Navigationbar() {
5267
}, [pathname, setSelected]);
5368

5469
return (
55-
<section className="mt-1 mb-16 md:mb-12 min-h-full">
56-
<Disclosure as="nav">
57-
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
58-
<div className="flex h-30 items-center">
59-
<div className="shrink-0 flex size-48">
60-
<ProfileLogoSVG />
70+
<div className="min-h-full">
71+
<Disclosure as="nav" className="mt-3 mb-16 md:mb-12">
72+
<div className="container mx-auto px-5 sm:px-6 lg:px-8 ">
73+
<div className="flex h-16 items-center justify-between">
74+
<div className="flex items-center">
75+
<div className="shrink-0 flex size-48">
76+
<ProfileLogoSVG />
77+
</div>
78+
<div className="hidden md:block">
79+
<div className="ml-10 flex items-baseline space-x-4">
80+
{navigation.map((item) => (
81+
<a
82+
key={item.name}
83+
href={item.href}
84+
aria-label="NavigationBar"
85+
aria-current={selected === item.name ? 'page' : undefined}
86+
className={classNames(
87+
selected === item.name ? 'bg-gray-700 dark:bg-gray-600' : 'text-sky-800 hover:bg-gray-500',
88+
'rounded-md px-3 py-2'
89+
)}
90+
onClick={() => setSelected(item.name)}
91+
>
92+
<item.icon aria-hidden="true" />
93+
</a>
94+
))}
95+
</div>
96+
</div>
6197
</div>
6298
<div className="hidden md:block">
63-
<div className="ml-10 flex items-baseline space-x-4">
64-
{navigation.map((item) => (
65-
<a
66-
key={item.name}
67-
href={item.href}
68-
aria-label="NavigationBar"
69-
aria-current={selected === item.name ? 'page' : undefined}
70-
className={classNames(
71-
selected === item.name ? 'bg-gray-700 dark:bg-gray-600' : 'text-sky-800 hover:bg-gray-500',
72-
'rounded-md px-3 py-2'
73-
)}
74-
onClick={() => setSelected(item.name)}
75-
>
76-
<item.icon aria-hidden="true" />
77-
</a>
78-
))}
99+
<div className="space-x-8 flex items-center px-8 md:ml-6">
100+
<FontSizeDropdown />
101+
<div className="">
102+
<ThemeSwitcher />
103+
</div>
79104
</div>
80105
</div>
81-
</div>
82-
83-
<div className="-mr-2 flex md:hidden">
84-
{/* Mobile menu button */}
85-
<DisclosureButton className="group relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
86-
<span className="absolute -inset-0.5" />
87-
<span className="sr-only">Open main menu</span>
88-
<Bars3Icon aria-hidden="true" className="block size-6 group-data-[open]:hidden" />
89-
<XMarkIcon aria-hidden="true" className="hidden size-6 group-data-[open]:block" />
90-
</DisclosureButton>
106+
<div className="-mr-2 flex md:hidden">
107+
{/* Mobile menu button */}
108+
<DisclosureButton className="group relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
109+
<span className="absolute -inset-0.5" />
110+
<span className="sr-only">Open main menu</span>
111+
<Bars3Icon aria-hidden="true" className="block size-6 group-data-[open]:hidden" />
112+
<XMarkIcon aria-hidden="true" className="hidden size-6 group-data-[open]:block" />
113+
</DisclosureButton>
114+
</div>
91115
</div>
92116
</div>
93117
<DisclosurePanel className="md:hidden">
@@ -107,8 +131,20 @@ export default function Navigationbar() {
107131
</DisclosureButton>
108132
))}
109133
</div>
134+
<div className="border-t border-gray-700 pb-3 pt-4">
135+
136+
<div className="flex justify-evenly">
137+
138+
<FontSizeDropdown />
139+
140+
<div className="px-5">
141+
<ThemeSwitcher />
142+
</div>
143+
</div>
144+
145+
</div>
110146
</DisclosurePanel>
111147
</Disclosure>
112-
</section>
148+
</div>
113149
);
114150
};

‎src/app/_components/main_frame/switch.module.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
.switch {
22
all: unset;
3-
position: absolute;
4-
right: 20px;
5-
top: 50px;
3+
64
display: inline-block;
75
color: currentColor;
86
border-radius: 50%;

‎src/app/_components/post-body-client.tsx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,17 @@ export default function PostBodyClient({ children }: { children: React.ReactNode
66
const { fontSize } = useFontSize();
77

88
return (
9-
<div className="prose prose-lg md:prose-lg lg:prose-lg mx-auto prose-headings:text-zinc-800 dark:prose-headings:text-slate-400">
10-
<div className="
11-
prose-a:text-blue-600 dark:prose-a:text-blue-300
12-
prose-p:text-indigo-950 dark:prose-p:text-slate-50
13-
prose-strong:text-zinc-500 dark:prose-strong:text-tkokhing-dark
14-
prose-em:text-zinc-500 dark:prose-em:text-violet-100
15-
prose-ul:text-gray-600 dark:prose-ul:text-slate-300
16-
prose-table:text-indigo-950 dark:prose-table:text-slate-50
17-
">
18-
<div className={`prose prose-${fontSize}`}>
19-
{children}
20-
</div>
21-
</div>
9+
<div className={
10+
`mx-auto prose prose-${fontSize}
11+
prose-headings:text-zinc-800 dark:prose-headings:text-slate-400
12+
prose-a:text-blue-600 dark:prose-a:text-blue-300
13+
prose-p:text-indigo-950 dark:prose-p:text-slate-50
14+
prose-strong:text-zinc-500 dark:prose-strong:text-tkokhing-dark
15+
prose-em:text-zinc-500 dark:prose-em:text-violet-100
16+
prose-ul:text-gray-600 dark:prose-ul:text-slate-300
17+
prose-table:text-indigo-950 dark:prose-table:text-slate-50
18+
`}>
19+
{children}
2220
</div>
2321
);
2422
}

‎src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default function RootLayout({
5454
<body
5555
className={cn(inter.className, "bg-slate-50 text-sky-700 dark:bg-slate-900 dark:text-slate-300")}
5656
>
57-
<ThemeSwitcher />
57+
{/* <ThemeSwitcher /> */}
5858
<NavigationProvider>
5959
<FontSizeProvider >
6060
<AlertBar />

‎tailwind.config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,5 +58,12 @@ const config: Config = {
5858
plugins: [
5959
require("@tailwindcss/typography"),
6060
],
61+
safelist: [
62+
'prose-sm',
63+
'prose-base',
64+
'prose-lg',
65+
'prose-xl',
66+
'prose-2xl',
67+
],
6168
};
6269
export default config;

0 commit comments

Comments
 (0)