Add playground (#5359)

src/frontend/src/defaults/links.tsx

@@ -22,6 +22,7 @@ export const footerLinks = [
 export const navTabs = [
   { text: <Trans>Home</Trans>, name: 'home' },
   { text: <Trans>Dashboard</Trans>, name: 'dashboard' },
+  { text: <Trans>Playground</Trans>, name: 'playground' },
   { text: <Trans>Parts</Trans>, name: 'parts' },
   { text: <Trans>Stock</Trans>, name: 'stock' },
   { text: <Trans>Build</Trans>, name: 'build' }

src/frontend/src/defaults/menuItems.tsx

@@ -15,5 +15,11 @@ export const menuItems: MenuLinkItem[] = [
     text: <Trans>Profile page</Trans>,
     link: '/profile/user',
     doctext: <Trans>User attributes and design settings.</Trans>
+  },
+  {
+    id: 'playground',
+    text: <Trans>Playground</Trans>,
+    link: '/playground',
+    highlight: true
   }
 ];

src/frontend/src/pages/Index/Playground.tsx

@@ -0,0 +1,23 @@
+import { Trans } from '@lingui/macro';
+import { Group, Text } from '@mantine/core';
+
+import { PlaceholderPill } from '../../components/items/Placeholder';
+import { StylishText } from '../../components/items/StylishText';
+
+export default function Playground() {
+  return (
+    <>
+      <Group>
+        <StylishText>
+          <Trans>Playground</Trans>
+        </StylishText>
+        <PlaceholderPill />
+      </Group>
+      <Text>
+        <Trans>
+          This page is a showcase for the possibilities of Platform UI.
+        </Trans>
+      </Text>
+    </>
+  );
+}

src/frontend/src/router.tsx

@@ -8,6 +8,9 @@ export const LayoutComponent = Loadable(
   lazy(() => import('./components/nav/Layout'))
 );
 export const Home = Loadable(lazy(() => import('./pages/Index/Home')));
+export const Playground = Loadable(
+  lazy(() => import('./pages/Index/Playground'))
+);
 export const Parts = Loadable(lazy(() => import('./pages/Index/Part')));
 export const Stock = Loadable(lazy(() => import('./pages/Index/Stock')));
 export const Build = Loadable(lazy(() => import('./pages/Index/Build')));
@@ -52,6 +55,10 @@ export const router = createBrowserRouter(
           path: 'dashboard/',
           element: <Dashboard />
         },
+        {
+          path: 'playground/',
+          element: <Playground />
+        },
         {
           path: 'parts/',
           element: <Parts />