xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 01:01:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix sandpack theme handle

Browse Source
This commit is contained in:
DefectingCat
2023-11-10 10:54:47 +08:00
parent 6f6f24a050
commit 072498779b
4 changed files with 36 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/rua/rua-code-sandbox.tsx
View File

@ -5,6 +5,7 @@ import useInView from 'lib/hooks/use-in-view';
import { useTheme } from 'next-themes';
import { memo, useEffect, useState } from 'react';
import RUALoading from './loading/rua-loading';
import { THEME_CATPUCCIN_MAP, THEME_MAP } from 'lib/consts';
const pattern =
/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)/;
@ -19,8 +20,7 @@ type Props = {
const RUACodeSandbox = ({ url }: Props) => {
const isUrl = pattern.test(url);
const { systemTheme, theme } = useTheme();
const currentTheme = theme === 'system' ? systemTheme : theme ?? 'light';
const { theme } = useTheme();
const { ref, inView } = useInView();
const embed = new URL(url).pathname.split('/')[2];
@ -28,9 +28,13 @@ const RUACodeSandbox = ({ url }: Props) => {
useEffect(() => {
inView &&
setSrc(
`https://codesandbox.io/embed/${embed}?fontsize=14&hidenavigation=1&theme=${currentTheme}&view=preview`,
`https://codesandbox.io/embed/${embed}?fontsize=14&hidenavigation=1&theme=${
THEME_CATPUCCIN_MAP[
(theme ?? 'latte') as keyof typeof THEME_CATPUCCIN_MAP
]
}&view=preview`,
);
}, [currentTheme, embed, inView]);
}, [embed, inView, theme]);
const [load, setLoad] = useState(false);
const handleLoad = () => {

20
components/rua/rua-sandpack.tsx
View File

@ -1,21 +1,35 @@
'use client';
import { Sandpack, SandpackProps } from '@codesandbox/sandpack-react';
import { THEME_CATPUCCIN_MAP } from 'lib/consts';
import useMounted from 'lib/hooks/use-mounted';
import { useTheme } from 'next-themes';
import { memo } from 'react';
interface Props extends SandpackProps {}
const RUASandpack = ({ ...rest }: Props) => {
const { systemTheme, theme } = useTheme();
const currentTheme = theme === 'system' ? systemTheme : theme;
const { mounted } = useMounted();
const { theme } = useTheme();
if (!mounted) {
return (
<div className="my-2 min-h-[402px]">
<Sandpack {...rest} />
</div>
);
}
return (
<>
<div className="my-2 min-h-[402px]">
<Sandpack
{...rest}
theme={currentTheme === 'dark' ? 'dark' : 'light'}
theme={
THEME_CATPUCCIN_MAP[
(theme ?? 'latte') as keyof typeof THEME_CATPUCCIN_MAP
]
}
/>
</div>
</>