From 71875dd3b6105bb85295f9fe6d1c128c98cb03d4 Mon Sep 17 00:00:00 2001 From: brunagarcia Date: Sun, 18 Aug 2024 01:09:51 -0700 Subject: [PATCH 1/4] Add new according package from Radix and also for icons. --- package-lock.json | 179 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 + 2 files changed, 181 insertions(+) diff --git a/package-lock.json b/package-lock.json index d24b8f0..d72c4e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,9 @@ "name": "vanjs", "version": "0.1.0", "dependencies": { + "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-avatar": "^1.1.0", + "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-slot": "^1.1.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", @@ -402,6 +404,43 @@ "node": ">=14" } }, + "node_modules/@radix-ui/primitive": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz", + "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==", + "license": "MIT" + }, + "node_modules/@radix-ui/react-accordion": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.0.tgz", + "integrity": "sha512-HJOzSX8dQqtsp/3jVxCU3CXEONF7/2jlGAB28oX8TTw1Dz8JYbEI1UcL8355PuLBE41/IRRMvCw7VkiK/jcUOQ==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collapsible": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-avatar": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.0.tgz", @@ -427,6 +466,62 @@ } } }, + "node_modules/@radix-ui/react-collapsible": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.0.tgz", + "integrity": "sha512-zQY7Epa8sTL0mq4ajSJpjgn2YmCgyrG7RsQgLp3C0LQVkG7+Tf6Pv1CeNWZLyqMjhdPkBa5Lx7wYBeSu7uCSTA==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collection": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz", + "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", @@ -455,6 +550,72 @@ } } }, + "node_modules/@radix-ui/react-direction": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz", + "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-icons": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz", + "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==", + "license": "MIT", + "peerDependencies": { + "react": "^16.x || ^17.x || ^18.x" + } + }, + "node_modules/@radix-ui/react-id": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz", + "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-presence": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz", + "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-primitive": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz", @@ -508,6 +669,24 @@ } } }, + "node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz", + "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-use-callback-ref": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-layout-effect": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz", diff --git a/package.json b/package.json index d3efe1c..2458b8e 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,9 @@ "lint": "next lint" }, "dependencies": { + "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-avatar": "^1.1.0", + "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-slot": "^1.1.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", From 935ee8f96fca19b742dfd4b5b81ff199f7db66fa Mon Sep 17 00:00:00 2001 From: brunagarcia Date: Sun, 18 Aug 2024 01:17:53 -0700 Subject: [PATCH 2/4] Add accordion with FAQ initial content to page and create the component for it. --- src/app/page.js | 23 +++++-- src/components/ui/accordion/index.jsx | 81 ++++++++++++++++++++++ src/components/ui/accordion/styles.css | 95 ++++++++++++++++++++++++++ 3 files changed, 192 insertions(+), 7 deletions(-) create mode 100644 src/components/ui/accordion/index.jsx create mode 100644 src/components/ui/accordion/styles.css diff --git a/src/app/page.js b/src/app/page.js index 06f0b75..5d7dee9 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,5 +1,6 @@ import Link from "next/link"; import { Button } from "@/components/ui/button"; +import { AccordionFAQ } from "@/components/ui/accordion/index"; import { Card, CardHeader, @@ -63,6 +64,13 @@ export default function Home() { > Speakers + + FAQ + -
-
-
-
+
+
+
+

FAQs

+

+ Some frequent questions from our community: +

