template setup 🚀

apps/studio/components/TextAlignComponent.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import {BlockDecoratorProps} from 'sanity'
+
+type TextAlignValue = 'left' | 'center' | 'right'
+interface TextAlignBlockDecoratorProps extends BlockDecoratorProps {
+  value: TextAlignValue
+}
+
+export const TextAlign = (props: TextAlignBlockDecoratorProps) => {
+  return (
+    <div
+      style={{
+        // props.value exists and is of type TextAlignValue
+        textAlign: props.value ? props.value : 'left',
+        width: '100%',
+      }}
+    >
+      {props.children}
+    </div>
+  )
+}

apps/studio/components/icons/alignment-center.tsx

@@ -0,0 +1,11 @@
+export default function AlignmentCenterIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1.875 1H10.125M3.875 4.625H8.125M1.875 8.25H10.125"
+        stroke="currentColor"
+        strokeLinecap="square"
+      />
+    </svg>
+  )
+}

apps/studio/components/icons/alignment-left.tsx

@@ -0,0 +1,11 @@
+export default function AlignmentLeftIcon() {
+  return (
+    <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.375 1H10.625M2.375 4.625H6.625M2.375 8.25H10.625"
+        stroke="currentColor"
+        strokeLinecap="square"
+      />
+    </svg>
+  )
+}

apps/studio/components/icons/alignment-right.tsx

@@ -0,0 +1,11 @@
+export default function AlignmentRightIcon() {
+  return (
+    <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.375 1H10.625M6.375 4.625H10.625M2.375 8.25H10.625"
+        stroke="currentColor"
+        strokeLinecap="square"
+      />
+    </svg>
+  )
+}