Shared:EmptyView Added link component

packages/shared/components/empty-view/EmptyView.styled.ts

@@ -49,6 +49,34 @@ export const EmptyViewBody = styled.div`
   gap: 8px;
 
   width: 100%;
+
+  &:has(> .ev-link) {
+    align-items: center;
+    margin-top: 2px;
+  }
+
+  .ev-link {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-wrap: nowrap;
+
+    max-width: fit-content;
+    text-decoration: none;
+
+    color: #4781d1;
+    svg {
+      color: #4781d1;
+    }
+
+    span {
+      font-weight: 600;
+      font-size: 13px;
+      line-height: 15px;
+      text-decoration: underline dotted;
+      text-underline-offset: 1px;
+    }
+  }
 `;
 
 export const EmptyViewItemWrapper = styled.div`

packages/shared/components/empty-view/EmptyView.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 import { Text } from "../text";
 
@@ -8,7 +9,17 @@ import {
   EmptyViewWrapper,
 } from "./EmptyView.styled";
 import { EmptyViewItem } from "./EmptyView.item";
-import type { EmptyViewProps } from "./EmptyView.types";
+import type {
+  EmptyViewLinkType,
+  EmptyViewOptionsType,
+  EmptyViewProps,
+} from "./EmptyView.types";
+
+const isEmptyLinkOptions = (
+  options: EmptyViewOptionsType,
+): options is EmptyViewLinkType => {
+  return typeof options === "object" && "to" in options;
+};
 
 export const EmptyView = ({
   description,
@@ -34,9 +45,16 @@ export const EmptyView = ({
         </Text>
       </EmptyViewHeader>
       <EmptyViewBody>
-        {options.map((option) => (
-          <EmptyViewItem {...option} key={option.key} />
-        ))}
+        {isEmptyLinkOptions(options) ? (
+          <Link className="ev-link" to={options.to} state={options.state}>
+            {options.icon}
+            <span>{options.description}</span>
+          </Link>
+        ) : (
+          options.map((option) => (
+            <EmptyViewItem {...option} key={option.key} />
+          ))
+        )}
       </EmptyViewBody>
     </EmptyViewWrapper>
   );

packages/shared/components/empty-view/EmptyView.types.ts

@@ -1,3 +1,12 @@
+import type { To } from "react-router-dom";
+
+export type EmptyViewLinkType = {
+  to: To;
+  state?: unknown;
+  icon: React.ReactElement;
+  description: string;
+};
+
 export type EmptyViewItemType = {
   key: React.Key;
   title: string;
@@ -8,9 +17,11 @@ export type EmptyViewItemType = {
   model?: ContextMenuModel[];
 };
 
+export type EmptyViewOptionsType = EmptyViewItemType[] | EmptyViewLinkType;
+
 export interface EmptyViewItemProps extends Omit<EmptyViewItemType, "key"> {}
 
 export interface EmptyViewProps
-  extends Omit<EmptyViewItemType, "key" | "onClick" | "disabled"> {
-  options: EmptyViewItemType[];
+  extends Omit<EmptyViewItemType, "key" | "onClick" | "disabled" | "model"> {
+  options: EmptyViewOptionsType;
 }

packages/shared/components/empty-view/index.ts

@@ -1,2 +1,6 @@
 export { EmptyView } from "./EmptyView";
-export type { EmptyViewItemType } from "./EmptyView.types";
+export type {
+  EmptyViewItemType,
+  EmptyViewLinkType,
+  EmptyViewOptionsType,
+} from "./EmptyView.types";