+
diff --git a/src/components/ui/accordion/index.jsx b/src/components/ui/accordion/index.jsx new file mode 100644 index 0000000..4402326 --- /dev/null +++ b/src/components/ui/accordion/index.jsx @@ -0,0 +1,81 @@ +import * as React from "react"; +import * as Accordion from "@radix-ui/react-accordion"; +import { cn } from "@/lib/utils"; +import { ChevronDownIcon } from "@radix-ui/react-icons"; +import "./styles.css"; +import { cva } from "class-variance-authority"; + +export const AccordionFAQ = () => ( +
+ + + Who can attend the meetup? + + Our meetup is open to everyone that wants to learn and engage on the + javascript community in Vancouver! Whether you’re a beginner, a + seasoned developer, or just curious about JavaScript, you’re welcome + to join. + + + + + + When and where does the meetup take place? + + + {/* Explain a bit how we get sponsor by places that provide a location bla bla bla */} + We meet on the specific (DATE-HERE) at (EVENT-PLACE). Check our + website or social channels for the latest updates. + + + + + Are there refreshments provided? + +
+ Yes, we usually offer refreshments and pizza that are provided by + our sponsors and the ticket fee. +
+
+
+
+
+); + +const AccordionTrigger = React.forwardRef( + ({ children, className, ...props }, forwardedRef) => ( + + + {children} + + + + ) +); + +AccordionTrigger.displayName = Accordion.Trigger.displayName; + +const AccordionContent = React.forwardRef( + ({ children, className, ...props }, forwardedRef) => ( + +
{children}
+
+ ) +); + +AccordionContent.displayName = Accordion.Content.displayName; diff --git a/src/components/ui/accordion/styles.css b/src/components/ui/accordion/styles.css new file mode 100644 index 0000000..b59e588 --- /dev/null +++ b/src/components/ui/accordion/styles.css @@ -0,0 +1,95 @@ +/* reset */ +button, +h3 { + all: unset; +} + +.AccordionRoot { + border-radius: 6px; +} + +.AccordionItem { + overflow: hidden; + margin-top: 1px; +} + +.AccordionItem:first-child { + margin-top: 0; + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +.AccordionItem:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} + +.AccordionItem:focus-within { + position: relative; + z-index: 1; +} + +.AccordionHeader { + display: flex; +} + +.AccordionTrigger { + font-family: inherit; + background-color: transparent; + padding: 0 20px; + height: 45px; + flex: 1; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 15px; + line-height: 1; + color: var(--violet-11); + background-color: white; +} + +.AccordionTrigger:hover { + background-color: var(blue); +} + +.AccordionContent { + overflow: hidden; + font-size: 15px; + color: black; +} +.AccordionContent[data-state="open"] { + animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1); +} +.AccordionContent[data-state="closed"] { + animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1); +} + +.AccordionContentText { + padding: 15px 20px; +} + +.AccordionChevron { + color: rgb(254, 185, 47, 1); + transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1); +} +.AccordionTrigger[data-state="open"] > .AccordionChevron { + transform: rotate(180deg); +} + +@keyframes slideDown { + from { + height: 0; + } + to { + height: var(--radix-accordion-content-height); + } +} + +@keyframes slideUp { + from { + height: var(--radix-accordion-content-height); + } + to { + height: 0; + } +} From 98257bccf6719abe2a015228efa1cf5f2fcb6869 Mon Sep 17 00:00:00 2001 From: brunagarcia Date: Sun, 18 Aug 2024 01:19:35 -0700 Subject: [PATCH 3/4] Add FAQ --- src/app/page.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/page.js b/src/app/page.js index 5d7dee9..72d0d49 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -448,7 +448,7 @@ export default function Home() {
-
+

FAQs

From 8fcd7cca02b5c432d1209f9974106a8096fc7f33 Mon Sep 17 00:00:00 2001 From: bibianasouza Date: Sun, 18 Aug 2024 08:43:09 -0700 Subject: [PATCH 4/4] tweaked copy --- src/components/ui/accordion/index.jsx | 43 ++++++++++++++++----------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/src/components/ui/accordion/index.jsx b/src/components/ui/accordion/index.jsx index 4402326..a98f543 100644 --- a/src/components/ui/accordion/index.jsx +++ b/src/components/ui/accordion/index.jsx @@ -3,7 +3,6 @@ import * as Accordion from "@radix-ui/react-accordion"; import { cn } from "@/lib/utils"; import { ChevronDownIcon } from "@radix-ui/react-icons"; import "./styles.css"; -import { cva } from "class-variance-authority"; export const AccordionFAQ = () => (
@@ -15,11 +14,12 @@ export const AccordionFAQ = () => ( > Who can attend the meetup? - - Our meetup is open to everyone that wants to learn and engage on the - javascript community in Vancouver! Whether you’re a beginner, a - seasoned developer, or just curious about JavaScript, you’re welcome - to join. + + Our meetup welcomes everyone interested in the Vancouver JavaScript + community! Whether you are a complete beginner, an experienced + developer, or simply curious about JavaScript, we invite you to join + us. We welcome humans from all backgrounds, genders, ages and + experiences—come be part of our community! @@ -27,21 +27,30 @@ export const AccordionFAQ = () => ( When and where does the meetup take place? - - {/* Explain a bit how we get sponsor by places that provide a location bla bla bla */} - We meet on the specific (DATE-HERE) at (EVENT-PLACE). Check our - website or social channels for the latest updates. + + We usually meet once a month, and occasionally have smaller related + events running 1-2 times a month. The location varies, largely + depending on our ability to secure a venue. We typically announce the + details a month in advance. - Are there refreshments provided? - -
- Yes, we usually offer refreshments and pizza that are provided by - our sponsors and the ticket fee. -
-
+ + You have sponsors but charge for the ticket? + + + Our entrance fee is mostly symbolic, as we ran VanJS free of charge + for the longest time and found that 40% of the RSVPs were no-shows, + leaving us with tons of food and drinks that went to waste. The meetup + organizers don't take profit from the event, everything is + reinvested into the meetup (prizes, better venues, parties, etc). +
+
+ If you want to attend the meetup but have no means to contribute at + this time, reach out to one of our organizers on LinkedIn and they + will be happy to assist on a case-by-case basis. +