From e16024a284a3fb08f2432294095ee2565eacf3fe Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Sat, 5 Mar 2022 12:29:08 +0200 Subject: [PATCH] Popover component --- app/components/Popover.tsx | 31 ++++++++++++++++++ app/styles/global.css | 9 ++++++ package-lock.json | 64 ++++++++++++++++++++++++++++++++++++++ package.json | 2 ++ 4 files changed, 106 insertions(+) create mode 100644 app/components/Popover.tsx diff --git a/app/components/Popover.tsx b/app/components/Popover.tsx new file mode 100644 index 000000000..ccfa7fa13 --- /dev/null +++ b/app/components/Popover.tsx @@ -0,0 +1,31 @@ +import { Popover as HeadlessPopover } from "@headlessui/react"; +import * as React from "react"; +import { usePopper } from "react-popper"; + +export function Popover({ children }: { children: React.ReactNode }) { + const [referenceElement, setReferenceElement] = React.useState(); + const [popperElement, setPopperElement] = React.useState(); + const { styles, attributes } = usePopper(referenceElement, popperElement); + + return ( + + + INFO + + + + {children} + + + ); +} diff --git a/app/styles/global.css b/app/styles/global.css index 42f4b45b6..5f9b11772 100644 --- a/app/styles/global.css +++ b/app/styles/global.css @@ -419,6 +419,15 @@ hr { font-weight: var(--bold); } +.popover-content { + max-width: 20rem; + padding: var(--s-2); + backdrop-filter: blur(10px) brightness(75%); + border-radius: var(--rounded); + font-size: var(--fonts-sm); + font-weight: var(--semi-bold); +} + .four-zero-one__container { text-align: center; } diff --git a/package-lock.json b/package-lock.json index f3bb7c0b1..248bbb1de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@dnd-kit/sortable": "^6.0.0", "@dnd-kit/utilities": "^3.1.0", "@headlessui/react": "^1.5.0", + "@popperjs/core": "^2.11.2", "@prisma/client": "^3.10.0", "@remix-run/express": "^1.2.3", "@remix-run/react": "^1.2.3", @@ -30,6 +31,7 @@ "passport-discord": "^0.1.4", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-popper": "^2.2.5", "remix": "^1.2.3", "tiny-invariant": "^1.2.0", "ts-trueskill": "^3.3.0", @@ -462,6 +464,15 @@ "node": ">=10" } }, + "node_modules/@popperjs/core": { + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz", + "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@prisma/client": { "version": "3.10.0", "resolved": "https://registry.npmjs.org/@prisma/client/-/client-3.10.0.tgz", @@ -8346,12 +8357,30 @@ "react": "17.0.2" } }, + "node_modules/react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-popper": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", + "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", + "dependencies": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + }, + "peerDependencies": { + "@popperjs/core": "^2.0.0", + "react": "^16.8.0 || ^17" + } + }, "node_modules/react-router": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz", @@ -10394,6 +10423,14 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/web-encoding": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/web-encoding/-/web-encoding-1.1.5.tgz", @@ -10989,6 +11026,11 @@ "rimraf": "^3.0.2" } }, + "@popperjs/core": { + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz", + "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==" + }, "@prisma/client": { "version": "3.10.0", "resolved": "https://registry.npmjs.org/@prisma/client/-/client-3.10.0.tgz", @@ -16104,12 +16146,26 @@ "scheduler": "^0.20.2" } }, + "react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "react-popper": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", + "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", + "requires": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + } + }, "react-router": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz", @@ -17527,6 +17583,14 @@ "unist-util-stringify-position": "^3.0.0" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "web-encoding": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/web-encoding/-/web-encoding-1.1.5.tgz", diff --git a/package.json b/package.json index 3caf34994..4ff95c0e2 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@dnd-kit/sortable": "^6.0.0", "@dnd-kit/utilities": "^3.1.0", "@headlessui/react": "^1.5.0", + "@popperjs/core": "^2.11.2", "@prisma/client": "^3.10.0", "@remix-run/express": "^1.2.3", "@remix-run/react": "^1.2.3", @@ -48,6 +49,7 @@ "passport-discord": "^0.1.4", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-popper": "^2.2.5", "remix": "^1.2.3", "tiny-invariant": "^1.2.0", "ts-trueskill": "^3.3.0",