Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-08 12:16:12 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Popover component

Browse Source
This commit is contained in:
Kalle
2022-03-05 12:29:08 +02:00
parent 83e00256f2
commit e16024a284
4 changed files with 106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/components/Popover.tsx Normal file
View File

@@ -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 (
<HeadlessPopover>
<HeadlessPopover.Button
// @ts-expect-error Popper docs: https://popper.js.org/react-popper/v2/
ref={setReferenceElement}
className="minimal tiny"
>
INFO
</HeadlessPopover.Button>
<HeadlessPopover.Panel
// @ts-expect-error Popper docs: https://popper.js.org/react-popper/v2/
ref={setPopperElement}
className="popover-content"
style={styles.popper}
{...attributes.popper}
>
{children}
</HeadlessPopover.Panel>
</HeadlessPopover>
);
}

9
app/styles/global.css
View File

@@ -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;
}

64
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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",