From feb90db4f0683369277d2f444b75b14b08cf419a Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Fri, 13 Sep 2024 19:07:56 +0900 Subject: [PATCH] feat: implement docs page --- public/assets/link.svg | 3 + .../Docs/ProjectCard/ProjectCard.tsx | 88 ++++++++++++++ src/components/Docs/ProjectCard/index.ts | 1 + src/components/Docs/ProjectCard/types.ts | 10 ++ .../LeaderboardTabs/LeaderboardTabs.tsx | 1 - src/containers/Docs/DocsContainer.tsx | 109 ++++++++++++++++++ src/containers/Docs/index.ts | 1 + .../Leaderboard/LeaderboardContainer.tsx | 8 +- src/containers/Leaderboard/index.ts | 2 +- src/pages/docs/index.tsx | 13 +++ 10 files changed, 230 insertions(+), 6 deletions(-) create mode 100644 public/assets/link.svg create mode 100644 src/components/Docs/ProjectCard/ProjectCard.tsx create mode 100644 src/components/Docs/ProjectCard/index.ts create mode 100644 src/components/Docs/ProjectCard/types.ts create mode 100644 src/containers/Docs/DocsContainer.tsx create mode 100644 src/containers/Docs/index.ts create mode 100644 src/pages/docs/index.tsx diff --git a/public/assets/link.svg b/public/assets/link.svg new file mode 100644 index 0000000..e7c5c8b --- /dev/null +++ b/public/assets/link.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Docs/ProjectCard/ProjectCard.tsx b/src/components/Docs/ProjectCard/ProjectCard.tsx new file mode 100644 index 0000000..77aed93 --- /dev/null +++ b/src/components/Docs/ProjectCard/ProjectCard.tsx @@ -0,0 +1,88 @@ +import styled from '@emotion/styled' +import Link from 'next/link' +import React from 'react' +import { ProjectData } from './types' + +interface ProjectCardProps { + project: ProjectData +} + +const ProjectCard: React.FC = ({ project }) => { + return ( + + {project.name} + + {project.items.map((item, index) => ( + + + {item.number} + {item.title} + + + + + + ))} + + + ) +} + +const CardWrapper = styled.article` + display: flex; + flex-direction: column; + font-family: Courier, sans-serif; + font-weight: 400; + + @media (max-width: 991px) { + margin-top: 28px; + } +` + +const ProjectTitle = styled.h2` + color: rgb(var(--lsd-text-primary)); + font-size: 32px; + line-height: 40px; + margin: 0 0 32px; +` + +const ItemList = styled.ul` + list-style-type: none; + padding: 0; + margin: 0; +` + +const ItemWrapper = styled.li<{ isLastItem: boolean }>` + background-color: var(--grey-900); + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px; + color: rgb(var(--lsd-text-primary)); + margin-bottom: ${(props) => (props.isLastItem ? '0' : '2px')}; +` + +const ItemContent = styled.div` + display: flex; + align-items: center; + gap: 16px; +` + +const ItemNumber = styled.span` + width: 44px; +` + +const ItemTitle = styled.span` + font-size: 14px; +` + +const ItemIcon = styled.img` + width: 14px; + height: 14px; + object-fit: contain; +` + +export default ProjectCard diff --git a/src/components/Docs/ProjectCard/index.ts b/src/components/Docs/ProjectCard/index.ts new file mode 100644 index 0000000..6899693 --- /dev/null +++ b/src/components/Docs/ProjectCard/index.ts @@ -0,0 +1 @@ +export { default as ProjectCard } from './ProjectCard' diff --git a/src/components/Docs/ProjectCard/types.ts b/src/components/Docs/ProjectCard/types.ts new file mode 100644 index 0000000..11328b1 --- /dev/null +++ b/src/components/Docs/ProjectCard/types.ts @@ -0,0 +1,10 @@ +export interface ProjectItem { + number: string + title: string + link: string +} + +export interface ProjectData { + name: string + items: ProjectItem[] +} diff --git a/src/components/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx b/src/components/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx index 802cd4b..4d6bebf 100644 --- a/src/components/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx +++ b/src/components/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx @@ -16,7 +16,6 @@ const TabsWrapper = styled.div` display: grid; grid-template-columns: 1fr 1fr; gap: 16px; - margin-top: 32px; width: 100%; @media (max-width: 991px) { diff --git a/src/containers/Docs/DocsContainer.tsx b/src/containers/Docs/DocsContainer.tsx new file mode 100644 index 0000000..c5068a4 --- /dev/null +++ b/src/containers/Docs/DocsContainer.tsx @@ -0,0 +1,109 @@ +import { ProjectCard } from '@/components/Docs/ProjectCard' +import { ProjectData } from '@/components/Docs/ProjectCard/types' +import styled from '@emotion/styled' +import React from 'react' + +const projectsData: ProjectData[] = [ + { + name: 'IFT', + items: [ + { number: '1.', title: 'Deck', link: 'https://logos.co' }, + { number: '2.', title: 'Whitepaper', link: 'https://logos.co' }, + { number: '3.', title: 'Github', link: 'https://logos.co' }, + ], + }, + { + name: 'Logos', + items: [ + { number: '1.', title: 'Deck', link: 'https://logos.co' }, + { number: '2.', title: 'Whitepaper', link: 'https://logos.co' }, + { number: '3.', title: 'Github', link: 'https://logos.co' }, + ], + }, + { + name: 'Operators', + items: [ + { number: '1.', title: 'Deck', link: 'https://logos.co' }, + { number: '2.', title: 'Whitepaper', link: 'https://logos.co' }, + { number: '3.', title: 'Github', link: 'https://logos.co' }, + ], + }, + { + name: 'Vac', + items: [ + { number: '1.', title: 'Deck', link: 'https://logos.co' }, + { number: '2.', title: 'Whitepaper', link: 'https://logos.co' }, + { number: '3.', title: 'Github', link: 'https://logos.co' }, + ], + }, + { + name: 'Codex', + items: [ + { number: '1.', title: 'Deck', link: 'https://logos.co' }, + { number: '2.', title: 'Whitepaper', link: 'https://logos.co' }, + { number: '3.', title: 'Github', link: 'https://logos.co' }, + ], + }, + { + name: 'Waku', + items: [ + { number: '1.', title: 'Deck', link: 'https://logos.co' }, + { number: '2.', title: 'Whitepaper', link: 'https://logos.co' }, + { number: '3.', title: 'Github', link: 'https://logos.co' }, + ], + }, + { + name: 'Nomos', + items: [ + { number: '1.', title: 'Deck', link: 'https://logos.co' }, + { number: '2.', title: 'Whitepaper', link: 'https://logos.co' }, + { number: '3.', title: 'Github', link: 'https://logos.co' }, + ], + }, +] + +const DocsSection: React.FC = () => { + return ( + + + + {projectsData.map((project, index) => ( + + ))} + + + + ) +} + +const Container = styled.section` + width: 100%; + + @media (max-width: 991px) { + padding: 0 20px; + } +` + +const ProjectContainer = styled.div` + margin-top: 65px; + width: 100%; + + @media (max-width: 991px) { + max-width: 100%; + margin-top: 40px; + } +` + +const ProjectGrid = styled.div` + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 70px 16px; + width: 100%; + + @media (max-width: 991px) { + grid-template-columns: 1fr; + gap: 0; + } +` + +export default DocsSection diff --git a/src/containers/Docs/index.ts b/src/containers/Docs/index.ts new file mode 100644 index 0000000..53b51fc --- /dev/null +++ b/src/containers/Docs/index.ts @@ -0,0 +1 @@ +export { default as DocsContainer } from './DocsContainer' diff --git a/src/containers/Leaderboard/LeaderboardContainer.tsx b/src/containers/Leaderboard/LeaderboardContainer.tsx index 3de656e..7c349d0 100644 --- a/src/containers/Leaderboard/LeaderboardContainer.tsx +++ b/src/containers/Leaderboard/LeaderboardContainer.tsx @@ -5,7 +5,7 @@ import React from 'react' interface LeaderboardProps {} -const Leaderboard: React.FC = () => { +const LeaderboardContainer: React.FC = () => { return ( @@ -15,14 +15,14 @@ const Leaderboard: React.FC = () => { } const Container = styled.div` - background-color: #000; display: flex; flex-direction: column; overflow: hidden; - padding: 28px 32px; + margin-top: 60px; + @media (max-width: 991px) { padding: 0 20px; } ` -export default Leaderboard +export default LeaderboardContainer diff --git a/src/containers/Leaderboard/index.ts b/src/containers/Leaderboard/index.ts index 1c64304..17fad73 100644 --- a/src/containers/Leaderboard/index.ts +++ b/src/containers/Leaderboard/index.ts @@ -1 +1 @@ -export { default as Leaderboard } from './LeaderboardContainer' +export { default as LeaderboardContainer } from './LeaderboardContainer' diff --git a/src/pages/docs/index.tsx b/src/pages/docs/index.tsx new file mode 100644 index 0000000..fd6a2fb --- /dev/null +++ b/src/pages/docs/index.tsx @@ -0,0 +1,13 @@ +import { SEO } from '@/components/SEO' +import DocsContainer from '@/containers/Docs/DocsContainer' + +type PageProps = {} + +export default function DocsPage(props: PageProps) { + return ( + <> + + + + ) +}