clean: clean up redundant code on website.

Author: jaywcjlove

www/src/pages/theme/Preview.tsx

@@ -60,7 +60,6 @@ const ButtonGroup = styled.div`
 export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
   const { themePkg, mode } = props;
   const { mdData } = useMdData(props.path);
-  const childs = Children.toArray(props.children);
   const [previewDoc, setPreviewDoc] = useState<PreviewProps['preview']>(props.preview || 'example');
   const themePkgNmae = !!mode ? themePkg?.replace(/-(light|dark)$/, '') : themePkg;
   const themeName = themePkgNmae?.replace('@uiw/codemirror-theme-', '').replace('-', ' ');
@@ -91,9 +90,6 @@ export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
             <PreCode value={`npm install ${themePkg} --save`} />
           </Header>
         )}
-        {childs.map((child, key) => {
-          return cloneElement(child as any, { key, source: mdData?.source });
-        })}
         {mdData && (previewDoc === 'document' || !themePkg) && <Markdown source={mdData.source} mdData={mdData} />}
         {previewDoc === 'example' && themePkg && themeExtensionName && <Sample theme={extension} />}
       </Content>

www/src/pages/theme/themes/PreCode.tsx

@@ -9,14 +9,14 @@ const Pre = styled.pre`
   border-radius: 5px;
 `;
 
-const Span = styled.span<{ number: number }>`
+const Span = styled.span<{ $number: number }>`
   ${(props) =>
-    props.number === 0 &&
+    props.$number === 0 &&
     css`
       color: var(--color-accent-emphasis);
     `}
   ${(props) =>
-    props.number === 2 &&
+    props.$number === 2 &&
     css`
       color: var(--color-danger-fg);
     `}
@@ -27,7 +27,7 @@ export const PreCode: FC<PropsWithoutRef<{ value?: string }>> = ({ value = '' })
     <Pre>
       {value.split(' ').map((str, idx) => {
         return (
-          <Span key={idx} number={idx}>
+          <Span key={idx} $number={idx}>
             {str}{' '}
           </Span>
         );