create

dashboard/src/components/term/GrammarRecent.tsx

@@ -0,0 +1,53 @@
+import { List } from "antd";
+
+const maxRecent = 10;
+const storeKey = "grammar-handbook/recent";
+export interface IGrammarRecent {
+  title: string;
+  description?: string;
+  word?: string;
+  wordId?: string;
+}
+
+export const pushRecent = (value: IGrammarRecent) => {
+  const old = localStorage.getItem(storeKey);
+  if (old) {
+    const newRecent = [value, ...JSON.parse(old)].slice(0, maxRecent - 1);
+    localStorage.setItem(storeKey, JSON.stringify(newRecent));
+  } else {
+    localStorage.setItem(storeKey, JSON.stringify([value]));
+  }
+};
+
+interface IWidget {
+  onClick?: Function;
+}
+const GrammarRecentWidget = ({ onClick }: IWidget) => {
+  const data = localStorage.getItem(storeKey);
+  let items: IGrammarRecent[] = [];
+  if (data) {
+    items = JSON.parse(data);
+  }
+  return (
+    <List
+      header={"最近搜索"}
+      size="small"
+      dataSource={items}
+      renderItem={(item, index) => (
+        <List.Item
+          key={index}
+          style={{ cursor: "pointer" }}
+          onClick={() => {
+            if (typeof onClick !== "undefined") {
+              onClick(item);
+            }
+          }}
+        >
+          <List.Item.Meta title={item.title} description={item.description} />
+        </List.Item>
+      )}
+    />
+  );
+};
+
+export default GrammarRecentWidget;