mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-15 16:51:37 +00:00
✨ Update sandpack ssr
This commit is contained in:
@ -1,6 +1,5 @@
|
||||
import { Sandpack, SandpackProps } from '@codesandbox/sandpack-react';
|
||||
import { Sandpack, SandpackProps } from '@codesandbox/sandpack-react';
|
||||
import { useTheme } from 'next-themes';
|
||||
import useInView from 'lib/hooks/useInView';
|
||||
|
||||
interface Props extends SandpackProps {}
|
||||
|
||||
@ -8,17 +7,13 @@ const RUASandpack = ({ ...rest }: Props) => {
|
||||
const { systemTheme, theme } = useTheme();
|
||||
const currentTheme = theme === 'system' ? systemTheme : theme;
|
||||
|
||||
const { ref, inView } = useInView();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="my-2 min-h-[402px]" ref={ref}>
|
||||
{inView && (
|
||||
<Sandpack
|
||||
{...rest}
|
||||
theme={currentTheme === 'dark' ? 'dark' : 'light'}
|
||||
/>
|
||||
)}
|
||||
<div className="my-2 min-h-[402px]">
|
||||
<Sandpack
|
||||
{...rest}
|
||||
theme={currentTheme === 'dark' ? 'dark' : 'light'}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { Head, Html, Main, NextScript } from 'next/document';
|
||||
import { getSandpackCssText } from '@codesandbox/sandpack-react';
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
@ -15,6 +16,10 @@ export default function Document() {
|
||||
href="https://ZUYZBUJBQW-dsn.algolia.net"
|
||||
crossOrigin=""
|
||||
/>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{ __html: getSandpackCssText() }}
|
||||
id="sandpack"
|
||||
/>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
|
Reference in New Issue
Block a user