Docs: Add proper playground

apps/docs/components/LoadingSpinner.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+import * as React from 'react';
+import * as stylex from '@stylexjs/stylex';
+
+const spin = stylex.keyframes({
+  '0%': { transform: 'rotate(0deg)' },
+  '100%': { transform: 'rotate(360deg)' },
+});
+
+const styles = stylex.create({
+  spinner: {
+    width: 40,
+    height: 40,
+    borderWidth: 4,
+    borderStyle: 'solid',
+    borderColor: 'var(--ifm-color-emphasis-200)',
+    borderTopColor: 'var(--ifm-color-primary)',
+    borderRadius: '50%',
+    animationName: spin,
+    animationDuration: '1s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'linear',
+  },
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: 200,
+  },
+});
+
+export default function LoadingSpinner() {
+  return (
+    <div {...stylex.props(styles.container)}>
+      <div {...stylex.props(styles.spinner)} />
+    </div>
+  );
+}

apps/docs/components/LogoDownloadModal.js

@@ -16,8 +16,8 @@ const styles = stylex.create({
     position: 'fixed',
     top: 60,
     left: 20,
-    padding: '16px',
-    borderRadius: '8px',
+    padding: 16,
+    borderRadius: 8,
     boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
     maxWidth: '16.25rem',
     maxHeight: '80vh',
@@ -39,12 +39,12 @@ const styles = stylex.create({
     color: '#FFFFFF',
   },
   section: {
-    marginBottom: '16px',
+    marginBottom: 16,
   },
   sectionTitle: {
-    fontSize: '14px',
+    fontSize: 14,
     fontWeight: 'bold',
-    marginBottom: '8px',
+    marginBottom: 8,
   },
   buttonGroup: {
     display: 'flex',
@@ -54,7 +54,8 @@ const styles = stylex.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    padding: '12px 16px',
+    paddingBlock: 12,
+    paddingInline: 16,
     cursor: 'pointer',
     backgroundColor: {
       default: 'var(--ifm-background-color)',
@@ -64,17 +65,17 @@ const styles = stylex.create({
       default: 'var(--ifm-font-color-base)',
       ':hover': '#FFFFFF',
     },
-    borderRadius: '4px',
-    fontSize: '14px',
+    borderRadius: 4,
+    fontSize: 14,
     transition: 'background-color 0.2s, color 0.2s',
     borderStyle: 'none',
     width: '100%',
-    marginBottom: '8px',
+    marginBottom: 8,
   },
   icon: {
-    marginRight: '8px',
-    width: '16px',
-    height: '16px',
+    marginRight: 8,
+    width: 16,
+    height: 16,
     fill: 'currentColor',
   },
 });