feat: radial menu

.eslintrc.js

@@ -48,6 +48,7 @@ module.exports = {
         ],
       },
     ],
+    '@typescript-eslint/no-explicit-any': 'off',
     'import/no-useless-path-segments': [
       'error',
       {

gatsby-browser.js

@@ -0,0 +1,6 @@
+import '@fontsource-variable/inter';
+import '@fontsource/inter/300.css';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/700.css';

package.json

@@ -19,8 +19,11 @@
     "test:changed-since": "jest --changedSince=origin/main"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.0.20",
+    "@fontsource/inter": "^5.0.20",
     "@gatsbyjs/reach-router": "^2.0.1",
     "@radix-ui/primitive": "^1.0.1",
+    "@radix-ui/react-collection": "^1.1.0",
     "@radix-ui/react-compose-refs": "^1.0.1",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-icons": "^1.3.0",

src/components/content/radial-menu/Placeholder.tsx

@@ -0,0 +1,12 @@
+export function Placeholder() {
+  return (
+    <div
+      style={{
+        width: 10,
+        height: 10,
+        borderRadius: 999,
+        backgroundColor: 'rgba(0, 0, 0, 0.12)',
+      }}
+    />
+  );
+}