Feature/site detail page (#99)

* site: pull data from "icons" dir

* site: display icons

* site: remove redundant code

* site: colour mode support

* site: header

* site: order imports

* site: search

* site: add toast when copying icon

* site: styling

* site: hero

* fix: disable theme toggle transitions

* feat: Use Yarn Workspaces

* refactor: Update site deploy scripts

* refactor: Remove dark mode for now

* feat: Add site title

* refactor: Fix warning and format

* feat: Add dark mode back 👀

* feat: Escape key to reset query

* Fix by aelfric

* Add Github link

* Fix #40

* Add site overlay

* sort categories

* Add detail page

* Add first categories

* add box

* move site to root directory

* fix merge issues

* Fix routing issues

* Fix icon overlay

* Add copy and download icon

* Fix style issues

* Add text

* update chakra UI

* remove import

* update dependecies

* add lucide react

* Fix bugs

* delete stats files

* update charkra version

Co-authored-by: John Letey <johnletey@gmail.com>
Co-authored-by: appmachine <appmachine@appmachines-iMac.local>

site/src/pages/icon/[iconName].tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+import IconDetailOverlay from '../../components/IconDetailOverlay'
+import { getAllData, getData } from '../../lib/icons';
+import IconOverview from '../../components/IconOverview';
+import Layout from '../../components/Layout';
+import Header from '../../components/Header';
+
+const IconPage = ({ icon, data }) => {
+  const router = useRouter()
+
+  return (
+    <Layout>
+      <IconDetailOverlay
+        icon={icon}
+        onClose={() => router.push('/')}
+      />
+      <Header {...{data}}/>
+      <IconOverview {...{data}}/>
+    </Layout>
+  )
+}
+
+export default IconPage
+
+export function getStaticProps({ params: { iconName } }) {
+  const data = getAllData();
+  const icon = getData(iconName);
+  return { props: { icon, data } }
+}
+
+export function getStaticPaths() {
+  return {
+    paths: getAllData().map(({name: iconName }) => ({
+      params: { iconName },
+    })),
+    fallback: false,
+  }
+}