Merge pull request #116 from kloudlite/frontend/banner

Frontend/banner

src/apps/console/components/icons.tsx

@@ -13,6 +13,10 @@ import {
   ChevronRight,
   X,
   SmileySad,
+  InfoFill,
+  CheckCircleFill,
+  WarningFill,
+  WarningOctagonFill,
 } from '@jengaicons/react';
 
 export {
@@ -30,4 +34,8 @@ export {
   ChevronRight,
   X,
   SmileySad,
+  InfoFill,
+  CheckCircleFill,
+  WarningFill,
+  WarningOctagonFill,
 };

src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/handle-router.tsx

@@ -21,6 +21,7 @@ import Select from '~/components/atoms/select';
 import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
 import { useAppend, useMapper } from '~/components/utils';
 import { Checkbox } from '~/components/atoms/checkbox';
+import Banner from '~/components/molecule/banner';
 import { IAppContext } from '../app+/$app+/_layout';
 
 type IDialog = IDialogBase<ExtractNodeType<IRouters>>;
@@ -183,13 +184,6 @@ const Root = (props: IDialog) => {
           nameErrorLabel="isNameError"
           isUpdate={isUpdate}
         />
-
-        <div className="flex flex-col gap-md">
-          <span className="bodyMd-medium text-text-default">Cluster DNS</span>
-          <span className="bodyMd text-text-soft">
-            {cluster.spec.publicDNSHost}
-          </span>
-        </div>
         <Select
           creatable
           size="lg"
@@ -209,12 +203,24 @@ const Root = (props: IDialog) => {
           disableWhileLoading
         />
         <Checkbox
-          label="enable TLS"
+          label="Enable TLS"
           checked={values.isTlsEnabled}
           onChange={(val) => {
             handleChange('isTlsEnabled')(dummyEvent(val));
           }}
         />
+        <Banner
+          type="info"
+          body={
+            <span>
+              Note: All the domain CNames should be pointed to following Cluster
+              DNS Name{' '}
+              <span className="bodyMd-medium">
+                `{cluster.spec.publicDNSHost}`
+              </span>
+            </span>
+          }
+        />
       </Popup.Content>
       <Popup.Footer>
         <Popup.Button content="Cancel" variant="basic" closable />

src/design-system/components/molecule/banner.tsx

@@ -0,0 +1,102 @@
+import { ReactNode } from 'react';
+import {
+  CheckCircleFill,
+  InfoFill,
+  WarningFill,
+  WarningOctagonFill,
+  X,
+} from '@jengaicons/react';
+import { cn } from '../utils';
+import { IconButton } from '../atoms/button';
+
+interface IBanner {
+  type: 'default' | 'info' | 'success' | 'warning' | 'critical';
+  title?: ReactNode;
+  body?: ReactNode;
+  showclose?: boolean;
+  onClose?: () => void;
+}
+
+const getStyle = (type: IBanner['type']) => {
+  switch (type) {
+    case 'info':
+      return 'bg-surface-primary-subdued border-border-primary';
+    case 'success':
+      return 'bg-surface-success-subdued border-border-success';
+    case 'warning':
+      return 'bg-surface-warning-subdued border-border-warning';
+    case 'critical':
+      return 'bg-surface-critical-subdued border-border-critical';
+    case 'default':
+    default:
+      return 'bg-surface-basic-subdued border-border-default';
+  }
+};
+
+const Icon = ({ type }: { type: IBanner['type'] }) => {
+  const iconSize = 20;
+  switch (type) {
+    case 'info':
+      return (
+        <span className="text-text-primary">
+          <InfoFill size={iconSize} />
+        </span>
+      );
+    case 'success':
+      return (
+        <span
+          className="
+        text-text-success
+        "
+        >
+          <CheckCircleFill size={iconSize} />
+        </span>
+      );
+    case 'warning':
+      return (
+        <span className="text-text-warning">
+          <WarningFill size={iconSize} />
+        </span>
+      );
+    case 'critical':
+      return (
+        <span className="text-text-critical">
+          {' '}
+          <WarningOctagonFill size={iconSize} />
+        </span>
+      );
+    case 'default':
+    default:
+      return (
+        <span className="text-text-default">
+          <InfoFill size={iconSize} />
+        </span>
+      );
+  }
+};
+const Banner = (props: IBanner) => {
+  const { type, title, body, onClose, showclose } = props;
+  return (
+    <div
+      className={cn(
+        'p-2xl flex flex-row gap-2xl border rounded-lg text-text-default items-start',
+        getStyle(type)
+      )}
+    >
+      <span className="pt-md">
+        <Icon type={type} />
+      </span>
+      <div className="flex-1 flex flex-col gap-sm">
+        {title && <div className="headingMd">{title}</div>}
+        {body && <div className="bodyMd">{body}</div>}
+      </div>
+      {showclose && (
+        <span>
+          <IconButton icon={<X />} variant="plain" onClick={onClose} />
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Banner;