From 2bb0cc35f915cace52a8f4dc9801a7bf64ea2091 Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Tue, 11 Mar 2025 14:48:06 +0800
Subject: [PATCH] add empty promption to Pattern Detail.

---
 .../pattern-library/PatternDetail.module.css  | 20 +++++++++++++++++++
 .../pattern-library/PatternDetail.tsx         | 17 +++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/page-components/pattern-library/PatternDetail.module.css b/src/page-components/pattern-library/PatternDetail.module.css
index c465ca3..c87a9e9 100644
--- a/src/page-components/pattern-library/PatternDetail.module.css
+++ b/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;
+    }
   }
 }
diff --git a/src/page-components/pattern-library/PatternDetail.tsx b/src/page-components/pattern-library/PatternDetail.tsx
index 81bb3ee..d73e88c 100644
--- a/src/page-components/pattern-library/PatternDetail.tsx
+++ b/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;