-
-
{page}
+
+
+ {page}
)
}
-
-const NavLink = (props: LinkProps & { children: string }) => {
- const { children, ...linkProps } = props
-
- const { asPath } = useRouter()
- const active = asPath === props.href
-
- return (
-
-
- {children}
-
-
- )
-}
diff --git a/apps/website/src/pages/_app.tsx b/apps/website/src/pages/_app.tsx
index c8d00ecb..75174466 100644
--- a/apps/website/src/pages/_app.tsx
+++ b/apps/website/src/pages/_app.tsx
@@ -1,4 +1,5 @@
import '@/styles/global.css'
+import '@/styles/nav-nested-links.css'
import { Provider } from '@status-im/components'
import { Inter } from 'next/font/google'
diff --git a/apps/website/src/pages/insights/[epic].tsx b/apps/website/src/pages/insights/[epic].tsx
deleted file mode 100644
index 68a822e4..00000000
--- a/apps/website/src/pages/insights/[epic].tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { EpicOverview } from '@/components/epic-overview'
-import { TableIssues } from '@/components/table-issues'
-import { InsightsLayout } from '@/layouts/insights-layout'
-
-import type { Page } from 'next'
-
-const InsightsDetailPage: Page = () => {
- return (
- <>
-
-
-
-
-
- >
- )
-}
-
-InsightsDetailPage.getLayout = InsightsLayout
-
-export default InsightsDetailPage
diff --git a/apps/website/src/pages/insights/epics/[epic].tsx b/apps/website/src/pages/insights/epics/[epic].tsx
new file mode 100644
index 00000000..9d2cbaa7
--- /dev/null
+++ b/apps/website/src/pages/insights/epics/[epic].tsx
@@ -0,0 +1,31 @@
+import { Breadcrumbs } from '@/components'
+import { EpicOverview } from '@/components/epic-overview'
+import { TableIssues } from '@/components/table-issues'
+import { InsightsLayout } from '@/layouts/insights-layout'
+
+import type { Page } from 'next'
+
+const EpicsDetailPage: Page = () => {
+ return (
+
+ )
+}
+
+EpicsDetailPage.getLayout = InsightsLayout
+
+export default EpicsDetailPage
diff --git a/apps/website/src/pages/insights/epics/index.tsx b/apps/website/src/pages/insights/epics/index.tsx
new file mode 100644
index 00000000..ac9cc533
--- /dev/null
+++ b/apps/website/src/pages/insights/epics/index.tsx
@@ -0,0 +1,62 @@
+import { IconButton, Shadow, Tag, Text } from '@status-im/components'
+import {
+ DoneIcon,
+ NotStartedIcon,
+ OpenIcon,
+ SearchIcon,
+ SortIcon,
+} from '@status-im/icons'
+
+import { EpicOverview } from '@/components/epic-overview'
+import { InsightsLayout } from '@/layouts/insights-layout'
+
+import type { Page } from 'next'
+
+const epics = [
+ {
+ id: 1,
+ title: 'Communities protocol',
+ description: 'Support Encrypted Communities',
+ },
+ {
+ id: 5155,
+ title: 'Keycard',
+ description:
+ 'Detecting keycard reader removal for the beginning of each flow',
+ },
+]
+
+const EpicsPage: Page = () => {
+ return (
+
+
+ Epics
+
+
+
+
+
+
+
+
+
+
+ } />
+ } />
+
+
+
+
+ {epics.map(epic => (
+
+
+
+ ))}
+
+
+ )
+}
+
+EpicsPage.getLayout = InsightsLayout
+
+export default EpicsPage
diff --git a/apps/website/src/pages/insights/index.tsx b/apps/website/src/pages/insights/index.tsx
index 4a47fdea..cd883686 100644
--- a/apps/website/src/pages/insights/index.tsx
+++ b/apps/website/src/pages/insights/index.tsx
@@ -1,62 +1,16 @@
-import { IconButton, Shadow, Tag, Text } from '@status-im/components'
-import {
- DoneIcon,
- NotStartedIcon,
- OpenIcon,
- SearchIcon,
- SortIcon,
-} from '@status-im/icons'
+import { useEffect } from 'react'
-import { EpicOverview } from '@/components/epic-overview'
-import { InsightsLayout } from '@/layouts/insights-layout'
+import { useRouter } from 'next/router'
-import type { Page } from 'next'
+export default function InsightsPage() {
+ const router = useRouter()
-const epics = [
- {
- id: 1,
- title: 'Communities protocol',
- description: 'Support Encrypted Communities',
- },
- {
- id: 5155,
- title: 'Keycard',
- description:
- 'Detecting keycard reader removal for the beginning of each flow',
- },
-]
+ useEffect(() => {
+ // Redirect to the epics page if the user lands on the insights page
+ if (router.pathname === '/insights') {
+ router.replace('/insights/epics')
+ }
+ }, [router])
-const InsightsPage: Page = () => {
- return (
-
-
- Epics
-
-
-
-
-
-
-
-
-
-
- } />
- } />
-
-
-
-
- {epics.map(epic => (
-
-
-
- ))}
-
-
- )
+ return null
}
-
-InsightsPage.getLayout = InsightsLayout
-
-export default InsightsPage
diff --git a/apps/website/src/pages/insights/orphans.tsx b/apps/website/src/pages/insights/orphans.tsx
index 57d5b0d7..3a92a530 100644
--- a/apps/website/src/pages/insights/orphans.tsx
+++ b/apps/website/src/pages/insights/orphans.tsx
@@ -7,7 +7,7 @@ import type { Page } from 'next'
const OrphansPage: Page = () => {
return (
-
+
Orphans
diff --git a/apps/website/src/pages/insights/repos.tsx b/apps/website/src/pages/insights/repos.tsx
index 3c34f36a..af185535 100644
--- a/apps/website/src/pages/insights/repos.tsx
+++ b/apps/website/src/pages/insights/repos.tsx
@@ -46,7 +46,7 @@ const repos = [
const ReposPage: Page = () => {
return (
- <>
+
Repos
@@ -81,7 +81,7 @@ const ReposPage: Page = () => {
))}
- >
+
)
}
diff --git a/apps/website/src/pages/insights/workstreams/[workstream].tsx b/apps/website/src/pages/insights/workstreams/[workstream].tsx
new file mode 100644
index 00000000..996acfad
--- /dev/null
+++ b/apps/website/src/pages/insights/workstreams/[workstream].tsx
@@ -0,0 +1,31 @@
+import { Breadcrumbs } from '@/components'
+import { EpicOverview } from '@/components/epic-overview'
+import { TableIssues } from '@/components/table-issues'
+import { InsightsLayout } from '@/layouts/insights-layout'
+
+import type { Page } from 'next'
+
+const WorkstreamDetailPage: Page = () => {
+ return (
+
+ )
+}
+
+WorkstreamDetailPage.getLayout = InsightsLayout
+
+export default WorkstreamDetailPage
diff --git a/apps/website/src/pages/insights/workstreams/index.tsx b/apps/website/src/pages/insights/workstreams/index.tsx
new file mode 100644
index 00000000..063ad4a4
--- /dev/null
+++ b/apps/website/src/pages/insights/workstreams/index.tsx
@@ -0,0 +1,69 @@
+import { IconButton, Shadow, Tag, Text } from '@status-im/components'
+import {
+ DoneIcon,
+ NotStartedIcon,
+ OpenIcon,
+ SearchIcon,
+ SortIcon,
+} from '@status-im/icons'
+
+import { EpicOverview } from '@/components/epic-overview'
+import { InsightsLayout } from '@/layouts/insights-layout'
+
+import type { Page } from 'next'
+
+const workstreams = [
+ {
+ id: 1,
+ title: 'Workstream protocol',
+ description: 'Support Encrypted Communities',
+ },
+ {
+ id: 5155,
+ title: 'Work with keys',
+ description:
+ 'Detecting keycard reader removal for the beginning of each flow',
+ },
+]
+
+const WorkstreamsPage: Page = () => {
+ return (
+
+
+ Workstreams
+
+
+
+
+
+
+
+
+
+
+ } />
+ } />
+
+
+
+
+ {workstreams.map(workstream => (
+
+
+
+ ))}
+
+
+ )
+}
+
+WorkstreamsPage.getLayout = InsightsLayout
+
+export default WorkstreamsPage
diff --git a/apps/website/src/styles/nav-nested-links.css b/apps/website/src/styles/nav-nested-links.css
new file mode 100644
index 00000000..f9e9cfec
--- /dev/null
+++ b/apps/website/src/styles/nav-nested-links.css
@@ -0,0 +1,41 @@
+.accordion-trigger {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+}
+
+.accordion-content {
+ overflow: hidden;
+}
+.accordion-content[data-state='open'] {
+ animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+.accordion-content[data-state='closed'] {
+ animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.accordion-chevron {
+ transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+.accordion-trigger[data-state='open'] > .accordion-chevron {
+ transform: rotate(90deg);
+}
+
+@keyframes slideDown {
+ from {
+ height: 0;
+ }
+ to {
+ height: var(--radix-accordion-content-height);
+ }
+}
+
+@keyframes slideUp {
+ from {
+ height: var(--radix-accordion-content-height);
+ }
+ to {
+ height: 0;
+ }
+}