hq/Bpistle
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: enhance picture notes browsing experience on large screen

Browse source
This commit is contained in:
codytseng 2025-01-15 16:44:33 +08:00
parent 8e567dd401
commit 4acc1203fe
5 changed files with 57 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/providers/ScreenSizeProvider.tsx
View file

@ -5,6 +5,7 @@ type TScreenSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
type TScreenSizeContext = {
screenSize: TScreenSize
isSmallScreen: boolean
isLargeScreen: boolean
}
const ScreenSizeContext = createContext<TScreenSizeContext | undefined>(undefined)
@ -20,6 +21,7 @@ export const useScreenSize = () => {
export function ScreenSizeProvider({ children }: { children: React.ReactNode }) {
const [screenSize, setScreenSize] = useState<TScreenSize>('sm')
const isSmallScreen = useMemo(() => screenSize === 'sm', [screenSize])
const isLargeScreen = useMemo(() => ['2xl'].includes(screenSize), [screenSize])
useEffect(() => {
const handleResize = () => {
@ -47,7 +49,8 @@ export function ScreenSizeProvider({ children }: { children: React.ReactNode })
<ScreenSizeContext.Provider
value={{
screenSize,
isSmallScreen
isSmallScreen,
isLargeScreen
}}
>
{children}