refactor(footer): add general jutify-between style footer (#1199)

Author: mydearxym

src/containers/unit/Footer/DesktopView/CoolGuideLayout.tsx renamed to src/containers/unit/Footer/DesktopView/GeneralLayout.tsx

@@ -1,7 +1,7 @@
 import { FC, memo } from 'react'
 
+import type { TMetric } from '@/spec'
 import { ISSUE_ADDR, API_SERVER_ADDR, GITHUB } from '@/config'
-import { METRIC } from '@/constant'
 import { joinUS } from '@/utils/helper'
 
 import TopInfo from './TopInfo'
@@ -14,13 +14,17 @@ import {
   BaseInfo,
   Item,
   NoLinkItem,
-} from '../styles/desktop_view/cool_guide_layout'
+} from '../styles/desktop_view/general_layout'
 
-const CoolGuideLayout: FC = () => {
+type TProps = {
+  metric: TMetric
+}
+
+const GeneralLayout: FC<TProps> = ({ metric }) => {
   return (
     <Wrapper>
       <InnerWrapper>
-        <TopInfo metric={METRIC.COOL_GUIDE} noBottomBorder />
+        <TopInfo metric={metric} noBottomBorder />
         <MainInfos>
           <BaseInfo>
             <Item href="/home/post/1" rel="noopener noreferrer" target="_blank">
@@ -54,9 +58,9 @@ const CoolGuideLayout: FC = () => {
           </BaseInfo>
         </MainInfos>
       </InnerWrapper>
-      <BottomInfo metric={METRIC.COOL_GUIDE} />
+      <BottomInfo metric={metric} />
     </Wrapper>
   )
 }
 
-export default memo(CoolGuideLayout)
+export default memo(GeneralLayout)

src/containers/unit/Footer/DesktopView/TopInfo/Drink.tsx

@@ -0,0 +1,25 @@
+import { FC, memo } from 'react'
+
+import { ICON } from '@/config'
+
+import {
+  Wrapper,
+  InfoBar,
+  CommunityTitle,
+  ArrowDividerIcon,
+  Logo,
+} from '../../styles/desktop_view/top_info/article'
+
+const Drink: FC = () => {
+  return (
+    <Wrapper noBottomBorder>
+      <InfoBar>
+        <Logo />
+      </InfoBar>
+      <ArrowDividerIcon src={`${ICON}/shape/arrow-simple.svg`} />
+      <CommunityTitle>来一杯</CommunityTitle>
+    </Wrapper>
+  )
+}
+
+export default memo(Drink)

src/containers/unit/Footer/DesktopView/TopInfo/Works.tsx

@@ -0,0 +1,25 @@
+import { FC, memo } from 'react'
+
+import { ICON } from '@/config'
+
+import {
+  Wrapper,
+  InfoBar,
+  CommunityTitle,
+  ArrowDividerIcon,
+  Logo,
+} from '../../styles/desktop_view/top_info/article'
+
+const Works: FC = () => {
+  return (
+    <Wrapper noBottomBorder>
+      <InfoBar>
+        <Logo />
+      </InfoBar>
+      <ArrowDividerIcon src={`${ICON}/shape/arrow-simple.svg`} />
+      <CommunityTitle>作品集市</CommunityTitle>
+    </Wrapper>
+  )
+}
+
+export default memo(Works)

src/containers/unit/Footer/DesktopView/TopInfo/index.tsx

@@ -8,6 +8,8 @@ import HomeCommunity from './HomeCommunity'
 import Article from './Article'
 import WorksArticle from './WorksArticle'
 import CoolGuide from './CoolGuide'
+import Works from './Works'
+import Drink from './Drink'
 
 export type TProps = {
   metric?: TMetric
@@ -31,6 +33,14 @@ const TopInfo: FC<TProps> = ({ metric = METRIC.COMMUNITY, ...restProps }) => {
       return <CoolGuide />
     }
 
+    case METRIC.WORKS: {
+      return <Works />
+    }
+
+    case METRIC.HAVE_A_DRINK: {
+      return <Drink />
+    }
+
     // case VIEW.HOSTING_COMMUNITY: {
     //   return <Community {...restProps} />
     // }

src/containers/unit/Footer/DesktopView/index.tsx

@@ -17,13 +17,13 @@ import JoinModal from '@/containers/tool/JoinModal'
 import HomeLayout from './HomeLayout'
 import ArticleLayout from './ArticleLayout'
 import WorksArticleLayout from './WorksArticleLayout'
-import CoolGuideLayout from './CoolGuideLayout'
+import GeneralLayout from './GeneralLayout'
 // import CommunityView from './CommunityView'
 // import HostingCommunityView from './HostingCommunityView'
 
 import type { TStore } from '../store'
 import { Wrapper } from '../styles'
-import { useInit, toggleSponsorHelper, onLogin } from '../logic'
+import { useInit } from '../logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:Footer')
@@ -41,7 +41,7 @@ const FooterContainer: FC<TProps> = ({
 }) => {
   useInit(store, metric)
 
-  const { showSponsor, viewingArticle, c11n } = store
+  const { viewingArticle, c11n } = store
 
   return (
     <Wrapper testid={testid} layout={c11n.bannerLayout} metric={metric}>
@@ -52,7 +52,14 @@ const FooterContainer: FC<TProps> = ({
       {metric === METRIC.WORKS_ARTICLE && (
         <WorksArticleLayout viewingArticle={viewingArticle} />
       )}
-      {metric === METRIC.COOL_GUIDE && <CoolGuideLayout />}
+      {metric === METRIC.COOL_GUIDE && (
+        <GeneralLayout metric={METRIC.COOL_GUIDE} />
+      )}
+      {metric === METRIC.MEETUPS && <GeneralLayout metric={METRIC.MEETUPS} />}
+      {metric === METRIC.WORKS && <GeneralLayout metric={METRIC.WORKS} />}
+      {metric === METRIC.HAVE_A_DRINK && (
+        <GeneralLayout metric={METRIC.HAVE_A_DRINK} />
+      )}
       {/* {type === VIEW.HOME && (
         <CommunityView metric={metric} layout={bannerLayout} />
       )} */}

src/containers/unit/Footer/styles/desktop_view/cool_guide_layout.ts renamed to src/containers/unit/Footer/styles/desktop_view/general_layout.ts

@@ -9,9 +9,10 @@ export { NoLinkItem } from './article_layout'
 export const Wrapper = styled.div`
   ${css.flexColumn('align-start')};
   width: 100%;
-  ${css.fitContentWidth(METRIC.COOL_GUIDE)};
+  ${css.fitContentWidth(METRIC.WORKS)};
 `
 export const InnerWrapper = styled.div`
+  ${css.flex('align-center', 'justify-between')};
   width: 100%;
 `
 export const MainInfos = styled.footer`