diff --git a/components/mdx/Image.tsx b/components/mdx/Image.tsx index 84bf8be..6a03e95 100644 --- a/components/mdx/Image.tsx +++ b/components/mdx/Image.tsx @@ -12,7 +12,7 @@ const Image = ({ alt, ...rest }: Props) => { className={classNames( 'block mx-auto', 'text-center text-gray-400', - 'mt-2' + 'my-2' )} > {alt} diff --git a/components/post/PostToc.module.css b/components/post/PostToc.module.css new file mode 100644 index 0000000..ef6ced5 --- /dev/null +++ b/components/post/PostToc.module.css @@ -0,0 +1,3 @@ +.head:hover:before { + content: unset !important; +} diff --git a/components/post/PostToc.tsx b/components/post/PostToc.tsx new file mode 100644 index 0000000..4c88b0a --- /dev/null +++ b/components/post/PostToc.tsx @@ -0,0 +1,64 @@ +import { getHeadings } from 'lib/utils'; +import Anchor from 'components/mdx/Anchor'; +import styles from './PostToc.module.css'; +import classNames from 'classnames'; +import { useCallback, useState } from 'react'; +import { FiChevronDown } from 'react-icons/fi'; + +interface Props { + headings: ReturnType; +} + +const PostTOC = ({ headings }: Props) => { + const [show, setShow] = useState(false); + const handleClick = useCallback(() => setShow((show) => !show), []); + + return ( + <> +
+

+ What's inside? + + +

+ + +
+ + ); +}; + +export default PostTOC; diff --git a/data/sandpack/generic-component-encapsulate-reusable-component/hook-form-basic/App.ts b/data/sandpack/generic-component-encapsulate-reusable-component/hook-form-basic/App.ts deleted file mode 100644 index e6246a8..0000000 --- a/data/sandpack/generic-component-encapsulate-reusable-component/hook-form-basic/App.ts +++ /dev/null @@ -1,44 +0,0 @@ -const app = `import { useForm } from 'react-hook-form'; - -type Pet = 'Cat' | 'Dog'; -type FormData = { - firstName: string; - lastName: string; - favorite: Pet; -}; - -export default function App() { - const { - register, - handleSubmit, - formState: { errors }, - } = useForm(); - const onSubmit = handleSubmit((data) => console.log(data)); - - return ( -
-
-
- - -
- -
- - -
- -
- - -
- - -
-
- ); -}`; -export default app; diff --git a/data/sandpack/generic-component-encapsulate-reusable-component/react-generic/App.ts b/data/sandpack/generic-component-encapsulate-reusable-component/react-generic/App.ts deleted file mode 100644 index 4224cbe..0000000 --- a/data/sandpack/generic-component-encapsulate-reusable-component/react-generic/App.ts +++ /dev/null @@ -1,22 +0,0 @@ -const app = `import "./styles.css"; -import Child from "./Child"; - -const testData = { - name: "xfy", - age: 18 -}; - -export default function App() { - return ( -
-

Hello CodeSandbox

-

Start editing to see some magic happen!

- -
- -
-
- ); -}`; - -export default app; diff --git a/data/sandpack/generic-component-encapsulate-reusable-component/react-generic/Child.ts b/data/sandpack/generic-component-encapsulate-reusable-component/react-generic/Child.ts deleted file mode 100644 index 0e3de8a..0000000 --- a/data/sandpack/generic-component-encapsulate-reusable-component/react-generic/Child.ts +++ /dev/null @@ -1,27 +0,0 @@ -const child = `import { useState } from "react"; - -type Props> = { - name: keyof T; - data: T; -}; - -const Child = >({ name, data }: Props) => { - const [showName, setShowName] = useState(); - const valid = () => { - console.log(data[name]); - setShowName(data[name]); - }; - - return ( - <> -
{name}
- - -
{JSON.stringify(showName)}
- - ); -}; - -export default Child;`; - -export default child; diff --git a/styles/rua.css b/styles/rua.css index e0e2778..64b2ddc 100644 --- a/styles/rua.css +++ b/styles/rua.css @@ -118,7 +118,7 @@ } */ #article .toc .is-active-link { - @apply font-semibold transition-all; + @apply font-semibold; } #article p {