@astryxdesign/cli 0.1.2 → 0.1.3-canary.102854d

package/templates/blocks/components/VStack/VStackBasic.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'VStack',
+  name: 'VStack — Basic',
+  displayName: 'VStack — Basic',
+  description:
+    'A heading and paragraphs stacked vertically with a consistent gap. Use VStack whenever siblings should flow top to bottom with even spacing.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['VStack', 'Text', 'Heading'],
+};

package/templates/blocks/components/VStack/VStackBasic.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {VStack} from '@astryxdesign/core/Layout';
+import {Text, Heading} from '@astryxdesign/core/Text';
+
+export default function VStackBasic() {
+  return (
+    <VStack gap={3}>
+      <Heading level={5}>Weekly Report</Heading>
+      <Text type="body" color="secondary">
+        VStack arranges its children in a vertical column.
+      </Text>
+      <Text type="body" color="secondary">
+        The gap prop controls the spacing between each item.
+      </Text>
+    </VStack>
+  );
+}