diff --git a/.vscode/settings.json b/.vscode/settings.json index e9983d3..75bc7e2 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,9 @@ { "tailwindCSS.experimental.configFile": "src/app/globals.css", - "tailwindCSS.classFunctions": ["cn"] + "tailwindCSS.classFunctions": ["cn"], + "editor.codeActionsOnSave": { + "source.organizeImports": "never", + "source.organizeImports.biome": "explicit", + "source.fixAll.biome": "explicit" + } } diff --git a/package.json b/package.json index c4bed97..1a5e121 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "axios": "^1.13.2", "bottleneck": "^2.19.5", "clsx": "^2.1.1", - "copilot-design-system": "^2.3.4", + "copilot-design-system": "2.4.1", "copilot-node-sdk": "^3.17.1", "date-fns": "^4.1.0", "dotenv": "^17.2.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e779b2d..d1df7ed 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -66,8 +66,8 @@ importers: specifier: ^2.1.1 version: 2.1.1 copilot-design-system: - specifier: ^2.3.4 - version: 2.3.4(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3) + specifier: 2.4.1 + version: 2.4.1(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3) copilot-node-sdk: specifier: ^3.17.1 version: 3.17.1(@babel/core@7.28.6)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) @@ -764,28 +764,24 @@ packages: engines: {node: '>=14.21.3'} cpu: [arm64] os: [linux] - libc: [musl] '@biomejs/cli-linux-arm64@2.3.10': resolution: {integrity: sha512-hhPw2V3/EpHKsileVOFynuWiKRgFEV48cLe0eA+G2wO4SzlwEhLEB9LhlSrVeu2mtSn205W283LkX7Fh48CaxA==} engines: {node: '>=14.21.3'} cpu: [arm64] os: [linux] - libc: [glibc] '@biomejs/cli-linux-x64-musl@2.3.10': resolution: {integrity: sha512-QTfHZQh62SDFdYc2nfmZFuTm5yYb4eO1zwfB+90YxUumRCR171tS1GoTX5OD0wrv4UsziMPmrePMtkTnNyYG3g==} engines: {node: '>=14.21.3'} cpu: [x64] os: [linux] - libc: [musl] '@biomejs/cli-linux-x64@2.3.10': resolution: {integrity: sha512-wwAkWD1MR95u+J4LkWP74/vGz+tRrIQvr8kfMMJY8KOQ8+HMVleREOcPYsQX82S7uueco60L58Wc6M1I9WA9Dw==} engines: {node: '>=14.21.3'} cpu: [x64] os: [linux] - libc: [glibc] '@biomejs/cli-win32-arm64@2.3.10': resolution: {integrity: sha512-o7lYc9n+CfRbHvkjPhm8s9FgbKdYZu5HCcGVMItLjz93EhgJ8AM44W+QckDqLA9MKDNFrR8nPbO4b73VC5kGGQ==} @@ -1406,105 +1402,89 @@ packages: resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==} cpu: [arm64] os: [linux] - libc: [glibc] '@img/sharp-libvips-linux-arm@1.2.4': resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==} cpu: [arm] os: [linux] - libc: [glibc] '@img/sharp-libvips-linux-ppc64@1.2.4': resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==} cpu: [ppc64] os: [linux] - libc: [glibc] '@img/sharp-libvips-linux-riscv64@1.2.4': resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==} cpu: [riscv64] os: [linux] - libc: [glibc] '@img/sharp-libvips-linux-s390x@1.2.4': resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==} cpu: [s390x] os: [linux] - libc: [glibc] '@img/sharp-libvips-linux-x64@1.2.4': resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==} cpu: [x64] os: [linux] - libc: [glibc] '@img/sharp-libvips-linuxmusl-arm64@1.2.4': resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==} cpu: [arm64] os: [linux] - libc: [musl] '@img/sharp-libvips-linuxmusl-x64@1.2.4': resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==} cpu: [x64] os: [linux] - libc: [musl] '@img/sharp-linux-arm64@0.34.5': resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm64] os: [linux] - libc: [glibc] '@img/sharp-linux-arm@0.34.5': resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm] os: [linux] - libc: [glibc] '@img/sharp-linux-ppc64@0.34.5': resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [ppc64] os: [linux] - libc: [glibc] '@img/sharp-linux-riscv64@0.34.5': resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [riscv64] os: [linux] - libc: [glibc] '@img/sharp-linux-s390x@0.34.5': resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [s390x] os: [linux] - libc: [glibc] '@img/sharp-linux-x64@0.34.5': resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [x64] os: [linux] - libc: [glibc] '@img/sharp-linuxmusl-arm64@0.34.5': resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm64] os: [linux] - libc: [musl] '@img/sharp-linuxmusl-x64@0.34.5': resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [x64] os: [linux] - libc: [musl] '@img/sharp-wasm32@0.34.5': resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==} @@ -1587,56 +1567,48 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] - libc: [glibc] '@next/swc-linux-arm64-gnu@16.1.1': resolution: {integrity: sha512-/fvHet+EYckFvRLQ0jPHJCUI5/B56+2DpI1xDSvi80r/3Ez+Eaa2Yq4tJcRTaB1kqj/HrYKn8Yplm9bNoMJpwQ==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - libc: [glibc] '@next/swc-linux-arm64-musl@14.2.33': resolution: {integrity: sha512-Bm+QulsAItD/x6Ih8wGIMfRJy4G73tu1HJsrccPW6AfqdZd0Sfm5Imhgkgq2+kly065rYMnCOxTBvmvFY1BKfg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - libc: [musl] '@next/swc-linux-arm64-musl@16.1.1': resolution: {integrity: sha512-MFHrgL4TXNQbBPzkKKur4Fb5ICEJa87HM7fczFs2+HWblM7mMLdco3dvyTI+QmLBU9xgns/EeeINSZD6Ar+oLg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - libc: [musl] '@next/swc-linux-x64-gnu@14.2.33': resolution: {integrity: sha512-FnFn+ZBgsVMbGDsTqo8zsnRzydvsGV8vfiWwUo1LD8FTmPTdV+otGSWKc4LJec0oSexFnCYVO4hX8P8qQKaSlg==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - libc: [glibc] '@next/swc-linux-x64-gnu@16.1.1': resolution: {integrity: sha512-20bYDfgOQAPUkkKBnyP9PTuHiJGM7HzNBbuqmD0jiFVZ0aOldz+VnJhbxzjcSabYsnNjMPsE0cyzEudpYxsrUQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - libc: [glibc] '@next/swc-linux-x64-musl@14.2.33': resolution: {integrity: sha512-345tsIWMzoXaQndUTDv1qypDRiebFxGYx9pYkhwY4hBRaOLt8UGfiWKr9FSSHs25dFIf8ZqIFaPdy5MljdoawA==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - libc: [musl] '@next/swc-linux-x64-musl@16.1.1': resolution: {integrity: sha512-9pRbK3M4asAHQRkwaXwu601oPZHghuSC8IXNENgbBSyImHv/zY4K5udBusgdHkvJ/Tcr96jJwQYOll0qU8+fPA==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - libc: [musl] '@next/swc-win32-arm64-msvc@14.2.33': resolution: {integrity: sha512-nscpt0G6UCTkrT2ppnJnFsYbPDQwmum4GNXYTeoTIdsmMydSKFz9Iny2jpaRupTb+Wl298+Rh82WKzt9LCcqSQ==} @@ -2144,79 +2116,66 @@ packages: resolution: {integrity: sha512-Rn3n+FUk2J5VWx+ywrG/HGPTD9jXNbicRtTM11e/uorplArnXZYsVifnPPqNNP5BsO3roI4n8332ukpY/zN7rQ==} cpu: [arm] os: [linux] - libc: [glibc] '@rollup/rollup-linux-arm-musleabihf@4.55.1': resolution: {integrity: sha512-grPNWydeKtc1aEdrJDWk4opD7nFtQbMmV7769hiAaYyUKCT1faPRm2av8CX1YJsZ4TLAZcg9gTR1KvEzoLjXkg==} cpu: [arm] os: [linux] - libc: [musl] '@rollup/rollup-linux-arm64-gnu@4.55.1': resolution: {integrity: sha512-a59mwd1k6x8tXKcUxSyISiquLwB5pX+fJW9TkWU46lCqD/GRDe9uDN31jrMmVP3feI3mhAdvcCClhV8V5MhJFQ==} cpu: [arm64] os: [linux] - libc: [glibc] '@rollup/rollup-linux-arm64-musl@4.55.1': resolution: {integrity: sha512-puS1MEgWX5GsHSoiAsF0TYrpomdvkaXm0CofIMG5uVkP6IBV+ZO9xhC5YEN49nsgYo1DuuMquF9+7EDBVYu4uA==} cpu: [arm64] os: [linux] - libc: [musl] '@rollup/rollup-linux-loong64-gnu@4.55.1': resolution: {integrity: sha512-r3Wv40in+lTsULSb6nnoudVbARdOwb2u5fpeoOAZjFLznp6tDU8kd+GTHmJoqZ9lt6/Sys33KdIHUaQihFcu7g==} cpu: [loong64] os: [linux] - libc: [glibc] '@rollup/rollup-linux-loong64-musl@4.55.1': resolution: {integrity: sha512-MR8c0+UxAlB22Fq4R+aQSPBayvYa3+9DrwG/i1TKQXFYEaoW3B5b/rkSRIypcZDdWjWnpcvxbNaAJDcSbJU3Lw==} cpu: [loong64] os: [linux] - libc: [musl] '@rollup/rollup-linux-ppc64-gnu@4.55.1': resolution: {integrity: sha512-3KhoECe1BRlSYpMTeVrD4sh2Pw2xgt4jzNSZIIPLFEsnQn9gAnZagW9+VqDqAHgm1Xc77LzJOo2LdigS5qZ+gw==} cpu: [ppc64] os: [linux] - libc: [glibc] '@rollup/rollup-linux-ppc64-musl@4.55.1': resolution: {integrity: sha512-ziR1OuZx0vdYZZ30vueNZTg73alF59DicYrPViG0NEgDVN8/Jl87zkAPu4u6VjZST2llgEUjaiNl9JM6HH1Vdw==} cpu: [ppc64] os: [linux] - libc: [musl] '@rollup/rollup-linux-riscv64-gnu@4.55.1': resolution: {integrity: sha512-uW0Y12ih2XJRERZ4jAfKamTyIHVMPQnTZcQjme2HMVDAHY4amf5u414OqNYC+x+LzRdRcnIG1YodLrrtA8xsxw==} cpu: [riscv64] os: [linux] - libc: [glibc] '@rollup/rollup-linux-riscv64-musl@4.55.1': resolution: {integrity: sha512-u9yZ0jUkOED1BFrqu3BwMQoixvGHGZ+JhJNkNKY/hyoEgOwlqKb62qu+7UjbPSHYjiVy8kKJHvXKv5coH4wDeg==} cpu: [riscv64] os: [linux] - libc: [musl] '@rollup/rollup-linux-s390x-gnu@4.55.1': resolution: {integrity: sha512-/0PenBCmqM4ZUd0190j7J0UsQ/1nsi735iPRakO8iPciE7BQ495Y6msPzaOmvx0/pn+eJVVlZrNrSh4WSYLxNg==} cpu: [s390x] os: [linux] - libc: [glibc] '@rollup/rollup-linux-x64-gnu@4.55.1': resolution: {integrity: sha512-a8G4wiQxQG2BAvo+gU6XrReRRqj+pLS2NGXKm8io19goR+K8lw269eTrPkSdDTALwMmJp4th2Uh0D8J9bEV1vg==} cpu: [x64] os: [linux] - libc: [glibc] '@rollup/rollup-linux-x64-musl@4.55.1': resolution: {integrity: sha512-bD+zjpFrMpP/hqkfEcnjXWHMw5BIghGisOKPj+2NaNDuVT+8Ds4mPf3XcPHuat1tz89WRL+1wbcxKY3WSbiT7w==} cpu: [x64] os: [linux] - libc: [musl] '@rollup/rollup-openbsd-x64@4.55.1': resolution: {integrity: sha512-eLXw0dOiqE4QmvikfQ6yjgkg/xDM+MdU9YJuP4ySTibXU0oAvnEWXt7UDJmD4UkYialMfOGFPJnIHSe/kdzPxg==} @@ -2529,28 +2488,24 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] - libc: [glibc] '@tailwindcss/oxide-linux-arm64-musl@4.1.18': resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - libc: [musl] '@tailwindcss/oxide-linux-x64-gnu@4.1.18': resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - libc: [glibc] '@tailwindcss/oxide-linux-x64-musl@4.1.18': resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - libc: [musl] '@tailwindcss/oxide-wasm32-wasi@4.1.18': resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==} @@ -3175,8 +3130,9 @@ packages: convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} - copilot-design-system@2.3.4: - resolution: {integrity: sha512-dLPxt/Bmqn7a1bwZ1yXzC9GLXnEpbVlxOK6CPuifKhSTATRMA3fKTNcg1Q5AFRBAaTAf/bNvQVu5WvujHmYRtg==} + copilot-design-system@2.4.1: + resolution: {integrity: sha512-t6XnqMCXs24GUEQ8Q+foINGvs2UET44SjHUafvekklHQ6nmv9g84n0lgP/p6t1W/S0nGMRd4KVR3RDYPRtEABg==} + deprecated: This package has been renamed to @assembly-js/design-system peerDependencies: react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 @@ -3817,28 +3773,24 @@ packages: engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] - libc: [glibc] lightningcss-linux-arm64-musl@1.30.2: resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==} engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] - libc: [musl] lightningcss-linux-x64-gnu@1.30.2: resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] - libc: [glibc] lightningcss-linux-x64-musl@1.30.2: resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] - libc: [musl] lightningcss-win32-arm64-msvc@1.30.2: resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==} @@ -7731,7 +7683,7 @@ snapshots: convert-source-map@2.0.0: {} - copilot-design-system@2.3.4(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3): + copilot-design-system@2.4.1(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3): dependencies: '@radix-ui/react-avatar': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) '@radix-ui/react-toast': 1.2.15(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 2023ac0..6cf9f82 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -23,9 +23,9 @@ export default async function Home() {
-
+
-
+
diff --git a/src/app/assets/_variables/_breakpoints.css b/src/app/assets/_variables/_breakpoints.css new file mode 100644 index 0000000..ba9087d --- /dev/null +++ b/src/app/assets/_variables/_breakpoints.css @@ -0,0 +1,17 @@ +@theme { + --breakpoint-uxs: 20rem; /* 320 px */ + --breakpoint-xs: 30rem; /* 480 px */ + --breakpoint-sm: 40rem; /* 640 px */ + --breakpoint-md: 48rem; /* 768 px */ + --breakpoint-lg: 64rem; /* 1024 px */ + --breakpoint-xl: 80rem; /* 1280 px */ + --breakpoint-2xl: 96rem; /* 1536 px */ + + --container-uxs: 20rem; + --container-xs: 30rem; + --container-sm: 40rem; + --container-md: 48rem; + --container-lg: 64rem; + --container-xl: 80rem; + --container-2xl: 96rem; +} diff --git a/src/app/assets/_variables/_colors.css b/src/app/assets/_variables/_colors.css index 25e6af2..96fdc5a 100644 --- a/src/app/assets/_variables/_colors.css +++ b/src/app/assets/_variables/_colors.css @@ -1,16 +1,9 @@ -:root { - --background: #ffffff; - --foreground: #171717; - --text-primary: #212b36; - --text-secondary: #6b6f76; -} - @theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); + --color-background: #ffffff; + --color-foreground: #171717; - --color-text-primary: var(--text-primary); - --color-text-secondary: var(--text-secondary); + --color-text-primary: #212b36; + --color-text-secondary: #6b6f76; --color-text-placeholder: #6b6f76; --color-border-gray: #dfe1e4; diff --git a/src/app/assets/_variables/_typography.css b/src/app/assets/_variables/_typography.css new file mode 100644 index 0000000..b072c04 --- /dev/null +++ b/src/app/assets/_variables/_typography.css @@ -0,0 +1,12 @@ +@theme inline { + --text-body-md: 0.875rem; + --text-body-md--line-height: 1.57143; + + --text-heading-xl: 20px; + --text-heading-xl--line-height: 1.4; + --text-heading-xl--font-weight: 500; + + --text-heading-md: 0.875rem; + --text-heading-md--line-height: 1.57143; + --text-heading-md--font-weight: 500; +} diff --git a/src/app/globals.css b/src/app/globals.css index ebccac9..eae597e 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,6 +1,8 @@ @import "tailwindcss"; @import "./assets/_variables/_colors.css"; +@import "./assets/_variables/_typography.css"; +@import "./assets/_variables/_breakpoints.css"; :root { --font-inter: "Inter", "Arial", "Helvetica", sans-serif; @@ -87,7 +89,9 @@ body { } .tiptap-wrapper { - @apply rounded-xl border border-border-gray px-6 py-5; + @layer base { + @apply rounded-xl border border-border-gray px-6 py-5; + } } .tiptap { diff --git a/src/features/action-items/components/action-item.tsx b/src/features/action-items/components/action-item.tsx new file mode 100644 index 0000000..67f01a8 --- /dev/null +++ b/src/features/action-items/components/action-item.tsx @@ -0,0 +1,54 @@ +import type { ActionDefinition } from '@editor/components/Sidebar/Actions/constant' +import { ViewMode } from '@editor/stores/viewStore' +import { Icon } from 'copilot-design-system' +import { HandleBarTemplate } from '@/features/handlebar-template/components/handle-bar-template' +import { cn } from '@/utils/tailwind' + +interface ActionItemProps { + action: ActionDefinition + isLoading?: boolean + mode: ViewMode + className?: string + portalUrl?: string +} + +export const ActionItem = ({ action, isLoading, mode, className, portalUrl }: ActionItemProps) => { + return ( +
+ {isLoading ? ( +
+
+
+
+ ) : ( + <> +
+
+ +

{action.label}

+
+
+ +
+ + {mode === ViewMode.PREVIEW ? ` ${action.singularLabel?.toLocaleLowerCase()}` : null} +
+ + View all + + + )} +
+ ) +} diff --git a/src/features/action-items/components/actions-card.tsx b/src/features/action-items/components/actions-card.tsx new file mode 100644 index 0000000..3686873 --- /dev/null +++ b/src/features/action-items/components/actions-card.tsx @@ -0,0 +1,68 @@ +import { useViewStore, ViewMode } from '@editor/stores/viewStore' +import { useEnabledActions } from '@settings/hooks/useEnabledActions' +import { useEffect, useState } from 'react' +import { HandleBarTemplate } from '@/features/handlebar-template/components/handle-bar-template' +import { cn } from '@/utils/tailwind' +import { ActionItem } from './action-item' + +interface ActionCardProps { + readonly?: boolean +} + +export const ActionsCard = ({ readonly }: ActionCardProps) => { + const { enabledActions } = useEnabledActions() + const viewMode = useViewStore((store) => store.viewMode) + const [isLoading, setIsLoading] = useState(true) + + const workspace = useViewStore((store) => store.workspace) + + const isPreviewMode = readonly || viewMode === ViewMode.PREVIEW + + useEffect(() => { + // Simulate data loading + const timer = setTimeout(() => { + setIsLoading(false) + }, 2000) + return () => clearTimeout(timer) + }, []) + + if (!enabledActions.length) { + return null + } + + return ( +
+
+

Your Actions

+
+ You have{' '} + {' '} + pending items +
+
+ +
2 ? '@lg:grid-cols-3' : '@lg:grid-cols-2', + enabledActions.length > 3 ? '@xl:grid-cols-4' : '', + )} + > + {enabledActions.map((action) => ( + + ))} +
+
+ ) +} diff --git a/src/features/editor/components/ClientEditorWrapper.tsx b/src/features/editor/components/ClientEditorWrapper.tsx index 04faedb..d912597 100644 --- a/src/features/editor/components/ClientEditorWrapper.tsx +++ b/src/features/editor/components/ClientEditorWrapper.tsx @@ -3,6 +3,7 @@ import { useAuthStore } from '@auth/providers/auth.provider' import { ReadonlyEditor } from '@editor/components/Editor/ReadonlyEditor' import { useSettingsStore } from '@settings/providers/settings.provider' +import { ActionsCard } from '@/features/action-items/components/actions-card' import { Heading } from './Heading' import { Subheading } from './Subheading' @@ -12,9 +13,10 @@ export const ClientEditorWrapper = () => { const backgroundColor = useSettingsStore((store) => store.backgroundColor) return ( -
+
+
) diff --git a/src/features/editor/components/EditorWrapper.tsx b/src/features/editor/components/EditorWrapper.tsx index d4e2e84..f98d7b4 100644 --- a/src/features/editor/components/EditorWrapper.tsx +++ b/src/features/editor/components/EditorWrapper.tsx @@ -8,6 +8,7 @@ import { Subheading } from '@editor/components/Subheading' import { useAppControls } from '@editor/hooks/useAppControls' import { useSettingsStore } from '@settings/providers/settings.provider' import { Activity } from 'react' +import { ActionsCard } from '@/features/action-items/components/actions-card' import { useViewStore, ViewMode } from '@/features/editor/stores/viewStore' import { getActivityMode } from '@/utils/activity' @@ -22,9 +23,10 @@ export function EditorWrapper() { return (
-
+
+
diff --git a/src/features/editor/components/Preview/Preview.tsx b/src/features/editor/components/Preview/Preview.tsx index f09670f..6216a83 100644 --- a/src/features/editor/components/Preview/Preview.tsx +++ b/src/features/editor/components/Preview/Preview.tsx @@ -2,6 +2,7 @@ import { Loader } from '@common/components/Loader' import { ReadonlyEditor } from '@editor/components/Editor/ReadonlyEditor' import { PreviewTopBar } from '@editor/components/Preview/PreviewTopBar' import { DisplayMode, useViewStore } from '@editor/stores/viewStore' +import { ActionsCard } from '@/features/action-items/components/actions-card' import { cn } from '@/utils/tailwind' import { Heading } from '../Heading' import { Subheading } from '../Subheading' @@ -19,7 +20,7 @@ export function Preview({ token, content, backgroundColor }: PreviewProps) { return (
) : ( -
+
+
diff --git a/src/features/editor/components/Sidebar/Actions/constant.ts b/src/features/editor/components/Sidebar/Actions/constant.ts index e1ee0b8..7126838 100644 --- a/src/features/editor/components/Sidebar/Actions/constant.ts +++ b/src/features/editor/components/Sidebar/Actions/constant.ts @@ -1,7 +1,66 @@ -export const ActionItemLabel = { +import type { ActionItemIcon, ActionItemLabelType } from '@editor/components/Sidebar/Actions/type' +import type { SettingsUpdateDto } from '@settings/lib/settings-actions.dto' +import type { TemplateString } from '@/features/handlebar-template/types/hande-bar-template.type' + +export const ActionItemLabel = Object.freeze({ INVOICE: 'Invoice', MESSAGE: 'Message', CONTRACT: 'Contract', TASKS: 'Tasks', FORMS: 'Forms', -} as const +}) + +/** TODO: fix for files */ +type ActionKey = keyof NonNullable + +export type ActionDefinition = { + label: string + icon: ActionItemIcon + template: TemplateString + key: ActionKey + singularLabel?: string + appUrlPath: string +} + +export const ActionDefinitions = Object.freeze({ + [ActionItemLabel.INVOICE]: { + label: 'Invoices', + singularLabel: 'Invoice', + icon: 'Billing', + template: `{{invoices.count}}`, + key: 'invoices', + appUrlPath: 'invoices', + }, + [ActionItemLabel.MESSAGE]: { + label: 'Messages', + singularLabel: 'Message', + icon: 'Message', + template: `{{messages.count}}`, + key: 'messages', + appUrlPath: 'messaging', + }, + [ActionItemLabel.CONTRACT]: { + label: 'Contracts', + icon: 'Contract', + singularLabel: 'Contract', + template: `{{contracts.count}}`, + key: 'contracts', + appUrlPath: 'contracts', + }, + [ActionItemLabel.TASKS]: { + label: 'Tasks', + singularLabel: 'Task', + icon: 'Tasks', + template: `{{tasks.count}}`, + key: 'tasks', + appUrlPath: 'apps?id=619c8d0f-3ff1-4507-b696-5e5c0d73a19d', + }, + [ActionItemLabel.FORMS]: { + label: 'Forms', + singularLabel: 'Form', + icon: 'Form', + template: `{{forms.count}}`, + key: 'forms', + appUrlPath: 'forms', + }, +} satisfies Record) diff --git a/src/features/editor/components/Sidebar/Actions/useActions.tsx b/src/features/editor/components/Sidebar/Actions/useActions.tsx index c6d35e5..59b956b 100644 --- a/src/features/editor/components/Sidebar/Actions/useActions.tsx +++ b/src/features/editor/components/Sidebar/Actions/useActions.tsx @@ -1,39 +1,20 @@ -import { ActionItemLabel } from '@editor/components/Sidebar/Actions/constant' -import type { ActionItemIcon, ActionItemLabelType } from '@editor/components/Sidebar/Actions/type' -import type { SettingsUpdateDto } from '@settings/lib/settings-actions.dto' +import { ActionDefinitions } from '@editor/components/Sidebar/Actions/constant' import { useSettingsStore } from '@settings/providers/settings.provider' -export const actionIcons: Record = { - [ActionItemLabel.INVOICE]: 'Billing', - [ActionItemLabel.MESSAGE]: 'Message', - [ActionItemLabel.CONTRACT]: 'Contract', - [ActionItemLabel.TASKS]: 'Tasks', - [ActionItemLabel.FORMS]: 'Form', -} - -type ActionKey = keyof NonNullable - -export const actionKeys: Record = { - [ActionItemLabel.INVOICE]: 'invoices', - [ActionItemLabel.MESSAGE]: 'messages', - [ActionItemLabel.CONTRACT]: 'contracts', - [ActionItemLabel.TASKS]: 'tasks', - [ActionItemLabel.FORMS]: 'forms', -} - export const useActions = () => { const actions = useSettingsStore((s) => s.actions) const setActions = useSettingsStore((s) => s.setActions) - const actionItems = Object.keys(actionIcons).map((k) => ({ - label: k, - icon: actionIcons[k as ActionItemLabelType], - checked: actions[actionKeys[k as ActionItemLabelType]] ?? false, - onChange: () => { - const key = actionKeys[k as ActionItemLabelType] - setActions({ [key]: !actions[key] }) - }, - })) + const actionItems = Object.values(ActionDefinitions).map((item) => { + return { + label: item.label, + icon: item.icon, + checked: actions?.[item.key] ?? false, + onChange: () => { + setActions({ [item.key]: !actions[item.key] }) + }, + } + }) return { actionItems } } diff --git a/src/features/editor/components/Sidebar/BackgroundColor/BackgroundColor.tsx b/src/features/editor/components/Sidebar/BackgroundColor/BackgroundColor.tsx index eee26b5..8887929 100644 --- a/src/features/editor/components/Sidebar/BackgroundColor/BackgroundColor.tsx +++ b/src/features/editor/components/Sidebar/BackgroundColor/BackgroundColor.tsx @@ -22,7 +22,7 @@ export const BackgroundColor = () => { */}
+