+ {children}
+
+ );
+}
diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
new file mode 100644
index 00000000..f73f57ad
--- /dev/null
+++ b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -0,0 +1,104 @@
+'use client';
+
+import React, { FC, Fragment, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbList,
+ BreadcrumbLink,
+ BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+import CopyToClipboard from '../CopyToClipboard';
+import { ChevronRight } from 'lucide-react';
+
+type Component
+ {decorator && (
+
+ {decorator}
+
+ )}
+
+ );
+
+ return (
+
+
+ {'navOnClick' in item && item.navOnClick ? (
+
+ {item.title}
+
+ ) : (
+ item.title
+ )}
+
+ {shouldCopy && (
+
+
+
+ )}
+
+
+
+ );
+}
+
+CheckboxWithLabel.displayName = 'CheckboxWithLabel';
diff --git a/src/components/Checkbox/index.tsx b/src/components/Checkbox/index.tsx
new file mode 100644
index 00000000..44d64872
--- /dev/null
+++ b/src/components/Checkbox/index.tsx
@@ -0,0 +1,3 @@
+import { default as Checkbox } from './Checkbox';
+
+export default Checkbox;
diff --git a/src/components/CopyToClipboard/CopyToClipboard.tsx b/src/components/CopyToClipboard/CopyToClipboard.tsx
new file mode 100644
index 00000000..86b21543
--- /dev/null
+++ b/src/components/CopyToClipboard/CopyToClipboard.tsx
@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import { Copy, Check, Eye, EyeOff } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../ui/tooltip';
+
+export interface ClipboardProps {
+ text: string | number;
+ type?: 'visible' | 'hidden' | 'hiddenWithIcon' | 'alwaysHidden';
+ width?: number | string;
+ fontSize?: string;
+ withToolTip?: boolean;
+ iconOnly?: boolean;
+}
+
+const textVariants = cva('truncate transition-all duration-300', {
+ variants: {
+ type: {
+ visible: '',
+ hidden: 'blur-sm select-none hover:blur-0 hover:select-text',
+ hiddenWithIcon: '',
+ alwaysHidden: 'blur-sm select-none',
+ },
+ unblur: {
+ true: '!blur-0 !select-text',
+ false: '',
+ },
+ },
+ compoundVariants: [
+ {
+ type: 'hiddenWithIcon',
+ unblur: false,
+ className: 'blur-sm select-none',
+ },
+ {
+ type: 'hiddenWithIcon',
+ unblur: true,
+ className: '!blur-0 !select-text',
+ },
+ ],
+ defaultVariants: {
+ type: 'visible',
+ unblur: false,
+ },
+});
+
+const CopyToClipboard: React.FC
+ {!iconOnly && (
+
+ {withToolTip ? (
+
+
+ {text}
+
+
+
+
+ ) : (
+ text
+ )}
+
+ )}
+
+
+ );
+};
+
+export default CopyToClipboard;
diff --git a/src/components/CopyToClipboard/index.tsx b/src/components/CopyToClipboard/index.tsx
new file mode 100644
index 00000000..8bd50eac
--- /dev/null
+++ b/src/components/CopyToClipboard/index.tsx
@@ -0,0 +1,3 @@
+import { default as CopyToClipboard } from './CopyToClipboard';
+
+export default CopyToClipboard;
diff --git a/src/components/DetailStat/DetailStat.tsx b/src/components/DetailStat/DetailStat.tsx
new file mode 100644
index 00000000..f162d04d
--- /dev/null
+++ b/src/components/DetailStat/DetailStat.tsx
@@ -0,0 +1,56 @@
+import React, { isValidElement, ReactNode } from 'react';
+import StatCard from '../StatCard';
+import { cva } from 'class-variance-authority';
+
+type StatProps = {
+ title: string;
+ value: ReactNode;
+ fullWidth?: boolean;
+ lowercaseValue?: boolean;
+ capitalizeValue?: boolean;
+};
+
+const valueText = cva('font-sans font-normal text-lg leading-normal tracking-normal text-right', {
+ variants: {
+ transform: {
+ lowercase: 'lowercase',
+ capitalize: 'capitalize',
+ none: '',
+ },
+ },
+ defaultVariants: {
+ transform: 'none',
+ },
+});
+
+function formatToCypressString(input: string) {
+ return input.toLowerCase().replace(/\s+/g, '-');
+}
+
+const DetailStat: React.FC{text}
+
+ {!copied ? (
+ <>
+
+
+
+
+
+
+ Copied!
+
+
+
+ {type === 'hiddenWithIcon' &&
+ (manualUnblur ? (
+
+ )}
+
+ {value}
+
+ ) : (
+
+ {value}
+
+ );
+
+ return
+
+
+ );
+}
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
new file mode 100644
index 00000000..2dab0cb2
--- /dev/null
+++ b/src/components/Input/index.tsx
@@ -0,0 +1,3 @@
+import { default as Input } from './Input';
+
+export default Input;
diff --git a/src/components/KeyFactCard/KeyFactCard.tsx b/src/components/KeyFactCard/KeyFactCard.tsx
new file mode 100644
index 00000000..a734f0a7
--- /dev/null
+++ b/src/components/KeyFactCard/KeyFactCard.tsx
@@ -0,0 +1,17 @@
+import React, { ReactElement } from 'react';
+import StatCard from '../StatCard';
+
+type KeyFactProps = { name: string; category: string; value: string; img: ReactElement
+ {icon &&
+ {icon}
}
+ + {description} +
+ )} ++ {value} +
+ {Array.from({ length: 5 }).map((_, i) => (
+
+ ))}
+
+ );
+ }
+
+ const { problems, critical, high, medium, low } = props;
+
+ const getStatusIcon = () => {
+ if (critical >= 1) return
+
+ );
+};
+
+LagoonProblemsOverview.displayName = 'LagoonProblemsOverview';
+export default LagoonProblemsOverview;
+export type { LagoonProblemsOverviewProps };
diff --git a/src/components/ProblemsOverview/index.tsx b/src/components/ProblemsOverview/index.tsx
new file mode 100644
index 00000000..b986d08c
--- /dev/null
+++ b/src/components/ProblemsOverview/index.tsx
@@ -0,0 +1,3 @@
+import { default as ProblemsOverview } from './ProblemsOverview';
+
+export default ProblemsOverview;
diff --git a/src/components/RootLayout/RootLayout.tsx b/src/components/RootLayout/RootLayout.tsx
new file mode 100644
index 00000000..3b0c150a
--- /dev/null
+++ b/src/components/RootLayout/RootLayout.tsx
@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+import { SidebarProvider, SidebarTrigger } from '../ui/sidebar';
+import Sidenav from '../sidenav';
+import ThemeProvider from '@/providers/ThemeProvider';
+import { AppInfo, UserInfo } from '../sidenav/Sidenav';
+
+interface RootLayoutProps {
+ userInfo: UserInfo;
+ appInfo: AppInfo;
+ children: ReactNode;
+ signOutFn: () => Promise
+
+
+ {getStatusIcon()}
+
+
+
+
+
+ The summary of all the problems is shown here.
+
+
+
+ At a glance
+
+
+ {content}
+ ) : ( + <>{content} + )} +
+ {userDisplayName}
+
+
+ {logo ? logo : 
}
+
+
+ {name}
+ {version}
+
+
+ {children}
+ {children}
- ) {
}
function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
- return (
-
- );
+ return ;
}
function BreadcrumbLink({
@@ -41,11 +35,7 @@ function BreadcrumbLink({
const Comp = asChild ? Slot : 'a';
return (
-
{children}
+