From 9177f90b51a88cb4e2ee733ed672aea71273782f Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Thu, 6 Mar 2025 14:29:52 +0800
Subject: [PATCH] add Pattern editor basic layout.

---
 src/components/PatternPreview.tsx  | 11 +++++++++++
 src/pages/PatternEditor.module.css | 10 ++++++++++
 src/pages/PatternEditor.tsx        |  7 ++++++-
 3 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 src/components/PatternPreview.tsx
 create mode 100644 src/pages/PatternEditor.module.css

diff --git a/src/components/PatternPreview.tsx b/src/components/PatternPreview.tsx
new file mode 100644
index 0000000..03d0f24
--- /dev/null
+++ b/src/components/PatternPreview.tsx
@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+const PatternPreview: FC = () => {
+  return (
+    <div>
+      <canvas />
+    </div>
+  );
+};
+
+export default PatternPreview;
diff --git a/src/pages/PatternEditor.module.css b/src/pages/PatternEditor.module.css
new file mode 100644
index 0000000..7a15b36
--- /dev/null
+++ b/src/pages/PatternEditor.module.css
@@ -0,0 +1,10 @@
+@layer pages {
+  .pattern_editor_layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+    align-items: stretch;
+    gap: calc(var(--spacing) * 4);
+  }
+}
diff --git a/src/pages/PatternEditor.tsx b/src/pages/PatternEditor.tsx
index 3a953aa..3a79c18 100644
--- a/src/pages/PatternEditor.tsx
+++ b/src/pages/PatternEditor.tsx
@@ -1,7 +1,12 @@
 import { FC } from 'react';
+import styles from './PatternEditor.module.css';
 
 const PatternEditor: FC = () => {
-  return <div className="workspace"></div>;
+  return (
+    <div className="workspace vertical">
+      <div className={styles.pattern_editor_layout}></div>
+    </div>
+  );
 };
 
 export default PatternEditor;