diff --git a/package.json b/package.json
index ddae80f..90b46ed 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
"typescript": "5.1.6"
},
"devDependencies": {
- "@pandacss/dev": "^0.11.1",
+ "@pandacss/dev": "^0.16.0",
"prettier": "^3.0.2"
}
}
diff --git a/panda.config.ts b/panda.config.ts
index ab8ac66..3a5dd27 100644
--- a/panda.config.ts
+++ b/panda.config.ts
@@ -16,6 +16,65 @@ export default defineConfig({
jsxStyleProps: "none",
+ utilities: {
+ displayFlex: {
+ className: "flex",
+ values: ["column", "row", "start"],
+ transform(value) {
+ return {
+ display: "flex",
+ flexDirection: value,
+ };
+ },
+ },
+ paddingX: {
+ className: "padding-x",
+ values: "spacing",
+ transform(value: string) {
+ return {
+ paddingLeft: value,
+ paddingRight: value,
+ };
+ },
+ },
+ paddingY: {
+ className: "padding-y",
+ values: "spacing",
+ transform(value: string) {
+ return {
+ paddingTop: value,
+ paddingBottom: value,
+ };
+ },
+ },
+ inputBorder: {
+ className: "input-border",
+ values: { type: "boolean" },
+ transform(value: boolean, { token }) {
+ if (!value) return {};
+
+ return {
+ borderWidth: "1px",
+ borderColor: token("colors.borders.normal"),
+ borderStyle: "solid",
+ borderRadius: token("radii.input"),
+ outline: "none",
+ transition: `border-color ${token("durations.fast")}`,
+
+ "&:not([disabled])": {
+ "&:hover:not(:focus)": {
+ borderColor: token("colors.borders.hover"),
+ },
+
+ "&:focus": {
+ borderColor: token("colors.borders.focus"),
+ },
+ },
+ };
+ },
+ },
+ },
+
// Useful for theme customization
theme: {
extend: {
@@ -27,6 +86,22 @@ export default defineConfig({
lineHeight: "1.2",
},
},
+ button: {
+ description: "Button text",
+ value: {
+ fontSize: "sm",
+ lineHeight: "1.2",
+ fontWeight: "500",
+ },
+ },
+ medium: {
+ description: "Medium text",
+ value: {
+ fontSize: "md",
+ lineHeight: "1.2",
+ fontWeight: "500",
+ },
+ },
hero: {
description: "Hero text",
value: {
@@ -37,6 +112,15 @@ export default defineConfig({
},
},
tokens: {
+ durations: {
+ fast: { value: "150ms" },
+ normal: { value: "300ms" },
+ },
+ radii: {
+ input: {
+ value: "{radii.lg}",
+ },
+ },
spacing: {
paddingToMaxWidth: {
value: "3rem",
@@ -56,6 +140,30 @@ export default defineConfig({
},
},
colors: {
+ grey: {
+ 200: { value: "#EEEEEE" },
+ },
+ buttons: {
+ primary: { value: "#7A97FF" },
+ danger: { value: "#FF6868" },
+ },
+ input: {
+ bg: {
+ value: "#fff",
+ },
+ placeholder: {
+ value: "#ACACAC",
+ },
+ },
+ borders: {
+ normal: { value: "#BCC5C0" },
+ hover: { value: "#707070" },
+ focus: { value: "black" },
+ },
+ text: {
+ primary: { value: "#343434" },
+ secondary: { value: "#535353" },
+ },
neutral: {
100: { value: "#F4F8F6" },
200: { value: "#D9DFDB" },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f6b827a..dd0771e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,8 +38,8 @@ dependencies:
devDependencies:
'@pandacss/dev':
- specifier: ^0.11.1
- version: 0.11.1(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6)
+ specifier: ^0.16.0
+ version: 0.16.0(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6)
prettier:
specifier: ^3.0.2
version: 3.0.2
@@ -414,6 +414,23 @@ packages:
'@babel/helper-validator-identifier': 7.22.5
to-fast-properties: 2.0.0
+ /@clack/core@0.3.3:
+ resolution: {integrity: sha512-5ZGyb75BUBjlll6eOa1m/IZBxwk91dooBWhPSL67sWcLS0zt9SnswRL0l26TVdBhb0wnWORRxUn//uH6n4z7+A==}
+ dependencies:
+ picocolors: 1.0.0
+ sisteransi: 1.0.5
+ dev: true
+
+ /@clack/prompts@0.6.3:
+ resolution: {integrity: sha512-AM+kFmAHawpUQv2q9+mcB6jLKxXGjgu/r2EQjEwujgpCdzrST6BJqYw00GRn56/L/Izw5U7ImoLmy00X/r80Pw==}
+ dependencies:
+ '@clack/core': 0.3.3
+ picocolors: 1.0.0
+ sisteransi: 1.0.5
+ dev: true
+ bundledDependencies:
+ - is-unicode-supported
+
/@emmetio/abbreviation@2.3.3:
resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==}
dependencies:
@@ -1055,29 +1072,29 @@ packages:
'@nodelib/fs.scandir': 2.1.5
fastq: 1.15.0
- /@pandacss/config@0.11.1:
- resolution: {integrity: sha512-yzBLfYgd64OawAfMPj9xZXsYVGa1hJyBUuxvpOg8amuEwtoLJKUflEeuRlIDtS5n0o3Y3/09SfBgDGHakF7Rmg==}
+ /@pandacss/config@0.16.0:
+ resolution: {integrity: sha512-Be610sA7/UsOyCFgLQDzkjhhPqkTyPtky6fc1UKEyCnE6IXEeSeIJ55XzM30GpF38NcrqBX29ncfIYZLHMXGiA==}
dependencies:
- '@pandacss/error': 0.11.1
- '@pandacss/logger': 0.11.1
- '@pandacss/preset-base': 0.11.1
- '@pandacss/preset-panda': 0.11.1
- '@pandacss/types': 0.11.1
+ '@pandacss/error': 0.16.0
+ '@pandacss/logger': 0.16.0
+ '@pandacss/preset-base': 0.16.0
+ '@pandacss/preset-panda': 0.16.0
+ '@pandacss/types': 0.16.0
bundle-n-require: 1.0.1
escalade: 3.1.1
jiti: 1.19.3
merge-anything: 5.1.7
- typescript: 5.1.6
+ typescript: 5.2.2
dev: true
- /@pandacss/core@0.11.1:
- resolution: {integrity: sha512-Noh27KZMEKg+Y9X71J1wKRfeJKLzl5GSiRhNkOJqVb+nELabdnHAJD0YzFr+wLLeDxG5HBuilTaldnmD7Xn0oQ==}
+ /@pandacss/core@0.16.0:
+ resolution: {integrity: sha512-eILsUAQ1LTjwlPpb0+xK5/wbDBW2Jk+qvqY9awV8zA5tXUV43cLMj9wEnU05lB3ZWEL6pkEQEk1dQi9/zjp7vg==}
dependencies:
- '@pandacss/error': 0.11.1
- '@pandacss/logger': 0.11.1
- '@pandacss/shared': 0.11.1
- '@pandacss/token-dictionary': 0.11.1
- '@pandacss/types': 0.11.1
+ '@pandacss/error': 0.16.0
+ '@pandacss/logger': 0.16.0
+ '@pandacss/shared': 0.16.0
+ '@pandacss/token-dictionary': 0.16.0
+ '@pandacss/types': 0.16.0
autoprefixer: 10.4.15(postcss@8.4.27)
hookable: 5.5.3
lodash.merge: 4.6.2
@@ -1085,26 +1102,28 @@ packages:
postcss-discard-duplicates: 6.0.0(postcss@8.4.27)
postcss-discard-empty: 6.0.0(postcss@8.4.27)
postcss-merge-rules: 6.0.1(postcss@8.4.27)
+ postcss-minify-selectors: 6.0.0(postcss@8.4.27)
postcss-nested: 6.0.1(postcss@8.4.27)
postcss-normalize-whitespace: 6.0.0(postcss@8.4.27)
postcss-selector-parser: 6.0.13
- ts-pattern: 5.0.4
+ ts-pattern: 5.0.5
dev: true
- /@pandacss/dev@0.11.1(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6):
- resolution: {integrity: sha512-2MrW9ML1Q1FeCrtP6DqLN6ij1Ccf+14x0Pi2WjwCoi/k6KfuYIYEw8ZIokEd64LNlnqALwpDmrzUxHCJICurYw==}
+ /@pandacss/dev@0.16.0(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6):
+ resolution: {integrity: sha512-LCDLM9zlq61NPAPeD14qk9ri3flUJY8WyihTPyFb93C5tkYTQY+l7xk1NyrtBwEc48/5NDg17wNPeCgv6KvSVQ==}
hasBin: true
dependencies:
- '@pandacss/config': 0.11.1
- '@pandacss/error': 0.11.1
- '@pandacss/logger': 0.11.1
- '@pandacss/node': 0.11.1(typescript@5.1.6)
- '@pandacss/postcss': 0.11.1(typescript@5.1.6)
- '@pandacss/preset-panda': 0.11.1
- '@pandacss/shared': 0.11.1
- '@pandacss/studio': 0.11.1(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6)
- '@pandacss/token-dictionary': 0.11.1
- '@pandacss/types': 0.11.1
+ '@clack/prompts': 0.6.3
+ '@pandacss/config': 0.16.0
+ '@pandacss/error': 0.16.0
+ '@pandacss/logger': 0.16.0
+ '@pandacss/node': 0.16.0(typescript@5.1.6)
+ '@pandacss/postcss': 0.16.0(typescript@5.1.6)
+ '@pandacss/preset-panda': 0.16.0
+ '@pandacss/shared': 0.16.0
+ '@pandacss/studio': 0.16.0(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6)
+ '@pandacss/token-dictionary': 0.16.0
+ '@pandacss/types': 0.16.0
cac: 6.7.14
pathe: 1.1.1
perfect-debounce: 1.0.0
@@ -1125,64 +1144,64 @@ packages:
- typescript
dev: true
- /@pandacss/error@0.11.1:
- resolution: {integrity: sha512-BGJYI6EGrz8IL2UI9St3bJdcSDxkQ2YcSaqg1lA6FHgwoqpKy6GKWbX/OGBFeDPk1aXhjmD+IObGCFjdaELC0A==}
+ /@pandacss/error@0.16.0:
+ resolution: {integrity: sha512-Nj/WNREKELsv4CoexswacWsz1hSwH70kErgGnsprR6DVPje+wKQKoF3YMhW0NdKqscKO0I7wHa501z9JBnOx9Q==}
dev: true
- /@pandacss/extractor@0.11.1(typescript@5.1.6):
- resolution: {integrity: sha512-n8VFRehmnTfeODvZ7nsZVDu/Di5sRTDJDNrHLM8e0s5d3MNQA0BH8txSF4+/a77v0S6HWKwQ7t/KsA8YbEP9NA==}
+ /@pandacss/extractor@0.16.0(typescript@5.1.6):
+ resolution: {integrity: sha512-WXDHNhjNqjzCEGVjcsy3/T8i+mJ50XWwXAE+2gJ5UEvtMw5ghFEnLbrBsxGfnRF6GCkwoERJzDI5APCgHZUD5Q==}
dependencies:
lil-fp: 1.4.5
ts-evaluator: 1.2.0(typescript@5.1.6)
ts-morph: 19.0.0
- ts-pattern: 5.0.4
+ ts-pattern: 5.0.5
transitivePeerDependencies:
- jsdom
- typescript
dev: true
- /@pandacss/generator@0.11.1:
- resolution: {integrity: sha512-YS+CA2UMbMURWyxV2ddXUk5BrTXFjMwdM/EQX+b/smiEgx1uv8Nk95K0B77n3hRB3xi836EZBydvWHwhQX72dQ==}
+ /@pandacss/generator@0.16.0:
+ resolution: {integrity: sha512-bEtVvbtR3DFzwO6sWSG53Sb72TX+4OQrXJoJtoHly9+YlYKpas0hPkQtuh7M712p3gJyYBXfPCm81Pvg5uzvaw==}
dependencies:
- '@pandacss/core': 0.11.1
- '@pandacss/is-valid-prop': 0.11.1
- '@pandacss/logger': 0.11.1
- '@pandacss/shared': 0.11.1
- '@pandacss/token-dictionary': 0.11.1
- '@pandacss/types': 0.11.1
+ '@pandacss/core': 0.16.0
+ '@pandacss/is-valid-prop': 0.16.0
+ '@pandacss/logger': 0.16.0
+ '@pandacss/shared': 0.16.0
+ '@pandacss/token-dictionary': 0.16.0
+ '@pandacss/types': 0.16.0
javascript-stringify: 2.1.0
lil-fp: 1.4.5
outdent: 0.8.0
pluralize: 8.0.0
postcss: 8.4.27
- ts-pattern: 5.0.4
+ ts-pattern: 5.0.5
dev: true
- /@pandacss/is-valid-prop@0.11.1:
- resolution: {integrity: sha512-os3y8wlvPWBhg3Hufz3TyEfXgLX+hLwp76et7x3Ov9j6I0zj+S48EWsWiLvwUlJH1MKe/zoLijjCKXw/tguo3A==}
+ /@pandacss/is-valid-prop@0.16.0:
+ resolution: {integrity: sha512-r9vNdupeQNbXnHiCNw96Aj8sMBRhEEzWlubKChSl0oziT3VfccAGR++7pAgsHA6l/UPjs2aLzhUw225sHHIgFg==}
dev: true
- /@pandacss/logger@0.11.1:
- resolution: {integrity: sha512-qHeC65BJDLFHCSl6wOSEZTSLIb0J3LjaBKK6L9OyQlLvJ7/BMwaH1M4JSEFHPhTYnYISuv1MaEpsvSeszI5Zwg==}
+ /@pandacss/logger@0.16.0:
+ resolution: {integrity: sha512-PfDRSsnFAH4qjZGOQuySpdiQu1vgoVIPEEG9B0HXWkcm4bWEsFC+N4DgO3m/OMDCEL7SkYvOPFpblAz/TwRYTw==}
dependencies:
kleur: 4.1.5
lil-fp: 1.4.5
dev: true
- /@pandacss/node@0.11.1(typescript@5.1.6):
- resolution: {integrity: sha512-Qpkn3CHcEF3ERYkCx1akQWaDZckKO70g6I0TDGJJzTX9X0AoruonYblLJCLyb1dsm1AzPYoRggJSIygjnc2MVA==}
- dependencies:
- '@pandacss/config': 0.11.1
- '@pandacss/core': 0.11.1
- '@pandacss/error': 0.11.1
- '@pandacss/extractor': 0.11.1(typescript@5.1.6)
- '@pandacss/generator': 0.11.1
- '@pandacss/is-valid-prop': 0.11.1
- '@pandacss/logger': 0.11.1
- '@pandacss/parser': 0.11.1(typescript@5.1.6)
- '@pandacss/shared': 0.11.1
- '@pandacss/token-dictionary': 0.11.1
- '@pandacss/types': 0.11.1
+ /@pandacss/node@0.16.0(typescript@5.1.6):
+ resolution: {integrity: sha512-pqTDEvg9fS8ixynx6evplBYUI96Z4gfI8fQMgg1MjVxS0GzuzGaMdMu1664bT8/oSvAwe3ttx3ztBFubXUqUxA==}
+ dependencies:
+ '@pandacss/config': 0.16.0
+ '@pandacss/core': 0.16.0
+ '@pandacss/error': 0.16.0
+ '@pandacss/extractor': 0.16.0(typescript@5.1.6)
+ '@pandacss/generator': 0.16.0
+ '@pandacss/is-valid-prop': 0.16.0
+ '@pandacss/logger': 0.16.0
+ '@pandacss/parser': 0.16.0(typescript@5.1.6)
+ '@pandacss/shared': 0.16.0
+ '@pandacss/token-dictionary': 0.16.0
+ '@pandacss/types': 0.16.0
chokidar: 3.5.3
fast-glob: 3.3.1
file-size: 1.0.0
@@ -1201,74 +1220,74 @@ packages:
postcss: 8.4.27
preferred-pm: 3.0.3
ts-morph: 19.0.0
- ts-pattern: 5.0.4
+ ts-pattern: 5.0.5
tsconfck: 2.1.2(typescript@5.1.6)
transitivePeerDependencies:
- jsdom
- typescript
dev: true
- /@pandacss/parser@0.11.1(typescript@5.1.6):
- resolution: {integrity: sha512-m3Hk8fJlQ31IOOATF3rkRxskDzb2VaOIisTcwsBbz44TG2HWfaRuI5ogBPY8soEoVUd0gho9sxFpgrm0WjlvFA==}
+ /@pandacss/parser@0.16.0(typescript@5.1.6):
+ resolution: {integrity: sha512-ldM7qUAVJt7AENwPYVtG252x6FWwhcYPRGYLRJAX6dMRC0Zkypnq3q5rkYuPYfvaueJsBfQTI9hlwZCoU+QCZA==}
dependencies:
- '@pandacss/config': 0.11.1
- '@pandacss/extractor': 0.11.1(typescript@5.1.6)
- '@pandacss/is-valid-prop': 0.11.1
- '@pandacss/logger': 0.11.1
- '@pandacss/shared': 0.11.1
- '@pandacss/types': 0.11.1
+ '@pandacss/config': 0.16.0
+ '@pandacss/extractor': 0.16.0(typescript@5.1.6)
+ '@pandacss/is-valid-prop': 0.16.0
+ '@pandacss/logger': 0.16.0
+ '@pandacss/shared': 0.16.0
+ '@pandacss/types': 0.16.0
'@vue/compiler-sfc': 3.3.4
lil-fp: 1.4.5
magic-string: 0.30.3
ts-morph: 19.0.0
- ts-pattern: 5.0.4
+ ts-pattern: 5.0.5
transitivePeerDependencies:
- jsdom
- typescript
dev: true
- /@pandacss/postcss@0.11.1(typescript@5.1.6):
- resolution: {integrity: sha512-T8i2nX2F4cnW+fafQ0y/supKP0v3fwRctvuZTa/5Rr1SMNF7c7uqyWZcERfCH2AppVixsspKLVEixeu+UC2/wQ==}
+ /@pandacss/postcss@0.16.0(typescript@5.1.6):
+ resolution: {integrity: sha512-diY9dMD4LcL9VnUJJr7Odb+d/8MN2UDeiTquZCkE2hfRcAFjasUikv81KrofzKYHayBaYKQN9dT2Xbh+cVCE3w==}
dependencies:
- '@pandacss/node': 0.11.1(typescript@5.1.6)
+ '@pandacss/node': 0.16.0(typescript@5.1.6)
postcss: 8.4.28
transitivePeerDependencies:
- jsdom
- typescript
dev: true
- /@pandacss/preset-base@0.11.1:
- resolution: {integrity: sha512-dOXjXInLLwQFtTqvfzLKas+zBSATjRdu7stPLUjsQAlCyZyhUqByFZAiyQ6I9tyKP4+YQwbQZzMm+UtrmAokvA==}
+ /@pandacss/preset-base@0.16.0:
+ resolution: {integrity: sha512-NgWKha0eHzTUF8P1+g4XayTI7vDEESNHRl9NxFEJYZaF4wlC6hJfd8aXnRTmm6dK7qFIOwmRokss5WfN3tpSXw==}
dependencies:
- '@pandacss/types': 0.11.1
+ '@pandacss/types': 0.16.0
dev: true
- /@pandacss/preset-panda@0.11.1:
- resolution: {integrity: sha512-ZaX9DQAP87FDgXrou4S9RUh9fAby4fDuWt3pMwvtjqTJEBgwPgPdJaVv7bg3jwRYm2UjaAtw92NRSXj6yUAIdg==}
+ /@pandacss/preset-panda@0.16.0:
+ resolution: {integrity: sha512-rxgChw/8m7vEE+ffoRs72JE20XKtV7Bv+ANmtQnYM0lw0hRzj37ZBO7Rq5Of6J7cFalgXfWSj1FChinlsk0uSA==}
dependencies:
- '@pandacss/types': 0.11.1
+ '@pandacss/types': 0.16.0
dev: true
- /@pandacss/shared@0.11.1:
- resolution: {integrity: sha512-g4mnSEXON9xv7SiSdHD2Q71F11NKDXIGhtuFegL9tVxdnuvQEXJh52qQmCA4XhPKdHNovwcsA0+GdryIJir0WA==}
+ /@pandacss/shared@0.16.0:
+ resolution: {integrity: sha512-kWqAzEDVIJ2KjizJMLoDQqU21y0pyOVF3zWfxfrzwrG7Y0BzHrm/9Rk0rSoI3+33z0GqFc4/UMbKuFI1qIl4Wg==}
dev: true
- /@pandacss/studio@0.11.1(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6):
- resolution: {integrity: sha512-fKHr2YbSTJJS9z1hhfmQ58hhkqcRGkbE95EHbl4vA+O9ABdZqqD/Zw6Aw5ttqCKv/DmlipEN1e9LBTZIUFMPMQ==}
+ /@pandacss/studio@0.16.0(@internationalized/date@3.4.0)(@types/node@20.5.1)(@types/react-dom@18.2.7)(@types/react@18.2.20)(typescript@5.1.6):
+ resolution: {integrity: sha512-XadiHCXDCzkfGvnY64SEgcEBPW9x3FHsyI/0XMFzr0t1vZ4MRszQ6szMb0lb60PzSKuNI0VNlcbHelsHHOwcrw==}
dependencies:
'@ark-ui/react': 0.9.0(@internationalized/date@3.4.0)(react-dom@18.2.0)(react@18.2.0)
'@astrojs/react': 2.2.1(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
- '@pandacss/config': 0.11.1
- '@pandacss/logger': 0.11.1
- '@pandacss/node': 0.11.1(typescript@5.1.6)
- '@pandacss/shared': 0.11.1
- '@pandacss/token-dictionary': 0.11.1
- '@pandacss/types': 0.11.1
+ '@pandacss/config': 0.16.0
+ '@pandacss/logger': 0.16.0
+ '@pandacss/node': 0.16.0(typescript@5.1.6)
+ '@pandacss/shared': 0.16.0
+ '@pandacss/token-dictionary': 0.16.0
+ '@pandacss/types': 0.16.0
astro: 2.9.6(@types/node@20.5.1)
javascript-stringify: 2.1.0
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
- vite: 4.4.8(@types/node@20.5.1)
+ vite: 4.4.11(@types/node@20.5.1)
transitivePeerDependencies:
- '@internationalized/date'
- '@types/node'
@@ -1286,16 +1305,16 @@ packages:
- typescript
dev: true
- /@pandacss/token-dictionary@0.11.1:
- resolution: {integrity: sha512-eQqAHScC7qH55iOY+JOTGl7D+Xfng0iiA60DIHVa8Q4YY6izeB90JTJ6vUIupwiQ5lX2P7Gm9X8v4bnIjOydDQ==}
+ /@pandacss/token-dictionary@0.16.0:
+ resolution: {integrity: sha512-nEYi0k8TFaG+mNTmaeMHYEOaf4X/cUTDw2QL7Y0Wey6jQKwqa5yzikKuUBu03B6r8evbUuZQNfQ81ZD9p+jdyg==}
dependencies:
- '@pandacss/shared': 0.11.1
- '@pandacss/types': 0.11.1
- ts-pattern: 5.0.4
+ '@pandacss/shared': 0.16.0
+ '@pandacss/types': 0.16.0
+ ts-pattern: 5.0.5
dev: true
- /@pandacss/types@0.11.1:
- resolution: {integrity: sha512-h/wOIO+YEapnNIFYMpS3hYXWH0DlqB+OivrADYtapOf2Y4sFg3ReyQdkwRKQ4ZWIfJKH8jEXd/xTvMQhvZ3arw==}
+ /@pandacss/types@0.16.0:
+ resolution: {integrity: sha512-CjKLutg6Hb/lWSSm85fEGZmdlFJZtYjhJbHQ7Iiicb5V4KK3J6XbxHIghGpHhsoUR4OzGizmIK6/rc2ae+MVyA==}
dev: true
/@pkgr/utils@2.4.2:
@@ -1975,7 +1994,7 @@ packages:
'@vue/shared': 3.3.4
estree-walker: 2.0.2
magic-string: 0.30.3
- postcss: 8.4.27
+ postcss: 8.4.28
source-map-js: 1.0.2
dev: true
@@ -2764,8 +2783,8 @@ packages:
typescript: 5.1.6
unist-util-visit: 4.1.2
vfile: 5.3.7
- vite: 4.4.8(@types/node@20.5.1)
- vitefu: 0.2.4(vite@4.4.8)
+ vite: 4.4.11(@types/node@20.5.1)
+ vitefu: 0.2.4(vite@4.4.11)
which-pm: 2.0.0
yargs-parser: 21.1.1
zod: 3.21.4
@@ -5555,6 +5574,16 @@ packages:
postcss-selector-parser: 6.0.13
dev: true
+ /postcss-minify-selectors@6.0.0(postcss@8.4.27):
+ resolution: {integrity: sha512-ec/q9JNCOC2CRDNnypipGfOhbYPuUkewGwLnbv6omue/PSASbHSU7s6uSQ0tcFRVv731oMIx8k0SP4ZX6be/0g==}
+ engines: {node: ^14 || ^16 || >=18.0}
+ peerDependencies:
+ postcss: ^8.2.15
+ dependencies:
+ postcss: 8.4.27
+ postcss-selector-parser: 6.0.13
+ dev: true
+
/postcss-nested@6.0.1(postcss@8.4.27):
resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
engines: {node: '>=12.0'}
@@ -6330,8 +6359,8 @@ packages:
code-block-writer: 12.0.0
dev: true
- /ts-pattern@5.0.4:
- resolution: {integrity: sha512-D5iVliqugv2C9541W2CNXFYNEZxr4TiHuLPuf49tKEdQFp/8y8fR0v1RExUvXkiWozKCwE7zv07C6EKxf0lKuQ==}
+ /ts-pattern@5.0.5:
+ resolution: {integrity: sha512-tL0w8U/pgaacOmkb9fRlYzWEUDCfVjjv9dD4wHTgZ61MjhuMt46VNWTG747NqW6vRzoWIKABVhFSOJ82FvXrfA==}
dev: true
/tsconfck@2.1.2(typescript@5.1.6):
@@ -6435,6 +6464,12 @@ packages:
engines: {node: '>=14.17'}
hasBin: true
+ /typescript@5.2.2:
+ resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
+ engines: {node: '>=14.17'}
+ hasBin: true
+ dev: true
+
/ufo@1.2.0:
resolution: {integrity: sha512-RsPyTbqORDNDxqAdQPQBpgqhWle1VcTSou/FraClYlHf6TZnQcGslpLcAphNR+sQW4q5lLWLbOsRlh9j24baQg==}
dev: true
@@ -6616,8 +6651,8 @@ packages:
vfile-message: 3.1.4
dev: true
- /vite@4.4.8(@types/node@20.5.1):
- resolution: {integrity: sha512-LONawOUUjxQridNWGQlNizfKH89qPigK36XhMI7COMGztz8KNY0JHim7/xDd71CZwGT4HtSRgI7Hy+RlhG0Gvg==}
+ /vite@4.4.11(@types/node@20.5.1):
+ resolution: {integrity: sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
peerDependencies:
@@ -6652,7 +6687,7 @@ packages:
fsevents: 2.3.2
dev: true
- /vitefu@0.2.4(vite@4.4.8):
+ /vitefu@0.2.4(vite@4.4.11):
resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
peerDependencies:
vite: ^3.0.0 || ^4.0.0
@@ -6660,7 +6695,7 @@ packages:
vite:
optional: true
dependencies:
- vite: 4.4.8(@types/node@20.5.1)
+ vite: 4.4.11(@types/node@20.5.1)
dev: true
/vscode-css-languageservice@6.2.6:
diff --git a/public/back-arrow.svg b/public/back-arrow.svg
new file mode 100644
index 0000000..939dec5
--- /dev/null
+++ b/public/back-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.25 5H0.75M0.75 5L4.75 1M0.75 5L4.75 9" stroke="#343434"/>
+</svg>
diff --git a/public/edit.svg b/public/edit.svg
new file mode 100644
index 0000000..752b3e6
--- /dev/null
+++ b/public/edit.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6872 2.52728L22.2227 6.06282L20.8086 7.47692L17.2731 3.94139L18.6872 2.52728ZM16.566 4.6485L6.70811 14.5064L7.59199 17.158L10.2436 18.0419L20.1015 8.18403L16.566 4.6485ZM7.0386 18.0276L9.45308 18.8325L8.08059 20.205H4.54506V16.6694L5.91754 15.2969L6.72237 17.7114L6.80142 17.9486L7.0386 18.0276Z" fill="#343434"/>
+</svg>
diff --git a/public/logo-discord.svg b/public/logo-discord.svg
new file mode 100644
index 0000000..0e6fbb0
--- /dev/null
+++ b/public/logo-discord.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="26" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.107 2.90468C25.0046 1.94213 22.7851 1.25927 20.5052 0.873535C20.1932 1.43125 19.9109 2.00507 19.6595 2.59258C17.231 2.22663 14.7613 2.22663 12.3328 2.59258C12.0813 2.00513 11.799 1.43132 11.4871 0.873535C9.20578 1.26253 6.9848 1.94701 4.88026 2.90971C0.702192 9.09123 -0.430415 15.1192 0.135889 21.0616C2.58267 22.8694 5.32131 24.2443 8.23277 25.1264C8.88835 24.2447 9.46845 23.3093 9.96692 22.3302C9.02015 21.9765 8.10634 21.5403 7.23608 21.0264C7.46512 20.8603 7.68912 20.6891 7.90558 20.523C10.4378 21.7139 13.2017 22.3313 15.9999 22.3313C18.7982 22.3313 21.5621 21.7139 24.0943 20.523C24.3133 20.7017 24.5373 20.8729 24.7638 21.0264C23.8919 21.5411 22.9764 21.9782 22.0279 22.3327C22.5258 23.3114 23.1059 24.246 23.7621 25.1264C26.676 24.2478 29.4168 22.8736 31.864 21.0641C32.5285 14.1729 30.7289 8.20025 27.107 2.90468ZM10.6842 17.4071C9.10614 17.4071 7.80238 15.975 7.80238 14.2131C7.80238 12.4513 9.06084 11.0066 10.6792 11.0066C12.2976 11.0066 13.5913 12.4513 13.5636 14.2131C13.5359 15.975 12.2925 17.4071 10.6842 17.4071ZM21.3156 17.4071C19.735 17.4071 18.4363 15.975 18.4363 14.2131C18.4363 12.4513 19.6948 11.0066 21.3156 11.0066C22.9365 11.0066 24.2202 12.4513 24.1925 14.2131C24.1648 15.975 22.924 17.4071 21.3156 17.4071Z" fill="#5865F2"/>
+</svg>
diff --git a/public/logo-github.svg b/public/logo-github.svg
new file mode 100644
index 0000000..59391ae
--- /dev/null
+++ b/public/logo-github.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0132 0.275864C7.15833 0.275864 0 7.48273 0 16.3986C0 23.5255 4.58659 29.5583 10.9494 31.6935C11.7449 31.8541 12.0363 31.3466 12.0363 30.9198C12.0363 30.546 12.0101 29.2648 12.0101 27.9299C7.5556 28.8911 6.62799 26.008 6.62799 26.008C5.91212 24.1394 4.85143 23.6592 4.85143 23.6592C3.39348 22.6715 4.95763 22.6715 4.95763 22.6715C6.57489 22.7783 7.4235 24.3265 7.4235 24.3265C8.85491 26.7821 11.1615 26.0882 12.0894 25.6611C12.2218 24.62 12.6463 23.8993 13.097 23.499C9.54422 23.1252 5.80625 21.7373 5.80625 15.5443C5.80625 13.7825 6.44214 12.3411 7.44973 11.2201C7.29075 10.8198 6.73386 9.16455 7.60903 6.94909C7.60903 6.94909 8.96111 6.52192 12.0098 8.60405C13.315 8.25113 14.6611 8.0716 16.0132 8.07009C17.3653 8.07009 18.7436 8.25714 20.0164 8.60405C23.0654 6.52192 24.4175 6.94909 24.4175 6.94909C25.2926 9.16455 24.7354 10.8198 24.5764 11.2201C25.6106 12.3411 26.2202 13.7825 26.2202 15.5443C26.2202 21.7373 22.4823 23.0984 18.9029 23.499C19.4864 24.0061 19.9898 24.9669 19.9898 26.4885C19.9898 28.6506 19.9636 30.3858 19.9636 30.9195C19.9636 31.3466 20.2553 31.8541 21.0505 31.6939C27.4133 29.558 31.9999 23.5255 31.9999 16.3986C32.0261 7.48273 24.8416 0.275864 16.0132 0.275864Z" fill="black"/>
+</svg>
diff --git a/public/person.svg b/public/person.svg
new file mode 100644
index 0000000..e199275
--- /dev/null
+++ b/public/person.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 10C14 10.3489 13.9404 10.6839 13.8309 10.9953C13.6993 11.3698 13.4954 11.7102 13.2361 12C12.6868 12.6137 11.8885 13 11 13C10.7097 13 10.4291 12.9588 10.1636 12.8818C8.91373 12.5197 8 11.3666 8 10C8 8.34315 9.34315 7 11 7C11.7568 7 12.4481 7.28022 12.9759 7.74257C13.6036 8.29244 14 9.09993 14 10ZM16.9 18C16.4367 15.7178 14.419 14 12 14H11H10C9.62683 14 9.26321 14.0409 8.91337 14.1184C6.67443 14.6146 5 16.6117 5 19V20H17V19C17 18.6575 16.9656 18.3231 16.9 18ZM14 5C13.0816 5 12.2596 5.41267 11.7093 6.0627C13.5801 6.39748 15 8.03292 15 10C15 10.2954 14.968 10.5832 14.9072 10.8604C16.1206 10.4759 17 9.34063 17 8C17 6.34315 15.6569 5 14 5ZM15 12H14.4649C14.2015 12.4553 13.8509 12.8539 13.436 13.1729C15.7395 13.7387 17.5202 15.6347 17.917 18H20V17C20 14.2386 17.7614 12 15 12Z" fill="#343434"/>
+</svg>
diff --git a/src/app/dash/destinations/discord/page.tsx b/src/app/dash/destinations/discord/page.tsx
new file mode 100644
index 0000000..f0931b1
--- /dev/null
+++ b/src/app/dash/destinations/discord/page.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { PageHeader } from "@/components/common/PageHeader";
+import { ConnectAccount } from "@/components/Dash/ConnectAccount";
+import { useCallback, useState } from "react";
+import { SetUp } from "@/components/Dash/SetUp";
+import { Option, Select } from "@/components/Dash/Select";
+import { Button } from "@/components/common/Button";
+import { SetUpChildren } from "@/components/Dash/GraphNode";
+
+const channelNames = ["message-renderer", "hookla", "github-notifications"];
+const selectOptions = channelNames.map((name) => ({
+ label: name,
+ value: name,
+}));
+
+function DiscordDestination() {
+ const [isAuthed, setIsAuthed] = useState(false);
+
+ const onConnected = useCallback(() => setIsAuthed(true), [setIsAuthed]);
+
+ return (
+ <>
+ <PageHeader title="Discord" logoUrl="/logo-discord.svg" hasBackButton />
+ {isAuthed ? (
+ <SetUp
+ setUpText="To finish setting up, please select a channel to use as a destination."
+ logoUrl="/logo-discord.svg"
+ >
+ <SetUpChildren>
+ <Select size="sm" value={selectOptions[0].value}>
+ {selectOptions.map(({ label, value }) => (
+ <Option value={value} label={label} />
+ ))}
+ </Select>
+ <Button kind="primary">Done</Button>
+ </SetUpChildren>
+ </SetUp>
+ ) : (
+ <ConnectAccount
+ connectText="Please connect Discord to get started."
+ brandName="Discord"
+ logoUrl="/logo-discord.svg"
+ onConnect={onConnected}
+ />
+ )}
+ </>
+ );
+}
+
+export default DiscordDestination;
diff --git a/src/app/dash/destinations/page.tsx b/src/app/dash/destinations/page.tsx
index 9460661..e07c15b 100644
--- a/src/app/dash/destinations/page.tsx
+++ b/src/app/dash/destinations/page.tsx
@@ -1,4 +1,5 @@
-import { PageHeader } from "@/components/Dash/PageHeader";
+import { PageHeader } from "@/components/common/PageHeader";
+import { GraphNodeList, DiscordDestination } from "@/components/Dash/GraphNode";
function Destinations() {
return (
@@ -7,6 +8,9 @@ function Destinations() {
title="Destinations"
subtitle="Define your destinations for the WidgetBot webhook here."
/>
+ <GraphNodeList>
+ <DiscordDestination />
+ </GraphNodeList>
</>
);
}
diff --git a/src/app/dash/embed-builder/page.tsx b/src/app/dash/embed-builder/page.tsx
index 3924cef..bb96659 100644
--- a/src/app/dash/embed-builder/page.tsx
+++ b/src/app/dash/embed-builder/page.tsx
@@ -1,4 +1,4 @@
-import { PageHeader } from "@/components/Dash/PageHeader";
+import { PageHeader } from "@/components/common/PageHeader";
function EmbedBuilder() {
return (
diff --git a/src/app/dash/layout.tsx b/src/app/dash/layout.tsx
index 08a6db2..1133d10 100644
--- a/src/app/dash/layout.tsx
+++ b/src/app/dash/layout.tsx
@@ -4,7 +4,7 @@ import {
MainContent,
PageContent,
} from "@/components/Dash/MainContainer";
-import { Sidebar } from "@/components/Dash/Sidebar";
+import { Sidebar, SidebarLink } from "@/components/Dash/Sidebar";
import React from "react";
interface Props {
@@ -12,10 +12,33 @@ interface Props {
}
function DashLayout({ children }: Props) {
+ const links: Array<SidebarLink> = [
+ {
+ href: "/dash/providers",
+ label: "Providers",
+ icon: "/providers.svg",
+ },
+ {
+ href: "/dash/destinations",
+ label: "Destinations",
+ icon: "/destinations.svg",
+ },
+ {
+ href: "/dash/embed-builder",
+ label: "Embed Builder",
+ icon: "/embed.svg",
+ },
+ {
+ href: "/dash/settings",
+ label: "Settings",
+ icon: "/settings.svg",
+ },
+ ];
+
return (
<MainContainer>
<MainContent>
- <Sidebar />
+ <Sidebar links={links} />
<PageContent>{children}</PageContent>
</MainContent>
</MainContainer>
diff --git a/src/app/dash/providers/github/page.tsx b/src/app/dash/providers/github/page.tsx
new file mode 100644
index 0000000..a0d44ee
--- /dev/null
+++ b/src/app/dash/providers/github/page.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { PageHeader } from "@/components/common/PageHeader";
+import { ConnectAccount } from "@/components/Dash/ConnectAccount";
+import { useCallback, useState } from "react";
+import { SetUp } from "@/components/Dash/SetUp";
+import { Option, Select } from "@/components/Dash/Select";
+import { Button } from "@/components/common/Button";
+import { SetUpChildren } from "@/components/Dash/GraphNode";
+
+function GitHubProvider() {
+ const [isAuthed, setIsAuthed] = useState(false);
+
+ const onConnected = useCallback(() => setIsAuthed(true), [setIsAuthed]);
+
+ return (
+ <>
+ <PageHeader title="GitHub" logoUrl="/logo-github.svg" hasBackButton />
+ {isAuthed ? (
+ <SetUp
+ setUpText="To finish setting up, please select the repositories to use as providers."
+ logoUrl="/logo-github.svg"
+ >
+ <SetUpChildren>
+ <Select size="sm" value="message-renderer">
+ <Option value="message-renderer" label="message-renderer" />
+ </Select>
+ <Button kind="primary">Done</Button>
+ </SetUpChildren>
+ </SetUp>
+ ) : (
+ <ConnectAccount
+ connectText="Please connect GitHub to get started."
+ brandName="GitHub"
+ logoUrl="/logo-github.svg"
+ onConnect={onConnected}
+ />
+ )}
+ </>
+ );
+}
+
+export default GitHubProvider;
diff --git a/src/app/dash/providers/page.tsx b/src/app/dash/providers/page.tsx
index f6e92c8..f475fc3 100644
--- a/src/app/dash/providers/page.tsx
+++ b/src/app/dash/providers/page.tsx
@@ -1,4 +1,5 @@
-import { PageHeader } from "@/components/Dash/PageHeader";
+import { PageHeader } from "@/components/common/PageHeader";
+import { GraphNodeList, GithubProvider } from "@/components/Dash/GraphNode";
function Providers() {
return (
@@ -7,6 +8,9 @@ function Providers() {
title="Providers"
subtitle="Define your providers for the WidgetBot webhook here."
/>
+ <GraphNodeList>
+ <GithubProvider />
+ </GraphNodeList>
</>
);
}
diff --git a/src/app/dash/settings/page.tsx b/src/app/dash/settings/page.tsx
index c5417ad..12d788f 100644
--- a/src/app/dash/settings/page.tsx
+++ b/src/app/dash/settings/page.tsx
@@ -1,4 +1,6 @@
-import { PageHeader } from "@/components/Dash/PageHeader";
+import { PageHeader } from "@/components/common/PageHeader";
+import React from "react";
+import { TextInput } from "@/components/common/TextInput";
function Settings() {
return (
@@ -7,6 +9,7 @@ function Settings() {
title="Settings"
subtitle="Configure generic settings for your webhook."
/>
+ <TextInput label="Webhook name" placeholder="Enter webhook name..." />
</>
);
}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 35d2c01..a1bceca 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
-import { Hero } from "@/components/home/Hero";
-import { WebhookInputSection } from "@/components/home/WebhookInput";
+import { Hero } from "@/components/Home/Hero";
+import { WebhookInputSection } from "@/components/Home/WebhookInput";
import { RouteList } from "@/components/common/RouteList";
-import { Submit } from "@/components/home/Submit";
+import { Submit } from "@/components/Home/Submit";
export default function Home() {
return (
diff --git a/src/app/teams/layout.tsx b/src/app/teams/layout.tsx
new file mode 100644
index 0000000..de1647b
--- /dev/null
+++ b/src/app/teams/layout.tsx
@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import {
+ MainContainer,
+ MainContent,
+ PageContent,
+} from "@/components/Dash/MainContainer";
+import { Sidebar, SidebarLink } from "@/components/Dash/Sidebar";
+import React from "react";
+
+interface Props {
+ children: ReactNode;
+}
+
+function TeamsLayout({ children }: Props) {
+ const links: Array<SidebarLink> = [
+ {
+ label: "Users",
+ href: "/teams/users",
+ icon: "/person.svg",
+ },
+ {
+ label: "Settings",
+ href: "/teams/settings",
+ icon: "/settings.svg",
+ },
+ ];
+
+ return (
+ <MainContainer>
+ <MainContent>
+ <Sidebar links={links} />
+ <PageContent>{children}</PageContent>
+ </MainContent>
+ </MainContainer>
+ );
+}
+
+export default TeamsLayout;
diff --git a/src/app/teams/page.tsx b/src/app/teams/page.tsx
new file mode 100644
index 0000000..e7a954d
--- /dev/null
+++ b/src/app/teams/page.tsx
@@ -0,0 +1,5 @@
+function Teams() {
+ return null;
+}
+
+export default Teams;
diff --git a/src/app/teams/settings/page.tsx b/src/app/teams/settings/page.tsx
new file mode 100644
index 0000000..3cf4fb4
--- /dev/null
+++ b/src/app/teams/settings/page.tsx
@@ -0,0 +1,18 @@
+import { PageHeader } from "@/components/common/PageHeader";
+import { TextInput } from "@/components/common/TextInput";
+import { Button } from "@/components/common/Button";
+import { PageFooter } from "@/components/common/PageFooter";
+
+function Settings() {
+ return (
+ <>
+ <PageHeader title="Settings" subtitle="Configure your team." />
+ <TextInput label="Team name" placeholder="Enter team name" />
+ <PageFooter>
+ <Button kind="danger">Delete team</Button>
+ </PageFooter>
+ </>
+ );
+}
+
+export default Settings;
diff --git a/src/app/teams/users/page.tsx b/src/app/teams/users/page.tsx
new file mode 100644
index 0000000..ff3256e
--- /dev/null
+++ b/src/app/teams/users/page.tsx
@@ -0,0 +1,47 @@
+import { PageHeader } from "@/components/common/PageHeader";
+import { TextInput } from "@/components/common/TextInput";
+import { TeamMember, TeamRole } from "@/components/Teams/TeamMember";
+import { styled } from "panda/jsx";
+
+const List = styled("ul", {
+ base: {
+ displayFlex: "column",
+ gap: "2",
+ marginTop: "4",
+ },
+});
+
+function Users() {
+ const members: Array<TeamMember> = [
+ {
+ email: "john.doe@example.com",
+ role: TeamRole.Owner,
+ },
+ {
+ email: "sus@mog.us",
+ role: TeamRole.Admin,
+ },
+ {
+ email: "johny@roingus.dev",
+ role: TeamRole.Member,
+ },
+ ];
+
+ return (
+ <>
+ <PageHeader title="Users" subtitle="Manage your team's users." />
+ <TextInput
+ label="Invite user"
+ type="email"
+ placeholder="john.doe@example.com"
+ />
+ <List>
+ {members.map((member) => (
+ <TeamMember member={member} key={member.email} />
+ ))}
+ </List>
+ </>
+ );
+}
+
+export default Users;
diff --git a/src/components/Dash/ConnectAccount/index.tsx b/src/components/Dash/ConnectAccount/index.tsx
new file mode 100644
index 0000000..5c31f81
--- /dev/null
+++ b/src/components/Dash/ConnectAccount/index.tsx
@@ -0,0 +1,27 @@
+import * as ContentStyles from "../GraphNode";
+import { Button } from "@/components/common/Button";
+import Image from "next/image";
+
+interface Props {
+ connectText: string;
+ brandName: string;
+ logoUrl: string;
+ onConnect(): void;
+}
+
+export function ConnectAccount({
+ connectText,
+ brandName,
+ logoUrl,
+ onConnect,
+}: Props) {
+ return (
+ <ContentStyles.ContentContainer>
+ <Image src={logoUrl} alt="logo" width={64} height={64} />
+ <ContentStyles.ContentText>{connectText}</ContentStyles.ContentText>
+ <Button kind="primary" onClick={onConnect}>
+ Connect {brandName}
+ </Button>
+ </ContentStyles.ContentContainer>
+ );
+}
diff --git a/src/components/Dash/GraphNode/index.tsx b/src/components/Dash/GraphNode/index.tsx
new file mode 100644
index 0000000..97945f7
--- /dev/null
+++ b/src/components/Dash/GraphNode/index.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import * as Styles from "./styles";
+import Image from "next/image";
+
+export {
+ GraphNodeList,
+ ContentContainer,
+ ContentText,
+ SetUpChildren,
+} from "./styles";
+
+interface Props {
+ brandName: string;
+ logoUrl: string;
+ destination: string;
+ group: "destinations" | "providers";
+}
+
+export function GraphNode({ brandName, logoUrl, destination, group }: Props) {
+ return (
+ <Styles.Container href={`/dash/${group}/${destination}`}>
+ <Styles.LogoContainer>
+ <Image src={logoUrl} width={32} height={32} alt={`${brandName} logo`} />
+ </Styles.LogoContainer>
+ <Styles.BrandName>{brandName}</Styles.BrandName>
+ </Styles.Container>
+ );
+}
+
+export function GithubProvider() {
+ return (
+ <GraphNode
+ brandName="GitHub"
+ logoUrl="/logo-github.svg"
+ destination="github"
+ group="providers"
+ />
+ );
+}
+
+export function DiscordDestination() {
+ return (
+ <GraphNode
+ brandName="Discord"
+ logoUrl="/logo-discord.svg"
+ destination="discord"
+ group="destinations"
+ />
+ );
+}
diff --git a/src/components/Dash/GraphNode/styles.ts b/src/components/Dash/GraphNode/styles.ts
new file mode 100644
index 0000000..47f47ef
--- /dev/null
+++ b/src/components/Dash/GraphNode/styles.ts
@@ -0,0 +1,79 @@
+import { styled } from "panda/jsx";
+import Link from "next/link";
+
+export const SetUpChildren = styled("div", {
+ base: {
+ displayFlex: "column",
+ gap: "4",
+ alignItems: "center",
+
+ sm: {
+ flexDirection: "row",
+ },
+ },
+});
+
+export const Container = styled(Link, {
+ base: {
+ border: "1px solid token(colors.neutral.300)",
+ borderRadius: "lg",
+ backgroundColor: "input.bg",
+ overflow: "hidden",
+ displayFlex: "column",
+ padding: "8",
+ alignItems: "center",
+ gap: "4",
+ cursor: "pointer",
+
+ _hover: {
+ borderColor: "borders.hover",
+ },
+ },
+});
+
+export const LogoContainer = styled("div", {
+ base: {
+ width: "64px",
+ height: "64px",
+ backgroundColor: "grey.200",
+ borderRadius: "full",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+});
+
+export const BrandName = styled("p", {
+ base: {
+ textStyle: "normal",
+ color: "text.primary",
+ },
+});
+
+export const GraphNodeList = styled("ul", {
+ base: {
+ displayFlex: "row",
+ flexWrap: "wrap",
+ },
+});
+
+export const ContentContainer = styled("div", {
+ base: {
+ displayFlex: "column",
+ gap: "4",
+ justifyContent: "center",
+ alignItems: "center",
+ flex: "1 0 auto",
+ },
+});
+
+export const ContentText = styled("p", {
+ base: {
+ fontSize: "md",
+ fontWeight: "500",
+ maxWidth: "60%",
+ textWrap: "wrap",
+ textAlign: "center",
+ color: "text.primary",
+ },
+});
diff --git a/src/components/Dash/MainContainer/styles.ts b/src/components/Dash/MainContainer/styles.ts
index 0d27edb..e656808 100644
--- a/src/components/Dash/MainContainer/styles.ts
+++ b/src/components/Dash/MainContainer/styles.ts
@@ -3,8 +3,7 @@ import { Panel } from "@/components/Dash/Panel";
export const MainContainer = styled("main", {
base: {
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
alignItems: "center",
marginBottom: "8",
@@ -23,8 +22,7 @@ export const MainContainer = styled("main", {
export const MainContent = styled("div", {
base: {
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
justifyContent: "center",
gap: "8",
maxWidth: "homeMaxWidth",
@@ -33,7 +31,7 @@ export const MainContent = styled("div", {
paddingRight: "paddingToMaxWidth",
width: "100%",
- md: {
+ lg: {
flexDirection: "row",
},
},
@@ -42,5 +40,6 @@ export const MainContent = styled("div", {
export const PageContent = styled(Panel, {
base: {
flex: "1 0 auto",
+ displayFlex: "column",
},
});
diff --git a/src/components/Dash/PageHeader/index.tsx b/src/components/Dash/PageHeader/index.tsx
deleted file mode 100644
index c261f31..0000000
--- a/src/components/Dash/PageHeader/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as Styles from "./styles";
-
-interface Props {
- title: string;
- subtitle: string;
-}
-
-export function PageHeader({ title, subtitle }: Props) {
- return (
- <Styles.Container>
- <Styles.Title>{title}</Styles.Title>
- <Styles.Subtitle>{subtitle}</Styles.Subtitle>
- </Styles.Container>
- );
-}
diff --git a/src/components/Dash/PageHeader/styles.ts b/src/components/Dash/PageHeader/styles.ts
deleted file mode 100644
index f239917..0000000
--- a/src/components/Dash/PageHeader/styles.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { styled } from "panda/jsx";
-
-export const Container = styled("div", {
- base: {
- display: "flex",
- flexDirection: "column",
- gap: "1",
- borderBottom: "1px solid token(colors.neutral.300)",
- paddingBottom: "8",
- marginBottom: "8",
- },
-});
-
-export const Title = styled("p", {
- base: {
- fontSize: "2xl",
- color: "neutral.900",
- },
-});
-
-export const Subtitle = styled("p", {
- base: {
- color: "neutral.700",
- fontSize: "md",
- },
-});
diff --git a/src/components/Dash/Select/index.tsx b/src/components/Dash/Select/index.tsx
new file mode 100644
index 0000000..8e3f5b1
--- /dev/null
+++ b/src/components/Dash/Select/index.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import * as RadixSelect from "@radix-ui/react-select";
+import * as Styles from "./styles";
+import Image from "next/image";
+import { ReactNode } from "react";
+
+interface OptionProps {
+ value: string;
+ label: string;
+}
+
+export function Option({ value, label }: OptionProps) {
+ return (
+ <Styles.Item key={value} value={value}>
+ <RadixSelect.ItemText>{label}</RadixSelect.ItemText>
+ </Styles.Item>
+ );
+}
+
+interface Props {
+ value?: string;
+ children: ReactNode;
+ onSelect?(value: string): void;
+ disabled?: boolean;
+ size?: "sm" | "md";
+}
+
+export function Select({ value, children, onSelect, disabled, size }: Props) {
+ return (
+ <Styles.Container>
+ <RadixSelect.Root
+ defaultValue={value}
+ onValueChange={onSelect}
+ disabled={disabled}
+ >
+ <Styles.Trigger size={size}>
+ <RadixSelect.Value />
+ <Styles.Caret>
+ <Image src="/double_caret.svg" alt="" width={12} height={20} />
+ </Styles.Caret>
+ </Styles.Trigger>
+ <Styles.Content>
+ <Styles.Viewport>{children}</Styles.Viewport>
+ </Styles.Content>
+ </RadixSelect.Root>
+ </Styles.Container>
+ );
+}
diff --git a/src/components/Dash/Select/styles.ts b/src/components/Dash/Select/styles.ts
new file mode 100644
index 0000000..39ddd2b
--- /dev/null
+++ b/src/components/Dash/Select/styles.ts
@@ -0,0 +1,91 @@
+import { styled } from "panda/jsx";
+import * as Select from "@radix-ui/react-select";
+
+export const Container = styled("div", {
+ base: {
+ position: "relative",
+ },
+});
+
+export const Trigger = styled(Select.Trigger, {
+ base: {
+ colorPalette: "neutral",
+ displayFlex: "row",
+ alignItems: "center",
+ minWidth: "200px",
+ inputBorder: true,
+ borderRadius: "input",
+ gap: "2",
+ cursor: "pointer",
+ backgroundColor: "input.bg",
+ },
+ variants: {
+ size: {
+ sm: {
+ paddingY: "1",
+ paddingLeft: "3",
+ paddingRight: "2",
+ },
+ md: {
+ padding: "3",
+ },
+ },
+ },
+ defaultVariants: {
+ size: "md",
+ },
+});
+
+export const Caret = styled(Select.Icon, {
+ base: {
+ width: "12px",
+ height: "20px",
+ marginLeft: "auto",
+ },
+});
+
+export const Content = styled(Select.Content, {
+ base: {
+ colorPalette: "neutral",
+ backgroundColor: "neutral.100",
+ width: "100%",
+ border: "1px solid token(colors.borders.normal)",
+ borderRadius: "input",
+ gap: "2",
+ padding: "2",
+ zIndex: "popup",
+ boxShadow: "md",
+ },
+});
+
+export const Viewport = styled(Select.Viewport, {
+ base: {
+ displayFlex: "column",
+ gap: "2",
+ },
+});
+
+export const Item = styled(Select.SelectItem, {
+ base: {
+ displayFlex: "row",
+ alignItems: "center",
+ padding: "4",
+ gap: "2",
+ cursor: "pointer",
+ outline: "none",
+ borderRadius: "md",
+
+ '&[data-state="checked"]': {
+ colorPalette: "blue",
+ backgroundColor: "colorPalette.200",
+ },
+
+ '&[data-highlighted]:not([data-state="checked"])': {
+ backgroundColor: "colorPalette.200",
+
+ [`& .arrow`]: {
+ translate: "4px 0",
+ },
+ },
+ },
+});
diff --git a/src/components/Dash/SetUp/index.tsx b/src/components/Dash/SetUp/index.tsx
new file mode 100644
index 0000000..ef0a0a0
--- /dev/null
+++ b/src/components/Dash/SetUp/index.tsx
@@ -0,0 +1,19 @@
+import * as ContentStyles from "../GraphNode";
+import Image from "next/image";
+import { ReactNode } from "react";
+
+interface Props {
+ setUpText: string;
+ logoUrl: string;
+ children: ReactNode;
+}
+
+export function SetUp({ setUpText, logoUrl, children }: Props) {
+ return (
+ <ContentStyles.ContentContainer>
+ <Image src={logoUrl} alt="logo" width={64} height={64} />
+ <ContentStyles.ContentText>{setUpText}</ContentStyles.ContentText>
+ {children}
+ </ContentStyles.ContentContainer>
+ );
+}
diff --git a/src/components/Dash/Sidebar/index.tsx b/src/components/Dash/Sidebar/index.tsx
index 756ac19..b705432 100644
--- a/src/components/Dash/Sidebar/index.tsx
+++ b/src/components/Dash/Sidebar/index.tsx
@@ -23,31 +23,18 @@ function SidebarLink({ href, children, iconUrl, isActive }: SidebarLinkProps) {
);
}
-export function Sidebar() {
- const pathname = usePathname();
+export interface SidebarLink {
+ href: string;
+ label: string;
+ icon: `/${string}`;
+}
- const links = [
- {
- href: "/dash/providers",
- label: "Providers",
- icon: "/providers.svg",
- },
- {
- href: "/dash/destinations",
- label: "Destinations",
- icon: "/destinations.svg",
- },
- {
- href: "/dash/embed-builder",
- label: "Embed Builder",
- icon: "/embed.svg",
- },
- {
- href: "/dash/settings",
- label: "Settings",
- icon: "/settings.svg",
- },
- ];
+interface Props {
+ links: Array<SidebarLink>;
+}
+
+export function Sidebar({ links }: Props) {
+ const pathname = usePathname();
return (
<Styles.Sidebar>
@@ -63,7 +50,7 @@ export function Sidebar() {
href={href}
iconUrl={icon}
key={href}
- isActive={href === pathname}
+ isActive={pathname.startsWith(href)}
>
{label}
</SidebarLink>
diff --git a/src/components/Dash/Sidebar/styles.ts b/src/components/Dash/Sidebar/styles.ts
index d6a6120..e0cfabd 100644
--- a/src/components/Dash/Sidebar/styles.ts
+++ b/src/components/Dash/Sidebar/styles.ts
@@ -4,8 +4,7 @@ import Link from "next/link";
export const Sidebar = styled(Panel, {
base: {
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
gap: "6",
},
});
@@ -14,7 +13,7 @@ export const Section = styled("div", {});
export const Label = styled("p", {
base: {
- color: "neutral.600",
+ color: "text.secondary",
fontSize: "sm",
marginBottom: "2",
},
@@ -22,21 +21,19 @@ export const Label = styled("p", {
export const Nav = styled("div", {
base: {
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
gap: "2",
},
});
export const NavLink = styled(Link, {
base: {
- padding: "4",
+ padding: "token(spacing.4) 64px token(spacing.4) token(spacing.4)",
borderRadius: "lg",
border: "1px solid token(colors.neutral.300)",
- backgroundColor: "neutral.200",
- display: "flex",
+ backgroundColor: "input.bg",
+ displayFlex: "row",
alignItems: "center",
- flexDirection: "row",
gap: "2",
colorPalette: "neutral",
transition:
@@ -45,6 +42,7 @@ export const NavLink = styled(Link, {
backgroundRepeat: "no-repeat",
backgroundPosition: "right token(spacing.4) center",
userSelect: "none",
+ color: "text.primary",
_hover: {
boxShadow: "md",
@@ -72,7 +70,7 @@ export const NavIcon = styled("div", {
width: "32px",
height: "32px",
borderRadius: "full",
- backgroundColor: "colorPalette.300",
+ backgroundColor: "colorPalette.100",
border: "1px solid token(colors.colorPalette.400)",
display: "flex",
justifyContent: "center",
diff --git a/src/components/Dash/WebhookSelect/styles.ts b/src/components/Dash/WebhookSelect/styles.ts
index 68e7f2a..2a01426 100644
--- a/src/components/Dash/WebhookSelect/styles.ts
+++ b/src/components/Dash/WebhookSelect/styles.ts
@@ -11,16 +11,16 @@ export const Container = styled("div", {
export const Trigger = styled(Select.Trigger, {
base: {
colorPalette: "neutral",
- display: "flex",
- flexDirection: "row",
+ displayFlex: "row",
alignItems: "center",
padding: "4",
- minWidth: "250px",
- border: "1px solid token(colors.neutral.400)",
- borderRadius: "lg",
+ minWidth: "200px",
+ width: "100%",
+ inputBorder: true,
gap: "2",
cursor: "pointer",
- backgroundColor: "neutral.100",
+ backgroundColor: "input.bg",
+ color: "text.primary",
},
});
@@ -49,18 +49,18 @@ export const Content = styled(Select.Content, {
colorPalette: "neutral",
backgroundColor: "neutral.100",
width: "100%",
- border: "1px solid token(colors.neutral.400)",
- borderRadius: "lg",
+ border: "1px solid token(colors.borders.normal)",
+ borderRadius: "input",
padding: "2",
zIndex: "popup",
boxShadow: "md",
+ color: "text.primary",
},
});
export const Viewport = styled(Select.Viewport, {
base: {
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
gap: "2",
},
});
@@ -72,8 +72,7 @@ export const Arrow = css({
export const Item = styled(Select.SelectItem, {
base: {
- display: "flex",
- flexDirection: "row",
+ displayFlex: "row",
alignItems: "center",
padding: "4",
gap: "2",
diff --git a/src/components/home/Hero/index.tsx b/src/components/Home/Hero/index.tsx
similarity index 89%
rename from src/components/home/Hero/index.tsx
rename to src/components/Home/Hero/index.tsx
index 7eeff41..cc6957a 100644
--- a/src/components/home/Hero/index.tsx
+++ b/src/components/Home/Hero/index.tsx
@@ -1,4 +1,4 @@
-import { NotificationList } from "@/components/home/NotificationList";
+import { NotificationList } from "@/components/Home/NotificationList";
import * as Styles from "./styles";
import { css } from "panda/css";
diff --git a/src/components/home/Hero/styles.ts b/src/components/Home/Hero/styles.ts
similarity index 88%
rename from src/components/home/Hero/styles.ts
rename to src/components/Home/Hero/styles.ts
index 1b27e22..5325bbd 100644
--- a/src/components/home/Hero/styles.ts
+++ b/src/components/Home/Hero/styles.ts
@@ -2,10 +2,9 @@ import { styled } from "panda/jsx";
export const HeroContainer = styled("section", {
base: {
- display: "flex",
+ displayFlex: "row",
width: "100%",
height: "700px",
- flexDirection: "row",
justifyContent: "center",
backgroundColor: "colorPalette.500",
backgroundImage: "url(/graph.svg)",
@@ -14,8 +13,7 @@ export const HeroContainer = styled("section", {
export const HeroContent = styled("div", {
base: {
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
alignItems: "center",
maxWidth: "homeMaxWidth",
diff --git a/src/components/home/NotificationList/index.tsx b/src/components/Home/NotificationList/index.tsx
similarity index 100%
rename from src/components/home/NotificationList/index.tsx
rename to src/components/Home/NotificationList/index.tsx
diff --git a/src/components/home/NotificationList/styles.ts b/src/components/Home/NotificationList/styles.ts
similarity index 95%
rename from src/components/home/NotificationList/styles.ts
rename to src/components/Home/NotificationList/styles.ts
index 2d7a5dd..7ce3897 100644
--- a/src/components/home/NotificationList/styles.ts
+++ b/src/components/Home/NotificationList/styles.ts
@@ -59,8 +59,7 @@ export const NotificationListContainer = styled("div", {
export const NotificationList = styled("ul", {
base: {
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
gap: "4",
translate: "0 -10%",
},
diff --git a/src/components/home/Submit/index.tsx b/src/components/Home/Submit/index.tsx
similarity index 90%
rename from src/components/home/Submit/index.tsx
rename to src/components/Home/Submit/index.tsx
index 1300a9e..3b6635e 100644
--- a/src/components/home/Submit/index.tsx
+++ b/src/components/Home/Submit/index.tsx
@@ -1,4 +1,4 @@
-import * as Styles from "@/components/home/Submit/styles";
+import * as Styles from "@/components/Home/Submit/styles";
import { token } from "panda/tokens";
import { Button } from "@/components/common/Button";
diff --git a/src/components/home/Submit/styles.ts b/src/components/Home/Submit/styles.ts
similarity index 87%
rename from src/components/home/Submit/styles.ts
rename to src/components/Home/Submit/styles.ts
index de3db9d..eb892f0 100644
--- a/src/components/home/Submit/styles.ts
+++ b/src/components/Home/Submit/styles.ts
@@ -3,9 +3,8 @@ import { styled } from "panda/jsx";
export const SubmitSection = styled("section", {
base: {
- display: "flex",
+ displayFlex: "row",
width: "100%",
- flexDirection: "row",
justifyContent: "center",
},
});
@@ -21,8 +20,7 @@ export const SubmitBoxContainer = styled("div", {
export const SubmitBox = styled(Box, {
base: {
padding: "8",
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
gap: "2",
alignItems: "flex-start",
diff --git a/src/components/home/WebhookInput/index.tsx b/src/components/Home/WebhookInput/index.tsx
similarity index 100%
rename from src/components/home/WebhookInput/index.tsx
rename to src/components/Home/WebhookInput/index.tsx
diff --git a/src/components/home/WebhookInput/styles.ts b/src/components/Home/WebhookInput/styles.ts
similarity index 100%
rename from src/components/home/WebhookInput/styles.ts
rename to src/components/Home/WebhookInput/styles.ts
diff --git a/src/components/Teams/TeamMember/index.tsx b/src/components/Teams/TeamMember/index.tsx
new file mode 100644
index 0000000..19943c4
--- /dev/null
+++ b/src/components/Teams/TeamMember/index.tsx
@@ -0,0 +1,40 @@
+import * as Styles from "./styles";
+import { Option, Select } from "@/components/Dash/Select";
+import { Button } from "@/components/common/Button";
+
+export enum TeamRole {
+ Owner,
+ Admin,
+ Member,
+}
+
+export interface TeamMember {
+ email: string;
+ role: TeamRole;
+}
+
+interface Props {
+ member: TeamMember;
+}
+
+export function TeamMember({ member }: Props) {
+ return (
+ <Styles.TeamMember>
+ <span>{member.email}</span>
+ <Styles.Controls>
+ <Select
+ value={member.role.toString()}
+ disabled={member.role === TeamRole.Owner}
+ size="sm"
+ >
+ {member.role === TeamRole.Owner && (
+ <Option value={TeamRole.Owner.toString()} label="Owner" />
+ )}
+ <Option value={TeamRole.Admin.toString()} label="Admin" />
+ <Option value={TeamRole.Member.toString()} label="Member" />
+ </Select>
+ <Button kind="danger">Remove</Button>
+ </Styles.Controls>
+ </Styles.TeamMember>
+ );
+}
diff --git a/src/components/Teams/TeamMember/styles.ts b/src/components/Teams/TeamMember/styles.ts
new file mode 100644
index 0000000..e3dcb82
--- /dev/null
+++ b/src/components/Teams/TeamMember/styles.ts
@@ -0,0 +1,26 @@
+import { styled } from "panda/jsx";
+
+export const TeamMember = styled("li", {
+ base: {
+ inputBorder: true,
+ listStyle: "none",
+ paddingX: "8",
+ paddingY: "4",
+ backgroundColor: "input.bg",
+ displayFlex: "column",
+ justifyContent: "space-between",
+ alignItems: "center",
+ gap: "2",
+
+ md: {
+ flexDirection: "row",
+ },
+ },
+});
+
+export const Controls = styled("div", {
+ base: {
+ displayFlex: "row",
+ gap: "2",
+ },
+});
diff --git a/src/components/common/BackButton/index.tsx b/src/components/common/BackButton/index.tsx
new file mode 100644
index 0000000..baa0f8a
--- /dev/null
+++ b/src/components/common/BackButton/index.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import * as Styles from "./styles";
+import { useRouter } from "next/navigation";
+
+interface Props {
+ backPath?: string;
+}
+
+export function BackButton({ backPath }: Props) {
+ const router = useRouter();
+
+ return (
+ <Styles.BackButton
+ onClick={!backPath ? router.back : undefined}
+ href={backPath ?? "#"}
+ />
+ );
+}
diff --git a/src/components/common/BackButton/styles.ts b/src/components/common/BackButton/styles.ts
new file mode 100644
index 0000000..302f6c3
--- /dev/null
+++ b/src/components/common/BackButton/styles.ts
@@ -0,0 +1,24 @@
+import { styled } from "panda/jsx";
+import Link from "next/link";
+
+export const BackButton = styled(Link, {
+ base: {
+ borderColor: "neutral.300",
+ borderStyle: "solid",
+ borderWidth: "1px",
+ backgroundImage: "url(/back-arrow.svg)",
+ borderRadius: "full",
+ width: "40px",
+ height: "40px",
+ backgroundColor: "input.bg",
+ backgroundPosition: "center center",
+ backgroundRepeat: "no-repeat",
+ backgroundSize: "60%",
+ cursor: "pointer",
+ transition: "border-color token(durations.fast)",
+
+ "&:hover": {
+ borderColor: "neutral.900",
+ },
+ },
+});
diff --git a/src/components/common/Button/styles.ts b/src/components/common/Button/styles.ts
index 06ef626..8717d31 100644
--- a/src/components/common/Button/styles.ts
+++ b/src/components/common/Button/styles.ts
@@ -14,11 +14,25 @@ export const Button = styled("button", {
border: "1px solid token(colors.neutral.900)",
borderRadius: "lg",
boxSizing: "border-box",
- textStyle: "normal",
+ textStyle: "button",
backgroundImage: "url(/arrow_white.svg)",
backgroundRepeat: "no-repeat",
backgroundPosition: "right token(spacing.6) center",
},
+ primary: {
+ backgroundColor: "buttons.primary",
+ color: "neutral.100",
+ padding: "token(spacing.2) token(spacing.4)",
+ borderRadius: "lg",
+ textStyle: "button",
+ },
+ danger: {
+ backgroundColor: "buttons.danger",
+ textStyle: "button",
+ color: "neutral.100",
+ padding: "token(spacing.2) token(spacing.4)",
+ borderRadius: "lg",
+ },
},
},
});
diff --git a/src/components/common/Navbar/index.tsx b/src/components/common/Navbar/index.tsx
index 5ebdbef..38bbe9f 100644
--- a/src/components/common/Navbar/index.tsx
+++ b/src/components/common/Navbar/index.tsx
@@ -7,7 +7,7 @@ export function Navbar() {
<Styles.NavbarContainer>
<Styles.Navbar>
<Styles.LogoContainer>
- <Image src="logo.svg" alt="logo" width={32} height={32} />
+ <Image src="/logo.svg" alt="logo" width={32} height={32} />
<Styles.LogoText>
<Styles.Title>Hookla</Styles.Title>
<Styles.Slogan>Keep your community informed.</Styles.Slogan>
diff --git a/src/components/common/Navbar/styles.ts b/src/components/common/Navbar/styles.ts
index 1b18505..5af980c 100644
--- a/src/components/common/Navbar/styles.ts
+++ b/src/components/common/Navbar/styles.ts
@@ -5,8 +5,7 @@ export const Navbar = styled("nav", {
base: {
padding:
"token(spacing.6) token(spacing.4) token(spacing.4) token(spacing.4)",
- display: "flex",
- flexDirection: "row",
+ displayFlex: "row",
gap: "4",
flexWrap: "wrap",
justifyContent: "space-between",
@@ -27,8 +26,7 @@ export const NavbarContainer = styled("div", {
top: 0,
zIndex: "nav",
backgroundColor: "neutral.100",
- display: "flex",
- flexDirection: "row",
+ displayFlex: "row",
justifyContent: "center",
},
});
@@ -44,8 +42,7 @@ export const LogoContainer = styled("div", {
export const LogoText = styled("div", {
base: {
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
gap: "0.5",
},
});
@@ -53,6 +50,7 @@ export const LogoText = styled("div", {
export const Title = styled("h1", {
base: {
textStyle: "normal",
+ color: "text.primary",
},
});
@@ -62,7 +60,7 @@ export const Slogan = styled("p", {
color: "magenta.400",
textWrap: "nowrap",
- hideBelow: "sm",
+ hideBelow: "md",
},
});
@@ -85,8 +83,7 @@ export const UserAvatar = css({
export const UserText = styled("div", {
base: {
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
gap: "0.5",
hideBelow: "sm",
},
@@ -95,6 +92,7 @@ export const UserText = styled("div", {
export const WelcomeUsername = styled("p", {
base: {
textStyle: "normal",
+ color: "text.primary",
},
});
@@ -110,8 +108,7 @@ export const SearchContainer = styled("div", {
boxSizing: "border-box",
order: 2,
flexBasis: "100%",
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
alignItems: "stretch",
sm: {
diff --git a/src/components/common/Notification/styles.ts b/src/components/common/Notification/styles.ts
index b967de0..8a51d8b 100644
--- a/src/components/common/Notification/styles.ts
+++ b/src/components/common/Notification/styles.ts
@@ -5,16 +5,14 @@ import { css } from "panda/css";
export const Notification = styled(Box, {
base: {
padding: "6",
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
gap: "2",
},
});
export const NotificationSection = styled("div", {
base: {
- display: "flex",
- flexDirection: "row",
+ displayFlex: "row",
alignItems: "center",
gap: "2",
textStyle: "normal",
diff --git a/src/components/common/PageFooter/index.tsx b/src/components/common/PageFooter/index.tsx
new file mode 100644
index 0000000..737bec0
--- /dev/null
+++ b/src/components/common/PageFooter/index.tsx
@@ -0,0 +1 @@
+export * from "./styles";
diff --git a/src/components/common/PageFooter/styles.ts b/src/components/common/PageFooter/styles.ts
new file mode 100644
index 0000000..0e7e452
--- /dev/null
+++ b/src/components/common/PageFooter/styles.ts
@@ -0,0 +1,9 @@
+import { styled } from "panda/jsx";
+
+export const PageFooter = styled("div", {
+ base: {
+ displayFlex: "row",
+ gap: "4",
+ marginTop: "auto",
+ },
+});
diff --git a/src/components/common/PageHeader/index.tsx b/src/components/common/PageHeader/index.tsx
new file mode 100644
index 0000000..0d6ed42
--- /dev/null
+++ b/src/components/common/PageHeader/index.tsx
@@ -0,0 +1,32 @@
+import * as Styles from "./styles";
+import { BackButton } from "@/components/common/BackButton";
+import Image from "next/image";
+
+interface Props {
+ title: string;
+ subtitle?: string;
+ hasBackButton?: boolean;
+ backButtonUrl?: string;
+ logoUrl?: string;
+}
+
+export function PageHeader({
+ title,
+ subtitle,
+ backButtonUrl,
+ hasBackButton,
+ logoUrl,
+}: Props) {
+ return (
+ <Styles.Container>
+ <Styles.TextContainer>
+ <Styles.Title hasBackButton={hasBackButton}>
+ {logoUrl && <Image src={logoUrl} alt="" width={32} height={32} />}{" "}
+ <Styles.TitleText>{title}</Styles.TitleText>
+ </Styles.Title>
+ {subtitle && <Styles.Subtitle>{subtitle}</Styles.Subtitle>}
+ </Styles.TextContainer>
+ {hasBackButton && <BackButton backPath={backButtonUrl} />}
+ </Styles.Container>
+ );
+}
diff --git a/src/components/common/PageHeader/styles.ts b/src/components/common/PageHeader/styles.ts
new file mode 100644
index 0000000..592a074
--- /dev/null
+++ b/src/components/common/PageHeader/styles.ts
@@ -0,0 +1,55 @@
+import { styled } from "panda/jsx";
+
+export const Container = styled("div", {
+ base: {
+ display: "flex",
+ borderBottom: "1px solid token(colors.neutral.300)",
+ paddingBottom: "8",
+ marginBottom: "8",
+ justifyContent: "space-between",
+ },
+});
+
+export const TextContainer = styled("div", {
+ base: {
+ displayFlex: "column",
+ gap: "1",
+ },
+});
+
+export const TitleText = styled("span", {
+ base: {
+ display: "none",
+
+ sm: {
+ display: "unset",
+ },
+ },
+});
+
+export const Title = styled("p", {
+ base: {
+ fontSize: "2xl",
+ displayFlex: "row",
+ gap: "3",
+ fontWeight: "500",
+ color: "text.primary",
+ },
+ variants: {
+ hasBackButton: {
+ false: {
+ justifyContent: "left",
+ },
+ true: {
+ justifyContent: "center",
+ },
+ },
+ },
+});
+
+export const Subtitle = styled("p", {
+ base: {
+ color: "text.secondary",
+ fontSize: "md",
+ },
+});
diff --git a/src/components/common/Route/styles.ts b/src/components/common/Route/styles.ts
index fbb43dd..90d7813 100644
--- a/src/components/common/Route/styles.ts
+++ b/src/components/common/Route/styles.ts
@@ -4,8 +4,7 @@ import { css } from "panda/css";
export const Route = styled("label", {
base: {
padding: "8",
- display: "flex",
- flexDirection: "row",
+ displayFlex: "row",
alignItems: "center",
gap: "4",
cursor: "pointer",
@@ -15,8 +14,7 @@ export const Route = styled("label", {
export const RouteInfo = styled("div", {
base: {
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
alignItems: "flex-start",
justifyContent: "center",
gap: "1",
diff --git a/src/components/common/RouteList/styles.ts b/src/components/common/RouteList/styles.ts
index 6bc8b83..fa980f7 100644
--- a/src/components/common/RouteList/styles.ts
+++ b/src/components/common/RouteList/styles.ts
@@ -3,9 +3,8 @@ import { css } from "panda/css";
export const RouteSection = styled("section", {
base: {
- display: "flex",
+ displayFlex: "row",
width: "100%",
- flexDirection: "row",
justifyContent: "center",
},
});
@@ -13,8 +12,7 @@ export const RouteSection = styled("section", {
export const RouteSectionContent = styled("div", {
base: {
padding: "paddingToMaxWidth",
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
justifyContent: "center",
width: "homeMaxWidth",
gap: "14",
@@ -27,8 +25,7 @@ export const RouteSectionContent = styled("div", {
export const ListContainer = styled("div", {
base: {
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
gap: "8",
flex: "1 0 auto",
},
@@ -36,8 +33,7 @@ export const ListContainer = styled("div", {
export const ListHeader = styled("div", {
base: {
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
},
});
@@ -57,8 +53,7 @@ export const ListSubtitle = styled("p", {
export const List = styled("ul", {
base: {
- display: "flex",
- flexDirection: "column",
+ displayFlex: "column",
gap: "2",
},
});
diff --git a/src/components/common/SearchDocumentation/styles.ts b/src/components/common/SearchDocumentation/styles.ts
index 5b6a06e..45c1616 100644
--- a/src/components/common/SearchDocumentation/styles.ts
+++ b/src/components/common/SearchDocumentation/styles.ts
@@ -4,20 +4,19 @@ export const SearchDocumentation = styled("input", {
base: {
padding:
"token(spacing.4) token(spacing.4) token(spacing.4) token(spacing.10)",
- borderRadius: "lg",
- borderWidth: "1px",
- borderColor: "neutral.500",
+ inputBorder: true,
boxSizing: "border-box",
- backgroundColor: "neutral.100",
+ backgroundColor: "input.bg",
fontSize: "sm",
lineHeight: "1",
backgroundImage: "url('/search.svg')",
backgroundRepeat: "no-repeat",
backgroundPosition: "token(spacing.4) center",
outline: "none",
+ color: "text.primary",
_placeholder: {
- color: "neutral.500",
+ color: "input.placeholder",
},
},
});
diff --git a/src/components/common/TextInput/index.tsx b/src/components/common/TextInput/index.tsx
new file mode 100644
index 0000000..aa54be6
--- /dev/null
+++ b/src/components/common/TextInput/index.tsx
@@ -0,0 +1,15 @@
+import * as Styles from "./styles";
+import { ComponentPropsWithRef } from "react";
+
+interface Props extends ComponentPropsWithRef<"input"> {
+ label?: string;
+}
+
+export function TextInput({ label, ...rest }: Props) {
+ return (
+ <Styles.InputLabel>
+ {label}
+ <Styles.Input type="text" {...rest} />
+ </Styles.InputLabel>
+ );
+}
diff --git a/src/components/common/TextInput/styles.ts b/src/components/common/TextInput/styles.ts
new file mode 100644
index 0000000..a4b2cfe
--- /dev/null
+++ b/src/components/common/TextInput/styles.ts
@@ -0,0 +1,21 @@
+import { styled } from "panda/jsx";
+
+export const InputLabel = styled("label", {
+ base: {
+ color: "text.secondary",
+ displayFlex: "column",
+ gap: "2",
+ },
+});
+
+export const Input = styled("input", {
+ base: {
+ backgroundColor: "input.bg",
+ inputBorder: true,
+ padding: "token(spacing.2) token(spacing.4)",
+
+ _placeholder: {
+ color: "input.placeholder",
+ },
+ },
+});