mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-09-30 00:41:09 +00:00
Add Kobalt and setup ButtonPrimary and ButtonSecondary
This commit is contained in:
parent
5d1246e46d
commit
995a6207b0
199
package-lock.json
generated
199
package-lock.json
generated
@ -1,16 +1,17 @@
|
||||
{
|
||||
"name": "primal-web-app",
|
||||
"version": "0.78.0",
|
||||
"version": "0.79.2",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "primal-web-app",
|
||||
"version": "0.78.0",
|
||||
"version": "0.79.2",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@cookbook/solid-intl": "0.1.2",
|
||||
"@jukben/emoji-search": "3.0.0",
|
||||
"@kobalte/core": "^0.11.0",
|
||||
"@picocss/pico": "1.5.10",
|
||||
"@scure/base": "1.1.3",
|
||||
"@solidjs/router": "0.8.3",
|
||||
@ -512,6 +513,28 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/core": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
|
||||
"integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
|
||||
"dependencies": {
|
||||
"@floating-ui/utils": "^0.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/dom": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
|
||||
"integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.4.2",
|
||||
"@floating-ui/utils": "^0.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/utils": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz",
|
||||
"integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA=="
|
||||
},
|
||||
"node_modules/@formatjs/cli": {
|
||||
"version": "6.1.5",
|
||||
"dev": true,
|
||||
@ -609,6 +632,31 @@
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@internationalized/date": {
|
||||
"version": "3.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.0.tgz",
|
||||
"integrity": "sha512-nw0Q+oRkizBWMioseI8+2TeUPEyopJVz5YxoYVzR0W1v+2YytiYah7s/ot35F149q/xAg4F1gT/6eTd+tsUpFQ==",
|
||||
"dependencies": {
|
||||
"@swc/helpers": "^0.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@internationalized/message": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@internationalized/message/-/message-3.1.1.tgz",
|
||||
"integrity": "sha512-ZgHxf5HAPIaR0th+w0RUD62yF6vxitjlprSxmLJ1tam7FOekqRSDELMg4Cr/DdszG5YLsp5BG3FgHgqquQZbqw==",
|
||||
"dependencies": {
|
||||
"@swc/helpers": "^0.5.0",
|
||||
"intl-messageformat": "^10.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@internationalized/number": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.2.1.tgz",
|
||||
"integrity": "sha512-hK30sfBlmB1aIe3/OwAPg9Ey0DjjXvHEiGVhNaOiBJl31G0B6wMaX8BN3ibzdlpyRNE9p7X+3EBONmxtJO9Yfg==",
|
||||
"dependencies": {
|
||||
"@swc/helpers": "^0.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.3",
|
||||
"dev": true,
|
||||
@ -663,6 +711,38 @@
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@kobalte/core": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@kobalte/core/-/core-0.11.0.tgz",
|
||||
"integrity": "sha512-KflwKawdAXv1/W1Eh88SPTwpxGTVs7bAGkkW72w6pnRI3hcFWXEH+E/9CojoFrIc3WVBUT+y7GzaYLOKCailDw==",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.5.1",
|
||||
"@internationalized/date": "^3.4.0",
|
||||
"@internationalized/message": "^3.1.1",
|
||||
"@internationalized/number": "^3.2.1",
|
||||
"@kobalte/utils": "^0.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.7.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@kobalte/utils": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@kobalte/utils/-/utils-0.9.0.tgz",
|
||||
"integrity": "sha512-TYVCpQcpqo1+0HBn3NXoGEBzxd4tH6Um1oc07nrYw1V7Qq0qbMaYAOnfBc1qhlh7sGV4XZldmb0j13Of0FrZQg==",
|
||||
"dependencies": {
|
||||
"@solid-primitives/event-listener": "^2.2.14",
|
||||
"@solid-primitives/keyed": "^1.2.0",
|
||||
"@solid-primitives/map": "^0.4.7",
|
||||
"@solid-primitives/media": "^2.2.4",
|
||||
"@solid-primitives/props": "^3.1.8",
|
||||
"@solid-primitives/refs": "^1.0.5",
|
||||
"@solid-primitives/utils": "^6.2.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.7.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@noble/ciphers": {
|
||||
"version": "0.2.0",
|
||||
"license": "MIT",
|
||||
@ -724,6 +804,113 @@
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
}
|
||||
},
|
||||
"node_modules/@solid-primitives/event-listener": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@solid-primitives/event-listener/-/event-listener-2.3.0.tgz",
|
||||
"integrity": "sha512-0DS7DQZvCExWSpurVZC9/wjI8RmkhuOtWOy6Pp1Woq9ElMT9/bfjNpkwXsOwisLpcTqh9eUs17kp7jtpWcC20w==",
|
||||
"dependencies": {
|
||||
"@solid-primitives/utils": "^6.2.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.6.12"
|
||||
}
|
||||
},
|
||||
"node_modules/@solid-primitives/keyed": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@solid-primitives/keyed/-/keyed-1.2.0.tgz",
|
||||
"integrity": "sha512-0DuTeJdxWjCTu73XnDZs24JzfXckBnpvCfQ6Mf/kTPKkMZJh7tjkBnZEk48ckrE9xmwat9stIdfrBmZctsepIw==",
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.6.12"
|
||||
}
|
||||
},
|
||||
"node_modules/@solid-primitives/map": {
|
||||
"version": "0.4.8",
|
||||
"resolved": "https://registry.npmjs.org/@solid-primitives/map/-/map-0.4.8.tgz",
|
||||
"integrity": "sha512-p9zhIaIWOQVxLaUEjg6nzrBLZUOzozJFHatdKqISSIq7iJhVXX1M1MPzDHHqKyJw/nSENoKgvZehnG3HErnamw==",
|
||||
"dependencies": {
|
||||
"@solid-primitives/trigger": "^1.0.8"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.6.12"
|
||||
}
|
||||
},
|
||||
"node_modules/@solid-primitives/media": {
|
||||
"version": "2.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@solid-primitives/media/-/media-2.2.5.tgz",
|
||||
"integrity": "sha512-wTESNFteSwOZsNIBPLMIVLuOHIIzt2AIZdaCYYxfsJIr/xjDqSomlmdFlAmxfJD3ondO7fwtWfc0rcmAvjoPCA==",
|
||||
"dependencies": {
|
||||
"@solid-primitives/event-listener": "^2.3.0",
|
||||
"@solid-primitives/rootless": "^1.4.2",
|
||||
"@solid-primitives/static-store": "^0.0.5",
|
||||
"@solid-primitives/utils": "^6.2.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.6.12"
|
||||
}
|
||||
},
|
||||
"node_modules/@solid-primitives/props": {
|
||||
"version": "3.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@solid-primitives/props/-/props-3.1.8.tgz",
|
||||
"integrity": "sha512-38ERNFhl87emUDPRlYvCmlbvEcK2mOJB38SU22YS2QXFDK7TQf/7P46XZacs7oODc/fckhfZTitht71FMEDe2g==",
|
||||
"dependencies": {
|
||||
"@solid-primitives/utils": "^6.2.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.6.12"
|
||||
}
|
||||
},
|
||||
"node_modules/@solid-primitives/refs": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@solid-primitives/refs/-/refs-1.0.5.tgz",
|
||||
"integrity": "sha512-5hmYmYbm6rs43nMHHozyyUngGA7P7q2WtlaCLJEfmlUJf67GWI1PZmqAiol6m9F37XSMZRuvZLoQ7HA/0q3GYg==",
|
||||
"dependencies": {
|
||||
"@solid-primitives/utils": "^6.2.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.6.12"
|
||||
}
|
||||
},
|
||||
"node_modules/@solid-primitives/rootless": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@solid-primitives/rootless/-/rootless-1.4.2.tgz",
|
||||
"integrity": "sha512-ynI/2aEOPyc14IKCX6yDBqnsAYCoLbaP9V/jejEWMVKOT2ZdV2ZxdftaLimOpWPpvjyti5DUJIGTOfLaNb7jlg==",
|
||||
"dependencies": {
|
||||
"@solid-primitives/utils": "^6.2.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.6.12"
|
||||
}
|
||||
},
|
||||
"node_modules/@solid-primitives/static-store": {
|
||||
"version": "0.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@solid-primitives/static-store/-/static-store-0.0.5.tgz",
|
||||
"integrity": "sha512-ssQ+s/wrlFAEE4Zw8GV499yBfvWx7SMm+ZVc11wvao4T5xg9VfXCL9Oa+x4h+vPMvSV/Knv5LrsLiUa+wlJUXQ==",
|
||||
"dependencies": {
|
||||
"@solid-primitives/utils": "^6.2.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.6.12"
|
||||
}
|
||||
},
|
||||
"node_modules/@solid-primitives/trigger": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@solid-primitives/trigger/-/trigger-1.0.8.tgz",
|
||||
"integrity": "sha512-p9e3FGhCk8sRPxDiCT8vnTE+DOEtrAnJZP4zV0NAV6YGnpV50JATVXNiLjKgyiI/mTIRkWB0+9c5SUbRlqFx6A==",
|
||||
"dependencies": {
|
||||
"@solid-primitives/utils": "^6.2.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.6.12"
|
||||
}
|
||||
},
|
||||
"node_modules/@solid-primitives/utils": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-6.2.1.tgz",
|
||||
"integrity": "sha512-TsecNzxiO5bLfzqb4OOuzfUmdOROcssuGqgh5rXMMaasoFZ3GoveUgdY1wcf17frMJM7kCNGNuK34EjErneZkg==",
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.6.12"
|
||||
}
|
||||
},
|
||||
"node_modules/@solidjs/router": {
|
||||
"version": "0.8.3",
|
||||
"license": "MIT",
|
||||
@ -731,6 +918,14 @@
|
||||
"solid-js": "^1.5.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/helpers": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
|
||||
"integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@thisbeyond/solid-select": {
|
||||
"version": "0.13.0",
|
||||
"license": "MIT",
|
||||
|
@ -23,6 +23,7 @@
|
||||
"dependencies": {
|
||||
"@cookbook/solid-intl": "0.1.2",
|
||||
"@jukben/emoji-search": "3.0.0",
|
||||
"@kobalte/core": "^0.11.0",
|
||||
"@picocss/pico": "1.5.10",
|
||||
"@scure/base": "1.1.3",
|
||||
"@solidjs/router": "0.8.3",
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { Component, createResource, lazy } from 'solid-js';
|
||||
import { Routes, Route, Navigate, RouteDataFuncArgs } from "@solidjs/router";
|
||||
|
||||
import { ComponentLog, PrimalWindow } from './types/primal';
|
||||
import { PrimalWindow } from './types/primal';
|
||||
import { fetchKnownProfiles } from './lib/profile';
|
||||
|
||||
import { useHomeContext } from './contexts/HomeContext';
|
||||
|
27
src/components/Buttons/ButtonPrimary.tsx
Normal file
27
src/components/Buttons/ButtonPrimary.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import { Component, JSXElement, Match, Show, Switch } from 'solid-js';
|
||||
import { hookForDev } from '../../lib/devTools';
|
||||
import { Button } from "@kobalte/core";
|
||||
|
||||
import styles from './Buttons.module.scss';
|
||||
|
||||
const ButtonPrimary: Component<{
|
||||
id?: string,
|
||||
onClick?: (e: MouseEvent) => void,
|
||||
children?: JSXElement,
|
||||
disabled?: boolean,
|
||||
}> = (props) => {
|
||||
return (
|
||||
<Button.Root
|
||||
id={props.id}
|
||||
class={styles.primary}
|
||||
onClick={props.onClick}
|
||||
disabled={props.disabled}
|
||||
>
|
||||
<span>
|
||||
{props.children}
|
||||
</span>
|
||||
</Button.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export default hookForDev(ButtonPrimary);
|
29
src/components/Buttons/ButtonSecondary.tsx
Normal file
29
src/components/Buttons/ButtonSecondary.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { Component, JSXElement, Match, Show, Switch } from 'solid-js';
|
||||
import { hookForDev } from '../../lib/devTools';
|
||||
import { Button } from "@kobalte/core";
|
||||
|
||||
import styles from './Buttons.module.scss';
|
||||
|
||||
const ButtonSecondary: Component<{
|
||||
id?: string,
|
||||
onClick?: (e: MouseEvent) => void,
|
||||
children?: JSXElement,
|
||||
disabled?: boolean,
|
||||
}> = (props) => {
|
||||
return (
|
||||
<Button.Root
|
||||
id={props.id}
|
||||
class={styles.secondary}
|
||||
onClick={props.onClick}
|
||||
disabled={props.disabled}
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
{props.children}
|
||||
</span>
|
||||
</div>
|
||||
</Button.Root>
|
||||
);
|
||||
}
|
||||
|
||||
export default hookForDev(ButtonSecondary);
|
36
src/components/Buttons/Buttons.module.scss
Normal file
36
src/components/Buttons/Buttons.module.scss
Normal file
@ -0,0 +1,36 @@
|
||||
.primary {
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
margin: 0px 8px;
|
||||
padding: 0px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 700;
|
||||
background: var(--brand-gradient-vertical);
|
||||
color: white;
|
||||
>span {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.secondary {
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 1px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 700;
|
||||
background: var(--brand-gradient-vertical);
|
||||
color: var(--text-tertiary-2);
|
||||
>div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
border-radius: 6px;
|
||||
background-color: var(--background-card);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user