add empty promption to Pattern Detail.

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

@@ -3,5 +3,25 @@
     flex: 2;
     border-radius: calc(var(--border-radius) * 2);
     background-color: var(--color-surface-container);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: calc(var(--spacing) * 2);
+  }
+  .empty_promption {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    .promption {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      align-items: center;
+    }
+    .spacer {
+      flex: 3;
+    }
   }
 }

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

@@ -1,8 +1,23 @@
+import { useAtomValue } from 'jotai';
 import { FC } from 'react';
+import { CurrentPatternAtom } from '../../context/Patterns';
 import styles from './PatternDetail.module.css';
 
+const EmptyPromption: FC = () => {
+  return (
+    <div className={styles.empty_promption}>
+      <div className={styles.promption}>
+        <span className="empty_prompt">Select a pattern from left first.</span>
+      </div>
+      <div className={styles.spacer} />
+    </div>
+  );
+};
+
 const PatternDetail: FC = () => {
-  return <div className={styles.pattern_detail}></div>;
+  const currentPattern = useAtomValue(CurrentPatternAtom);
+
+  return <div className={styles.pattern_detail}>{!currentPattern && <EmptyPromption />}</div>;
 };
 
 export default PatternDetail;