Finish PublicationCard and Implement Filter

package.json

@@ -29,6 +29,7 @@
     "eslint-config-next": "14.0.4",
     "eslint-config-prettier": "^9.1.0",
     "prettier": "^3.2.4",
+    "react-icons": "^5.0.1",
     "typescript": "^5"
   },
   "packageManager": "[email protected]"

src/app/publications/page.tsx

@@ -1,34 +1,90 @@
 'use client'
 
-import PublicationCard from '@/components/PublicationCard'
-import { Section, SectionContent, SectionTitle, Sections } from '@/components/Section'
-import { PUBLICATIONS } from '@/data/publications'
+import { useState, useEffect } from 'react'
+import styled from '@emotion/styled'
+
+import { PUBLICATIONS, PublicationTypes, ResearchTopics } from '@/data/publications'
+import type { PublicationType, ResearchTopic } from '@/data/publications'
+import PublicationCard from '@/components/Publication/PublicationCard'
+import { Sections, Section, SectionTitle, SectionContent } from '@/components/Section'
+import Filter from '@/components/Filter'
 import { uniq } from 'lodash'
+import Divider from '@/components/Divider'
+
+const Filters = styled.div`
+  display: flex;
+  gap: 12px;
+`
 
 export default function Page() {
+  const [researchTopic, setResearchTopic] = useState<ResearchTopic | 'All'>('All')
+  const [publicationType, setPublicationType] = useState<PublicationType | 'All'>('All')
+  const [publicationList, setPublicationList] = useState(PUBLICATIONS)
+
+  const handleResearchTopicChange = (topic: string) => {
+    setResearchTopic(topic as ResearchTopic)
+  }
+
+  const handlePublicationTypeChange = (type: string) => {
+    setPublicationType(type as PublicationType)
+  }
+
+  useEffect(() => {
+    setPublicationList(
+      PUBLICATIONS.filter(
+        pub =>
+          (researchTopic === 'All' || pub.topics.includes(researchTopic)) &&
+          (publicationType === 'All' || pub.type === publicationType)
+      )
+    )
+  }, [researchTopic, publicationType])
+
   return (
     <main>
       <h1>Publications</h1>
+      <Filters>
+        <Filter
+          filterName="Research Topic"
+          optionSet={['All', ...ResearchTopics]}
+          optionSelected={researchTopic}
+          handleOptionChange={handleResearchTopicChange}
+        />
+        <Filter
+          filterName="Type"
+          optionSet={['All', ...PublicationTypes]}
+          optionSelected={publicationType}
+          handleOptionChange={handlePublicationTypeChange}
+        />
+      </Filters>
       <Sections>
         {PUBLICATIONS.filter(pub => pub.type === 'preprint').length > 0 && (
           <Section>
             <SectionTitle>Preprints</SectionTitle>
             <SectionContent>
-              {PUBLICATIONS.filter(pub => pub.type === 'preprint').map(pub => (
-                <PublicationCard key={pub.title} pub={pub} />
-              ))}
+              {publicationList
+                .filter(pub => pub.type === 'preprint')
+                .map(pub => (
+                  <PublicationCard key={pub.title} pub={pub} />
+                ))}
             </SectionContent>
           </Section>
         )}
         {uniq(PUBLICATIONS.map(p => p.year)).map((year, i) => (
-          <Section key={i}>
-            <SectionTitle>{year}</SectionTitle>
-            <SectionContent>
-              {PUBLICATIONS.filter(({ year: y }) => y === year).map(pub => (
-                <PublicationCard key={pub.title} pub={pub} />
-              ))}
-            </SectionContent>
-          </Section>
+          <>
+            <Divider />
+            <Section key={i}>
+              <SectionTitle>{year}</SectionTitle>
+              <SectionContent>
+                {publicationList
+                  .filter(({ year: y }) => y === year)
+                  .map(pub => (
+                    <>
+                      <PublicationCard key={pub.title} pub={pub} />
+                    </>
+                  ))}
+              </SectionContent>
+            </Section>
+          </>
         ))}
       </Sections>
     </main>

src/components/Divider.tsx

@@ -0,0 +1,14 @@
+import { Color } from '@/app/theme'
+
+export default function Divider() {
+  return (
+    <hr
+      style={{
+        width: '100%',
+        height: '1px',
+        border: 'none',
+        backgroundColor: Color.gray200,
+      }}
+    />
+  )
+}

src/components/Filter.tsx

@@ -0,0 +1,139 @@
+import styled from '@emotion/styled'
+import { useState } from 'react'
+import { FontVariant, Color, Radius } from '@/app/theme'
+import { IoChevronDownOutline, IoChevronUpOutline } from 'react-icons/io5'
+
+const Select = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`
+
+const SelectName = styled.span<{ filtered: boolean }>`
+  margin-left: 4px;
+  ${FontVariant.body_sm}
+  width: fit-content;
+  margin-right: 6px;
+  color: ${props => (props.filtered ? Color.orange900 : Color.gray700)};
+  white-space: nowrap;
+`
+
+const SelectBody = styled.div`
+  position: relative;
+  min-width: 230px;
+  width: 100%;
+  width: fit-content;
+
+  ${FontVariant.body_md}
+
+  box-sizing: border-box;
+`
+
+const Value = styled.span<{ filtered: boolean }>`
+  display: flex;
+
+  overflow: hidden;
+
+  border: 1px solid ${props => (props.filtered ? Color.orange900 : Color.gray300)};
+  border-radius: ${Radius.md};
+  padding: 6px 16px 6px 12px;
+
+  cursor: pointer;
+
+  vertical-align: middle;
+  justify-content: space-between;
+  color: ${props => (props.filtered ? Color.orange900 : Color.gray700)};
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  &:hover {
+    color: ${props => (props.filtered ? Color.orange900 : Color.black)};
+  }
+`
+
+const OptList = styled.ul`
+  position: absolute;
+  z-index: 2;
+  list-style: none;
+  margin-top: 12px;
+  padding: 0;
+
+  box-sizing: border-box;
+  min-width: 100%;
+
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border: 1px solid ${Color.gray200};
+  border-radius: ${Radius.md};
+  background-color: ${Color.white};
+
+  .hidden {
+    max-height: 0;
+    visibility: hidden;
+  }
+`
+
+const FilterOption = styled.li`
+  display: block;
+  padding: 6px 12px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${Color.gray100};
+  }
+`
+
+interface Props {
+  filterName: string
+  optionSet: string[]
+  optionSelected: string
+  handleOptionChange: (topic: string) => void
+}
+
+const isOptionExist = (optionSelected: string) => optionSelected !== 'All'
+
+export default function Filter({ filterName, optionSet, optionSelected, handleOptionChange }: Props) {
+  const [optionOpen, setOptionOpen] = useState(false)
+  const toggleList = () => setOptionOpen(!optionOpen)
+  const onBlur = () => setOptionOpen(false)
+
+  return (
+    <Select>
+      <SelectName filtered={isOptionExist(optionSelected)}>{filterName}</SelectName>
+      <SelectBody onClick={toggleList}>
+        <Value filtered={isOptionExist(optionSelected)} onBlur={onBlur} tabIndex={0}>
+          {optionSelected}
+          {optionOpen ? (
+            <IoChevronUpOutline
+              size={20}
+              color={`${isOptionExist(optionSelected) ? Color.orange900 : Color.gray700}`}
+            />
+          ) : (
+            <IoChevronDownOutline
+              size={20}
+              color={`${isOptionExist(optionSelected) ? Color.orange900 : Color.gray700}`}
+            />
+          )}
+        </Value>
+        {optionOpen && (
+          <OptList>
+            {optionSet.map(topic => (
+              <FilterOption
+                key={topic}
+                onMouseDown={e => {
+                  handleOptionChange(topic)
+                  toggleList()
+                  e.preventDefault()
+                }}
+              >
+                {topic}
+              </FilterOption>
+            ))}
+          </OptList>
+        )}
+      </SelectBody>
+    </Select>
+  )
+}

src/components/Publication/Author.tsx

@@ -0,0 +1,29 @@
+import Member from '@/data/members'
+import styled from '@emotion/styled'
+import { Color } from '@/app/theme'
+
+const AuthorList = styled.div`
+  & > *:not(:last-child)::after {
+    content: ', ';
+  }
+`
+
+const LabMember = styled.span``
+
+const NotLabMember = styled.span`
+  color: ${Color.gray500};
+`
+
+export default function Author({ authors }: { authors: (Member | string)[] }) {
+  return (
+    <AuthorList>
+      {authors.map(author =>
+        author instanceof Member ? (
+          <LabMember key={author.fullName}>{author.fullName}</LabMember>
+        ) : (
+          <NotLabMember key={author}>{author}</NotLabMember>
+        )
+      )}
+    </AuthorList>
+  )
+}

src/components/Publication/PublicationCard.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import React from 'react'
+import { FontVariant, Color } from '@/app/theme'
+import type { Publication } from '@/data/publications'
+import { URL } from '@/components/URL'
+import Author from './Author'
+import styled from '@emotion/styled'
+
+const Card = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`
+
+const Title = styled.a`
+  ${FontVariant.body_lg}
+  text-decoration: none;
+  color: ${Color.gray900};
+
+  &[href]: hover {
+    text-decoration: underline;
+  }
+`
+
+const Info = styled.div`
+  display: flex;
+  gap: 12px;
+  ${FontVariant.body_md}
+  color: ${Color.gray700};
+`
+
+const SubInfo = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`
+
+const Venue = styled.div`
+  font-style: italic;
+`
+
+const URLs = styled.div`
+  display: flex;
+  gap: 8px;
+`
+
+const Award = styled.div`
+  ${FontVariant.body_sm}
+  &::before {
+    content: '🥇';
+    margin-right: 2px;
+  }
+`
+
+const Tags = styled.span`
+  ${FontVariant.body_sm}
+  color: ${Color.gray700};
+`
+
+export default function PublicationCard({ pub }: { pub: Publication }) {
+  return (
+    <Card>
+      <Title href={pub.paperLink}>{pub.title}</Title>
+      <Info>
+        <Venue>{pub.venue}</Venue>
+        <Author authors={pub.authors} />
+      </Info>
+      <SubInfo>
+        {pub.links && pub.links?.length > 0 && (
+          <URLs>
+            {pub.links?.map(({ url, type }, i) => (
+              <URL href={url} key={i} type={type} target="_blank">
+                {type}
+              </URL>
+            ))}
+          </URLs>
+        )}
+        {pub.award && <Award>{pub.award}</Award>}
+        <Tags>{pub.topics.map(topic => '#' + topic.charAt(0).toUpperCase() + topic.slice(1)).join(' ')}</Tags>
+      </SubInfo>
+    </Card>
+  )
+}