resolve conflicts

src/components/Article/Article.MobileToc.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import { useArticleContainerContext } from '@/containers/ArticleContainer.Context'
 import { Typography } from '@acid-info/lsd-react'
 import styles from './Article.module.css'
-import { GoogleDocEnhanced } from '@/lib/unbody/unbody.types'
 import { Collapse } from '../Collapse'
 import Link from 'next/link'
 import { UnbodyGraphQl } from '@/lib/unbody/unbody-content.types'
@@ -13,7 +12,7 @@ type Props = {
 }
 
 export const MobileToc = ({ toc }: Props) => {
-  const { tocId, setTocId } = useArticleContainerContext()
+  const { tocId } = useArticleContainerContext()
 
   return toc?.length > 0 ? (
     <Collapse className={styles.mobileToc} label="Contents">
@@ -32,20 +31,18 @@ export const MobileToc = ({ toc }: Props) => {
   ) : null
 }
 
-const CustomTypography = styled(Typography)`
-  text-overflow: ellipsis;
-  word-break: break-word;
-  white-space: pre-wrap;
-`
-
 const TocItem = styled(Link)<{ active: boolean }>`
   padding: 8px 14px;
   background-color: ${(p) =>
     p.active
       ? 'rgb(var(--lsd-theme-primary))'
       : 'rgb(var(--lsd-theme-secondary))'};
+
+  label {
+    text-decoration: none;
     color: ${(p) =>
       p.active
         ? 'rgb(var(--lsd-theme-secondary))'
         : 'rgb(var(--lsd-theme-primary))'};
+  }
 `

src/components/Article/Footer/Article.Footer.tsx

@@ -31,7 +31,8 @@ const ArticleFooter = ({ data }: { data: ArticlePostData }) => {
 
 const ArticleFooterContainer = styled.div`
   margin-top: 16px;
-  & > div:not(:first-child) > div > button {
+
+  & > div:not(:first-child) > div {
     border-top: none;
   }
 `

src/components/Collapse/Collapse.module.css

@@ -1,8 +0,0 @@
-.collapse > div > button {
-  width: 100% !important;
-}
-
-.collapse > div {
-  display: flex;
-  flex-direction: column;
-}

src/components/Collapse/Collapse.tsx

@@ -1,21 +1,82 @@
-import { CollapseProps, Collapse as LsdCollapse } from '@acid-info/lsd-react'
-import styles from './Collapse.module.css'
+import { ArrowDownIcon, ArrowUpIcon, Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import clsx from 'clsx'
+import { useState } from 'react'
+
+type Props = {
+  label: string
+  children: React.ReactNode
+  className: string
+  onClick?: () => void
+}
 
 export default function Collapse({
   label,
   children,
   className,
+  onClick,
   ...props
-}: CollapseProps) {
+}: Props) {
+  const [open, setOpen] = useState(true)
+  const handleClick = () => {
+    setOpen((prev) => !prev)
+    onClick && onClick()
+  }
   return (
-    <LsdCollapse
-      label={label}
-      {...props}
-      className={clsx(styles.collapse, className)}
-    >
-      {children}
-    </LsdCollapse>
+    <div onClick={handleClick} {...props} className={clsx(className)}>
+      <Header>
+        <Label color="primary" component="label" variant="label1">
+          {label}
+        </Label>
+        <Icon>
+          {open ? (
+            <ArrowUpIcon color="primary" />
+          ) : (
+            <ArrowDownIcon color="primary" />
+          )}
+        </Icon>
+      </Header>
+      {open && <Content>{children}</Content>}
+    </div>
   )
 }
+
+const Header = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+
+  cursor: pointer;
+  background: none;
+  border: 1px solid rgb(var(--lsd-border-primary));
+
+  height: 40px;
+  padding: 9px 17px;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+  }
+`
+
+const Label = styled(Typography)`
+  cursor: pointer;
+  margin: auto;
+`
+
+const Icon = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+`
+
+const Content = styled.div`
+  border: 1px solid rgb(var(--lsd-border-primary));
+  border-top: none;
+  display: flex;
+  flex-direction: column;
+`

src/components/TableOfContents/TableOfContents.tsx

@@ -24,7 +24,6 @@ export default function TableOfContents({ contents, ...props }: Props) {
   useEffect(() => {
     const onHashChangeStart = (url: string) => {
       const hash = url.split('#')[1]
-      console.log('hash', contents)
       if (hash) {
         setTocId(hash)
       } else {
@@ -51,8 +50,8 @@ export default function TableOfContents({ contents, ...props }: Props) {
       <Contents height={height}>
         {contents?.map((content, index) => (
           <TocItem
-            href={`${index === 0 ? '#' : content.href}`}
             key={index}
+            href={`${index === 0 ? '#' : content.href}`}
             active={tocId ? content.href.substring(1) === tocId : index === 0}
           >
             <Typography variant="label2" genericFontFamily="sans-serif">
@@ -116,4 +115,8 @@ const TocItem = styled(Link)<{ active: boolean }>`
       ? '1px solid rgb(var(--lsd-border-primary))'
       : '1px solid transparent'};
   cursor: pointer;
+
+  label {
+    cursor: pointer;
+  }
 `