Add content to Overview tab with SectionCard + List component

package.json

@@ -18,7 +18,8 @@
     "fs": "^0.0.1-security",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router": "^7.7.1"
+    "react-router": "^7.7.1",
+    "react-router-dom": "^7.8.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",

src/App.tsx

@@ -1,13 +1,11 @@
-import Header from './components/common/Layout/Header'
+import { Routes, Route } from 'react-router-dom'
+import LibraryPage from './pages/LiberyPage'
 
 function App() {
   return (
-    <>
-      <Header
-        title="React-Vite Template"
-        subtitle="Explore reusable components, hooks, and patterns"
-      />
-    </>
+    <Routes>
+      <Route index element={<LibraryPage />} />
+    </Routes>
   )
 }
 

src/components/common/Layout/Header/styled.ts

@@ -10,7 +10,7 @@ export const Header = styled.header`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: ${tokens.padding.CONTAINER}px;
+  padding: ${tokens.padding.CONTAINER}px ${tokens.padding.CONTAINER / 2}px;
 
   & > div {
     display: flex;

src/components/common/molecules/List/List.tsx

@@ -0,0 +1,23 @@
+import { Typography as T } from '../../../../core/typography'
+import { FlexContainer } from '../../styled'
+import * as S from './styled'
+
+type ListProps = {
+  title: string
+  items: string[]
+}
+
+export default function List({ title, items }: ListProps) {
+  return (
+    <FlexContainer>
+      <T.BodyBase demi margin="0">
+        {title}
+      </T.BodyBase>
+      <S.List>
+        {items.map((item) => (
+          <S.ListItem key={item}>{item}</S.ListItem>
+        ))}
+      </S.List>
+    </FlexContainer>
+  )
+}

src/components/common/molecules/List/index.ts

@@ -0,0 +1,3 @@
+import List from './List'
+
+export default List

src/components/common/molecules/List/styled.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled'
+import tokens from '../../../../core/tokens'
+
+export const List = styled.ul`
+  margin: ${tokens.spacing.BASELINE}px 0;
+  padding-left: ${tokens.spacing.BASELINE * 2}px;
+  list-style-type: disc;
+`
+
+export const ListItem = styled.li`
+  margin-bottom: ${tokens.spacing.BASELINE}px;
+  color: ${({ theme }) => theme.colors.text.primary};
+`

src/components/common/organisms/Tabs/Tabs.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useMemo, useState } from 'react'
+import * as S from './styled'
+
+export type TabItem = {
+  key: string
+  label: string
+  content: React.ReactNode
+}
+
+type Props = { items: TabItem[]; defaultKey?: string }
+
+export default function Tabs({ items, defaultKey }: Props) {
+  const keys = useMemo(() => items.map((i) => i.key), [items])
+  const [active, setActive] = useState(defaultKey ?? keys[0])
+
+  useEffect(() => {
+    if (!keys.includes(active)) setActive(keys[0])
+  }, [keys, active])
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    const i = keys.indexOf(active)
+    if (e.key === 'ArrowRight') setActive(keys[(i + 1) % keys.length])
+    if (e.key === 'ArrowLeft')
+      setActive(keys[(i - 1 + keys.length) % keys.length])
+    if (e.key === 'Home') setActive(keys[0])
+    if (e.key === 'End') setActive(keys[keys.length - 1])
+  }
+
+  return (
+    <>
+      <S.Bar role="tablist" aria-label="Sections" onKeyDown={onKeyDown}>
+        {items.map((t) => {
+          const isActive = t.key === active
+          return (
+            <S.TabBtn
+              key={t.key}
+              role="tab"
+              id={`${t.key}-tab`}
+              aria-controls={`${t.key}-panel`}
+              aria-selected={isActive}
+              tabIndex={isActive ? 0 : -1}
+              active={isActive}
+              onClick={() => setActive(t.key)}
+            >
+              {t.label}
+            </S.TabBtn>
+          )
+        })}
+      </S.Bar>
+
+      {items.map((t) => {
+        const isActive = t.key === active
+        return (
+          <S.Panel
+            key={t.key}
+            role="tabpanel"
+            id={`${t.key}-panel`}
+            aria-labelledby={`${t.key}-tab`}
+            hidden={!isActive}
+            aria-hidden={!isActive}
+          >
+            {isActive && t.content}
+          </S.Panel>
+        )
+      })}
+    </>
+  )
+}

src/components/common/organisms/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Tabs'
+export type { TabItem } from './Tabs'

src/components/common/organisms/Tabs/styled.ts

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled'
+import tokens from '../../../../core/tokens'
+
+const DIVIDER_W = `${tokens.size.BASELINE / 8}px`
+const INDICATOR_H = '2px'
+
+export const Bar = styled.nav`
+  display: flex;
+  align-items: flex-end; /* tabs sit on the divider */
+  gap: ${tokens.gap.LARGE}px;
+  margin: ${tokens.spacing.BASELINE * 2}px 0 ${tokens.spacing.BASELINE}px;
+  border-bottom: ${DIVIDER_W} solid ${({ theme }) => theme.colors.scrollBar};
+`
+
+export const TabBtn = styled.button<{ active: boolean }>`
+  position: relative;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: ${(p) =>
+    p.active ? p.theme.colors.primary : p.theme.colors.text.primary};
+  font-size: ${tokens.text.fontSize.BASELINE}px;
+  font-weight: ${({ active }) =>
+    active ? tokens.text.fontWeight.semiBold : tokens.text.fontWeight.normal};
+
+  padding: ${tokens.spacing.BASELINE}px ${tokens.spacing.BASELINE * 2}px;
+  padding-bottom: ${tokens.spacing.BASELINE * 1.5}px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: calc(-1 * ${DIVIDER_W});
+    height: ${INDICATOR_H};
+    background: ${({ theme }) => theme.colors.primary};
+    transform: ${({ active }) => (active ? 'scaleX(1)' : 'scaleX(0)')};
+    transform-origin: left;
+    transition: transform 160ms ease;
+  }
+`
+
+export const Panel = styled.section`
+  padding-top: ${tokens.spacing.BASELINE * 2}px;
+`

src/components/common/styled.ts

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled'
+import tokens from '../../core/tokens'
+
+export const PaddedContainer = styled.div<{ padding?: number }>`
+  padding: ${(p) => p.padding ?? tokens.padding.BASELINE * 2}px;
+`
+
+export const Main = styled(PaddedContainer)``
+
+export const DividerBar = styled.hr`
+  width: 100%;
+  margin: 0;
+  border: 0;
+  border-top: ${tokens.size.BASELINE / 8}px solid
+    ${({ theme }) => theme.colors.scrollBar};
+`
+
+export const FlexContainer = styled.div<{
+  direction?: 'row' | 'column'
+  gap?: number
+  align?: string
+  justify?: string
+}>`
+  display: flex;
+  flex-direction: ${(p) => p.direction ?? 'column'};
+  gap: ${(p) => p.gap ?? tokens.gap.BASELINE}px;
+  align-items: ${(p) => p.align ?? 'stretch'};
+  justify-content: ${(p) => p.justify ?? 'flex-start'};
+`

src/components/common/templates/SectionCard/SectionCard.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react'
+import * as S from './styled'
+import { Typography as T } from '../../../../core/typography'
+import { DividerBar, PaddedContainer } from '../../styled'
+import tokens from '../../../../core/tokens'
+
+type Props = {
+  title: string
+  children: ReactNode
+}
+
+export default function SectionCard({ title, children }: Props) {
+  return (
+    <S.Wrapper>
+      <PaddedContainer padding={tokens.padding.BASELINE * 2.5}>
+        <T.BodyMedium demi margin="0">
+          {title}
+        </T.BodyMedium>
+      </PaddedContainer>
+      <DividerBar />
+      <S.Body>{children}</S.Body>
+    </S.Wrapper>
+  )
+}

src/components/common/templates/SectionCard/index.ts

@@ -0,0 +1,3 @@
+import SectionCard from './SectionCard'
+
+export default SectionCard

src/components/common/templates/SectionCard/styled.ts

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled'
+import tokens from '../../../../core/tokens'
+import { FlexContainer } from '../../styled'
+
+export const Wrapper = styled.section`
+  background: ${({ theme }) => theme.colors.white};
+  border-radius: ${tokens.borderRadius.BASELINE}px;
+  box-shadow: 0 1px 3px 0 ${({ theme }) => theme.colors.boxShadow};
+  overflow: hidden;
+`
+
+export const Body = styled(FlexContainer)`
+  gap: ${tokens.gap.LARGE}px;
+  padding: ${tokens.padding.BASELINE * 2.5}px;
+`

src/core/theme.ts

@@ -13,7 +13,7 @@ const brandColors = {
 }
 
 const background = {
-  primaryGrey: '#f4f4f4',
+  primaryGrey: '#EFEFE9',
   secondaryGrey: '#F5F5F5',
   tertiaryGrey: '#CCCCCC',
 }

src/index.css

@@ -26,4 +26,5 @@ select {
 
 body {
   margin: 0;
+  padding: 0;
 }

src/main.tsx

@@ -1,19 +1,16 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-import { BrowserRouter, Route, Routes } from 'react-router'
+import { BrowserRouter } from 'react-router-dom'
 import { ThemeProvider } from '@emotion/react'
-import theme from './core/theme.ts'
+import theme from './core/theme'
+import './index.css'
+import App from './App'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <ThemeProvider theme={theme}>
       <BrowserRouter>
-        <Routes>
-          //TODO: Add more routes that takes you to different template pages
-          <Route path="/" element={<App />} />
-        </Routes>
+        <App />
       </BrowserRouter>
     </ThemeProvider>
   </StrictMode>

src/pages/LiberyPage/index.tsx

@@ -0,0 +1,19 @@
+import Tabs from '../../components/common/organisms/Tabs'
+import { Main } from '../../components/common/styled'
+import { LiberyTabs } from './tabs.config'
+import Header from '../../components/common/Layout/Header'
+
+export default function LibraryPage() {
+  return (
+    <>
+      <Header
+        title="React-Vite Template"
+        subtitle="Explore reusable components, hooks, and patterns"
+      />
+
+      <Main>
+        <Tabs items={LiberyTabs} defaultKey="overview" />
+      </Main>
+    </>
+  )
+}

src/pages/LiberyPage/tabs.config.tsx

@@ -0,0 +1,10 @@
+import type { TabItem } from '../../components/common/organisms/Tabs'
+import OverviewTab from './tabs/Overview'
+import ComponentsTab from './tabs/Components'
+import HooksTab from './tabs/Hooks'
+
+export const LiberyTabs: TabItem[] = [
+  { key: 'overview', label: 'Overview', content: <OverviewTab /> },
+  { key: 'components', label: 'Components', content: <ComponentsTab /> },
+  { key: 'hooks', label: 'Hooks', content: <HooksTab /> },
+]

src/pages/LiberyPage/tabs/Components/index.tsx

@@ -0,0 +1,5 @@
+import { Typography as T } from '../../../../core/typography'
+
+export default function ComponentsTab() {
+  return <T.BodyBase>Components content… Buttons, badges, modals…</T.BodyBase>
+}