place pattern library basic layout.

src/page-components/pattern-library/PatternDetail.module.css

@@ -0,0 +1,7 @@
+@layer pages {
+  .pattern_detail {
+    flex: 2;
+    border-radius: calc(var(--border-radius) * 2);
+    background-color: var(--color-dark-surface-container);
+  }
+}

src/page-components/pattern-library/PatternDetail.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import styles from './PatternDetail.module.css';
+
+const PatternDetail: FC = () => {
+  return <div className={styles.pattern_detail}></div>;
+};
+
+export default PatternDetail;

src/page-components/pattern-library/Patterns.module.css

@@ -0,0 +1,10 @@
+@layer pages {
+  .pattern_list {
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    flex: 1;
+    border-radius: calc(var(--border-radius) * 2);
+    background-color: var(--color-dark-surface-container);
+  }
+}

src/page-components/pattern-library/Patterns.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ScrollArea } from '../../components/ScrollArea';
+import styles from './Patterns.module.css';
+
+const Patterns: FC = () => {
+  return (
+    <div className={styles.pattern_list}>
+      <ScrollArea enableY></ScrollArea>
+    </div>
+  );
+};
+
+export default Patterns;

src/pages/PatternLibrary.tsx

@@ -1,7 +1,14 @@
 import { FC } from 'react';
+import PatternDetail from '../page-components/pattern-library/PatternDetail';
+import Patterns from '../page-components/pattern-library/Patterns';
 
 const PatternLibrary: FC = () => {
-  return <div className="workspace"></div>;
+  return (
+    <div className="workspace horizontal">
+      <Patterns />
+      <PatternDetail />
+    </div>
+  );
 };
 
 export default PatternLibrary;