summaryrefslogtreecommitdiffhomepage
path: root/packages/console/app/src/component
diff options
context:
space:
mode:
Diffstat (limited to 'packages/console/app/src/component')
-rw-r--r--packages/console/app/src/component/icon.tsx103
-rw-r--r--packages/console/app/src/component/modal.css66
-rw-r--r--packages/console/app/src/component/modal.tsx24
3 files changed, 173 insertions, 20 deletions
diff --git a/packages/console/app/src/component/icon.tsx b/packages/console/app/src/component/icon.tsx
index 2b2dbe411..4d3865c87 100644
--- a/packages/console/app/src/component/icon.tsx
+++ b/packages/console/app/src/component/icon.tsx
@@ -2,26 +2,70 @@ import { JSX } from "solid-js"
export function IconLogo(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
return (
- <svg {...props} width="234" height="42" viewBox="0 0 234 42" fill="none"
- xmlns="http://www.w3.org/2000/svg">
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M54 36H36V42H30V6H54V36ZM36 30H48V12H36V30Z" fill="currentColor"/>
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M24 36H0V6H24V36ZM6 30H18V12H6V30Z" fill="currentColor"/>
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="currentColor"/>
- <path d="M108 12H96V36H90V6H108V12Z" fill="currentColor"/>
- <path d="M114 36H108V12H114V36Z" fill="currentColor"/>
- <path d="M144 12H126V30H144V36H120V6H144V12Z" fill="currentColor"/>
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M174 36H150V6H174V36ZM156 30H168V12H156V30Z" fill="currentColor"/>
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M204 36H180V6H198V0H204V36ZM186 30H198V12H186V30Z" fill="currentColor"/>
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M234 24H216V30H234V36H210V6H234V24ZM216 18H228V12H216V18Z" fill="currentColor"/>
- </svg>
-
-)
+ <svg width="64" height="32" viewBox="0 0 64 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 9.14333V4.5719H4.57143V9.14333H0Z" fill="currentColor" />
+ <path d="M4.57178 9.14333V4.5719H9.14321V9.14333H4.57178Z" fill="currentColor" />
+ <path d="M9.1438 9.14333V4.5719H13.7152V9.14333H9.1438Z" fill="currentColor" />
+ <path d="M13.7124 9.14333V4.5719H18.2838V9.14333H13.7124Z" fill="currentColor" />
+ <path d="M13.7124 13.7136V9.14221H18.2838V13.7136H13.7124Z" fill="currentColor" />
+ <path d="M0 18.2857V13.7142H4.57143V18.2857H0Z" fill="currentColor" fill-opacity="0.2" />
+ <rect width="4.57143" height="4.57143" transform="translate(4.57178 13.7141)" fill="currentColor" />
+ <path d="M4.57178 18.2855V13.7141H9.14321V18.2855H4.57178Z" fill="currentColor" fill-opacity="0.2" />
+ <path d="M9.1438 18.2855V13.7141H13.7152V18.2855H9.1438Z" fill="currentColor" />
+ <path d="M13.7156 18.2855V13.7141H18.287V18.2855H13.7156Z" fill="currentColor" fill-opacity="0.2" />
+ <rect width="4.57143" height="4.57143" transform="translate(0 18.2859)" fill="currentColor" />
+ <path d="M0 22.8572V18.2858H4.57143V22.8572H0Z" fill="currentColor" fill-opacity="0.2" />
+ <rect
+ width="4.57143"
+ height="4.57143"
+ transform="translate(4.57178 18.2859)"
+ fill="currentColor"
+ fill-opacity="0.2"
+ />
+ <path d="M4.57178 22.8573V18.2859H9.14321V22.8573H4.57178Z" fill="currentColor" />
+ <path d="M9.1438 22.8573V18.2859H13.7152V22.8573H9.1438Z" fill="currentColor" fill-opacity="0.2" />
+ <path d="M13.7156 22.8573V18.2859H18.287V22.8573H13.7156Z" fill="currentColor" fill-opacity="0.2" />
+ <path d="M0 27.4292V22.8578H4.57143V27.4292H0Z" fill="currentColor" />
+ <path d="M4.57178 27.4292V22.8578H9.14321V27.4292H4.57178Z" fill="currentColor" />
+ <path d="M9.1438 27.4276V22.8562H13.7152V27.4276H9.1438Z" fill="currentColor" />
+ <path d="M13.7124 27.4292V22.8578H18.2838V27.4292H13.7124Z" fill="currentColor" />
+ <path d="M22.8572 9.14333V4.5719H27.4286V9.14333H22.8572Z" fill="currentColor" />
+ <path d="M27.426 9.14333V4.5719H31.9975V9.14333H27.426Z" fill="currentColor" />
+ <path d="M32.001 9.14333V4.5719H36.5724V9.14333H32.001Z" fill="currentColor" />
+ <path d="M36.5698 9.14333V4.5719H41.1413V9.14333H36.5698Z" fill="currentColor" />
+ <path d="M22.8572 13.7152V9.1438H27.4286V13.7152H22.8572Z" fill="currentColor" />
+ <path d="M36.5698 13.7152V9.1438H41.1413V13.7152H36.5698Z" fill="currentColor" />
+ <path d="M22.8572 18.2855V13.7141H27.4286V18.2855H22.8572Z" fill="currentColor" />
+ <path d="M27.4292 18.2855V13.7141H32.0006V18.2855H27.4292Z" fill="currentColor" />
+ <path d="M32.001 18.2855V13.7141H36.5724V18.2855H32.001Z" fill="currentColor" />
+ <path d="M36.5698 18.2855V13.7141H41.1413V18.2855H36.5698Z" fill="currentColor" />
+ <path d="M22.8572 22.8573V18.2859H27.4286V22.8573H22.8572Z" fill="currentColor" />
+ <path d="M27.4292 22.8573V18.2859H32.0006V22.8573H27.4292Z" fill="currentColor" fill-opacity="0.2" />
+ <path d="M32.001 22.8573V18.2859H36.5724V22.8573H32.001Z" fill="currentColor" fill-opacity="0.2" />
+ <path d="M36.5698 22.8573V18.2859H41.1413V22.8573H36.5698Z" fill="currentColor" fill-opacity="0.2" />
+ <path d="M22.8572 27.4292V22.8578H27.4286V27.4292H22.8572Z" fill="currentColor" />
+ <path d="M27.4292 27.4276V22.8562H32.0006V27.4276H27.4292Z" fill="currentColor" />
+ <path d="M32.001 27.4276V22.8562H36.5724V27.4276H32.001Z" fill="currentColor" />
+ <path d="M36.5698 27.4292V22.8578H41.1413V27.4292H36.5698Z" fill="currentColor" />
+ <path d="M45.7144 9.14333V4.5719H50.2858V9.14333H45.7144Z" fill="currentColor" />
+ <path d="M50.2861 9.14333V4.5719H54.8576V9.14333H50.2861Z" fill="currentColor" />
+ <path d="M54.855 9.14333V4.5719H59.4264V9.14333H54.855Z" fill="currentColor" />
+ <path d="M45.7144 13.7136V9.14221H50.2858V13.7136H45.7144Z" fill="currentColor" />
+ <path d="M59.4299 13.7152V9.1438H64.0014V13.7152H59.4299Z" fill="currentColor" />
+ <path d="M45.7144 18.2855V13.7141H50.2858V18.2855H45.7144Z" fill="currentColor" />
+ <path d="M50.2861 18.2857V13.7142H54.8576V18.2857H50.2861Z" fill="currentColor" fill-opacity="0.2" />
+ <path d="M54.8579 18.2855V13.7141H59.4293V18.2855H54.8579Z" fill="currentColor" fill-opacity="0.2" />
+ <path d="M59.4299 18.2855V13.7141H64.0014V18.2855H59.4299Z" fill="currentColor" />
+ <path d="M45.7144 22.8573V18.2859H50.2858V22.8573H45.7144Z" fill="currentColor" />
+ <path d="M50.2861 22.8572V18.2858H54.8576V22.8572H50.2861Z" fill="currentColor" fill-opacity="0.2" />
+ <path d="M54.8579 22.8573V18.2859H59.4293V22.8573H54.8579Z" fill="currentColor" fill-opacity="0.2" />
+ <path d="M59.4299 22.8573V18.2859H64.0014V22.8573H59.4299Z" fill="currentColor" />
+ <path d="M45.7144 27.4292V22.8578H50.2858V27.4292H45.7144Z" fill="currentColor" />
+ <path d="M50.2861 27.4286V22.8572H54.8576V27.4286H50.2861Z" fill="currentColor" fill-opacity="0.2" />
+ <path d="M54.8579 27.4285V22.8571H59.4293V27.4285H54.8579Z" fill="currentColor" fill-opacity="0.2" />
+ <path d="M59.4299 27.4292V22.8578H64.0014V27.4292H59.4299Z" fill="currentColor" />
+ </svg>
+ )
}
export function IconCopy(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
@@ -55,3 +99,22 @@ export function IconCreditCard(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
</svg>
)
}
+
+export function IconChevron(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+ return (
+ <svg {...props} width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ fill="currentColor"
+ d="M4.00024 5.04041L7.37401 1.66663L6.66691 0.959525L4.00024 3.62619L1.33357 0.959525L0.626465 1.66663L4.00024 5.04041Z"
+ />
+ </svg>
+ )
+}
+
+export function IconWorkspaceLogo(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+ return (
+ <svg {...props} width="24" height="30" viewBox="0 0 24 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M18 6H6V24H18V6ZM24 30H0V0H24V30Z" fill="currentColor" />
+ </svg>
+ )
+}
diff --git a/packages/console/app/src/component/modal.css b/packages/console/app/src/component/modal.css
new file mode 100644
index 000000000..23b6831c9
--- /dev/null
+++ b/packages/console/app/src/component/modal.css
@@ -0,0 +1,66 @@
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes slideUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+[data-component="modal"][data-slot="overlay"] {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 9999;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(0, 0, 0, 0.5);
+ animation: fadeIn 0.2s ease;
+
+ @media (prefers-color-scheme: dark) {
+ background-color: rgba(0, 0, 0, 0.7);
+ }
+
+ [data-slot="content"] {
+ background-color: var(--color-bg);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius-md);
+ padding: var(--space-6);
+ min-width: 400px;
+ max-width: 90vw;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+ animation: slideUp 0.2s ease;
+
+ @media (max-width: 30rem) {
+ min-width: 300px;
+ padding: var(--space-4);
+ }
+
+ @media (prefers-color-scheme: dark) {
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+ }
+ }
+
+ [data-slot="title"] {
+ margin: 0 0 var(--space-4) 0;
+ font-size: var(--font-size-lg);
+ font-weight: 600;
+ color: var(--color-text);
+ }
+} \ No newline at end of file
diff --git a/packages/console/app/src/component/modal.tsx b/packages/console/app/src/component/modal.tsx
new file mode 100644
index 000000000..d6dc8a3de
--- /dev/null
+++ b/packages/console/app/src/component/modal.tsx
@@ -0,0 +1,24 @@
+import { JSX, Show } from "solid-js"
+import "./modal.css"
+
+interface ModalProps {
+ open: boolean
+ onClose: () => void
+ title?: string
+ children: JSX.Element
+}
+
+export function Modal(props: ModalProps) {
+ return (
+ <Show when={props.open}>
+ <div data-component="modal" data-slot="overlay" onClick={props.onClose}>
+ <div data-slot="content" onClick={(e) => e.stopPropagation()}>
+ <Show when={props.title}>
+ <h2 data-slot="title">{props.title}</h2>
+ </Show>
+ {props.children}
+ </div>
+ </div>
+ </Show>
+ )
+}
generated by cgit v1.2.3 (git 2.39.1) at 2026-07-04 08:13:13 +0000