diff --git a/apps/site/package.json b/apps/site/package.json index 28ba05bb..752dc74c 100644 --- a/apps/site/package.json +++ b/apps/site/package.json @@ -11,12 +11,12 @@ "dependencies": { "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-checkbox": "^1.0.4", - "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-navigation-menu": "^1.1.4", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toast": "^1.1.5", "clsx": "^2.0.0", + "lucide-react": "^0.292.0", "next": "13.5.6", "react": "^18", "react-dom": "^18" @@ -30,6 +30,7 @@ "eslint-config-next": "13.5.6", "postcss": "^8", "postcss-nesting": "^12.0.1", + "sass": "^1.69.5", "tailwindcss": "^3", "typescript": "^5" } diff --git a/apps/site/src/lib/components/Accordion/Accordion.module.scss b/apps/site/src/lib/components/Accordion/Accordion.module.scss new file mode 100644 index 00000000..fb1879b9 --- /dev/null +++ b/apps/site/src/lib/components/Accordion/Accordion.module.scss @@ -0,0 +1,80 @@ +.root { + color: black; +} + +.item { + border-bottom: 2px #36352f solid; +} + +.trigger { + width: 100%; + padding: 20px 0; + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fff; + + font-size: 24px; + font-weight: 700; + line-height: 150%; /* 36px */ + + .icons { + $icon-size: 24px; + + position: relative; + width: $icon-size; + height: $icon-size; + + > * { + position: absolute; + left: 0; + top: 0; + width: $icon-size; + height: $icon-size; + opacity: 0; + } + } + + &[data-state="closed"] .plusIcon { + opacity: 1; + } + &[data-state="open"] .minusIcon { + opacity: 1; + } +} + +.content { + font-size: 20px; + font-weight: 500; + line-height: 125%; + overflow: hidden; + + .contentPadding { + padding-bottom: 24px; + } + + @keyframes slideDown { + from { + height: 0; + } + to { + height: var(--radix-accordion-content-height); + } + } + + @keyframes slideUp { + from { + height: var(--radix-accordion-content-height); + } + to { + height: 0; + } + } + + &[data-state="open"] { + animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1); + } + &[data-state="closed"] { + animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1); + } +} diff --git a/apps/site/src/lib/components/Accordion/Accordion.tsx b/apps/site/src/lib/components/Accordion/Accordion.tsx new file mode 100644 index 00000000..d08af235 --- /dev/null +++ b/apps/site/src/lib/components/Accordion/Accordion.tsx @@ -0,0 +1,70 @@ +"use client"; + +import React from "react"; +import * as RadixAccordion from "@radix-ui/react-accordion"; +import { Plus, Minus } from "lucide-react"; +import clsx from "clsx"; + +import styles from "./Accordion.module.scss"; + +export const Root = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ children, className, ...props }, forwardedRef) => ( + + {children} + +)); +Root.displayName = RadixAccordion.Root.displayName; + +export const Item = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ children, className, ...props }, forwardedRef) => ( + + {children} + +)); +Item.displayName = RadixAccordion.Item.displayName; + +export const Trigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ children, className, ...props }, forwardedRef) => ( + + + {children} +
+ + +
+ + +)); +Trigger.displayName = "AccordionTrigger"; + +export const Content = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ children, className, ...props }, forwardedRef) => ( + +
{children}
+ +)); +Content.displayName = RadixAccordion.Content.displayName; diff --git a/apps/site/src/lib/components/Accordion/index.ts b/apps/site/src/lib/components/Accordion/index.ts new file mode 100644 index 00000000..4640e94d --- /dev/null +++ b/apps/site/src/lib/components/Accordion/index.ts @@ -0,0 +1 @@ +export { Root, Item, Trigger, Content } from "./Accordion"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index efc4c3d3..e637d571 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,9 +29,6 @@ importers: '@radix-ui/react-checkbox': specifier: ^1.0.4 version: 1.0.4(@types/react-dom@18.2.3)(@types/react@18.2.5)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-icons': - specifier: ^1.3.0 - version: 1.3.0(react@18.2.0) '@radix-ui/react-navigation-menu': specifier: ^1.1.4 version: 1.1.4(@types/react-dom@18.2.3)(@types/react@18.2.5)(react-dom@18.2.0)(react@18.2.0) @@ -47,9 +44,12 @@ importers: clsx: specifier: ^2.0.0 version: 2.0.0 + lucide-react: + specifier: ^0.292.0 + version: 0.292.0(react@18.2.0) next: specifier: 13.5.6 - version: 13.5.6(react-dom@18.2.0)(react@18.2.0) + version: 13.5.6(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5) react: specifier: ^18 version: 18.2.0 @@ -81,6 +81,9 @@ importers: postcss-nesting: specifier: ^12.0.1 version: 12.0.1(postcss@8.4.14) + sass: + specifier: ^1.69.5 + version: 1.69.5 tailwindcss: specifier: ^3 version: 3.3.4 @@ -894,14 +897,6 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /@radix-ui/react-icons@1.3.0(react@18.2.0): - resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==} - peerDependencies: - react: ^16.x || ^17.x || ^18.x - dependencies: - react: 18.2.0 - dev: false - /@radix-ui/react-id@1.0.1(@types/react@18.2.5)(react@18.2.0): resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==} peerDependencies: @@ -1796,7 +1791,6 @@ packages: dependencies: normalize-path: 3.0.0 picomatch: 2.3.1 - dev: true /arg@4.1.3: resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==} @@ -1969,7 +1963,6 @@ packages: /binary-extensions@2.2.0: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} - dev: true /bl@4.1.0: resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==} @@ -2004,7 +1997,6 @@ packages: engines: {node: '>=8'} dependencies: fill-range: 7.0.1 - dev: true /browserslist@4.21.10: resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==} @@ -2138,7 +2130,6 @@ packages: readdirp: 3.6.0 optionalDependencies: fsevents: 2.3.3 - dev: true /ci-info@3.8.0: resolution: {integrity: sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==} @@ -2613,7 +2604,7 @@ packages: eslint: 8.48.0 eslint-import-resolver-node: 0.3.7 eslint-import-resolver-typescript: 3.6.0(@typescript-eslint/parser@6.5.0)(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.28.1)(eslint@8.48.0) - eslint-plugin-import: 2.28.1(eslint@8.48.0) + eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.5.0)(eslint-import-resolver-typescript@3.6.0)(eslint@8.48.0) eslint-plugin-jsx-a11y: 6.7.1(eslint@8.48.0) eslint-plugin-react: 7.33.2(eslint@8.48.0) eslint-plugin-react-hooks: 4.6.0(eslint@8.48.0) @@ -2671,7 +2662,7 @@ packages: enhanced-resolve: 5.13.0 eslint: 8.48.0 eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.5.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.6.0)(eslint@8.48.0) - eslint-plugin-import: 2.28.1(eslint@8.48.0) + eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.5.0)(eslint-import-resolver-typescript@3.6.0)(eslint@8.48.0) fast-glob: 3.3.1 get-tsconfig: 4.5.0 is-core-module: 2.12.0 @@ -2794,34 +2785,6 @@ packages: - supports-color dev: true - /eslint-module-utils@2.8.0(eslint-import-resolver-node@0.3.7)(eslint@8.48.0): - resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==} - engines: {node: '>=4'} - peerDependencies: - '@typescript-eslint/parser': '*' - eslint: '*' - eslint-import-resolver-node: '*' - eslint-import-resolver-typescript: '*' - eslint-import-resolver-webpack: '*' - peerDependenciesMeta: - '@typescript-eslint/parser': - optional: true - eslint: - optional: true - eslint-import-resolver-node: - optional: true - eslint-import-resolver-typescript: - optional: true - eslint-import-resolver-webpack: - optional: true - dependencies: - debug: 3.2.7 - eslint: 8.48.0 - eslint-import-resolver-node: 0.3.7 - transitivePeerDependencies: - - supports-color - dev: true - /eslint-plugin-eslint-comments@3.2.0(eslint@8.48.0): resolution: {integrity: sha512-0jkOl0hfojIHHmEHgmNdqv4fmh7300NdpA9FFpF7zaoLvB/QeXOGNLIo86oAveJFrfB1p05kC8hpEMHM8DwWVQ==} engines: {node: '>=6.5.0'} @@ -2833,7 +2796,7 @@ packages: ignore: 5.2.4 dev: true - /eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.5.0)(eslint@8.48.0): + /eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.5.0)(eslint-import-resolver-typescript@3.6.0)(eslint@8.48.0): resolution: {integrity: sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==} engines: {node: '>=4'} peerDependencies: @@ -2843,7 +2806,7 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 6.5.0(eslint@8.48.0)(typescript@4.9.5) + '@typescript-eslint/parser': 6.5.0(eslint@8.48.0)(typescript@5.2.2) array-includes: 3.1.6 array.prototype.findlastindex: 1.2.2 array.prototype.flat: 1.3.1 @@ -2852,7 +2815,7 @@ packages: doctrine: 2.1.0 eslint: 8.48.0 eslint-import-resolver-node: 0.3.7 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.5.0)(eslint-import-resolver-node@0.3.7)(eslint@8.48.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.5.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.6.0)(eslint@8.48.0) has: 1.0.3 is-core-module: 2.13.0 is-glob: 4.0.3 @@ -2868,7 +2831,7 @@ packages: - supports-color dev: true - /eslint-plugin-import@2.28.1(eslint@8.48.0): + /eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.5.0)(eslint@8.48.0): resolution: {integrity: sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==} engines: {node: '>=4'} peerDependencies: @@ -2878,6 +2841,7 @@ packages: '@typescript-eslint/parser': optional: true dependencies: + '@typescript-eslint/parser': 6.5.0(eslint@8.48.0)(typescript@4.9.5) array-includes: 3.1.6 array.prototype.findlastindex: 1.2.2 array.prototype.flat: 1.3.1 @@ -2886,7 +2850,7 @@ packages: doctrine: 2.1.0 eslint: 8.48.0 eslint-import-resolver-node: 0.3.7 - eslint-module-utils: 2.8.0(eslint-import-resolver-node@0.3.7)(eslint@8.48.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.5.0)(eslint-import-resolver-node@0.3.7)(eslint@8.48.0) has: 1.0.3 is-core-module: 2.13.0 is-glob: 4.0.3 @@ -3249,7 +3213,6 @@ packages: engines: {node: '>=8'} dependencies: to-regex-range: 5.0.1 - dev: true /find-up@4.1.0: resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==} @@ -3316,7 +3279,6 @@ packages: engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} os: [darwin] requiresBuild: true - dev: true optional: true /function-bind@1.1.1: @@ -3399,7 +3361,6 @@ packages: engines: {node: '>= 6'} dependencies: is-glob: 4.0.3 - dev: true /glob-parent@6.0.2: resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} @@ -3627,6 +3588,9 @@ packages: engines: {node: '>= 4'} dev: true + /immutable@4.3.4: + resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==} + /import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -3761,7 +3725,6 @@ packages: engines: {node: '>=8'} dependencies: binary-extensions: 2.2.0 - dev: true /is-boolean-object@1.1.2: resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==} @@ -3815,7 +3778,6 @@ packages: /is-extglob@2.1.1: resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} engines: {node: '>=0.10.0'} - dev: true /is-finalizationregistry@1.0.2: resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==} @@ -3840,7 +3802,6 @@ packages: engines: {node: '>=0.10.0'} dependencies: is-extglob: 2.1.1 - dev: true /is-inside-container@1.0.0: resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==} @@ -3879,7 +3840,6 @@ packages: /is-number@7.0.0: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} - dev: true /is-path-cwd@2.2.0: resolution: {integrity: sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==} @@ -4180,6 +4140,14 @@ packages: engines: {node: '>=12'} dev: true + /lucide-react@0.292.0(react@18.2.0): + resolution: {integrity: sha512-rRgUkpEHWpa5VCT66YscInCQmQuPCB1RFRzkkxMxg4b+jaL0V12E3riWWR2Sh5OIiUhCwGW/ZExuEO4Az32E6Q==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 + dependencies: + react: 18.2.0 + dev: false + /make-error@1.3.6: resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==} dev: true @@ -4277,7 +4245,7 @@ packages: engines: {node: '>= 0.4.0'} dev: true - /next@13.5.6(react-dom@18.2.0)(react@18.2.0): + /next@13.5.6(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5): resolution: {integrity: sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==} engines: {node: '>=16.14.0'} hasBin: true @@ -4299,6 +4267,7 @@ packages: postcss: 8.4.31 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + sass: 1.69.5 styled-jsx: 5.1.1(react@18.2.0) watchpack: 2.4.0 optionalDependencies: @@ -4355,7 +4324,6 @@ packages: /normalize-path@3.0.0: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} - dev: true /normalize-range@0.1.2: resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} @@ -4654,7 +4622,6 @@ packages: /picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} - dev: true /pify@2.3.0: resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==} @@ -4940,7 +4907,6 @@ packages: engines: {node: '>=8.10.0'} dependencies: picomatch: 2.3.1 - dev: true /reflect.getprototypeof@1.0.3: resolution: {integrity: sha512-TTAOZpkJ2YLxl7mVHWrNo3iDMEkYlva/kgFcXndqMgbo/AZUmmavEkdXV+hXtE4P8xdyEKRzalaFqZVuwIk/Nw==} @@ -5101,6 +5067,15 @@ packages: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} dev: true + /sass@1.69.5: + resolution: {integrity: sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + chokidar: 3.5.3 + immutable: 4.3.4 + source-map-js: 1.0.2 + /scheduler@0.23.0: resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} dependencies: @@ -5505,7 +5480,6 @@ packages: engines: {node: '>=8.0'} dependencies: is-number: 7.0.0 - dev: true /ts-api-utils@1.0.2(typescript@4.9.5): resolution: {integrity: sha512-Cbu4nIqnEdd+THNEsBdkolnOXhg0I8XteoHaEKgvsxpsbWda4IsUut2c187HxywQCvveojow0Dgw/amxtSKVkQ==}