From c9cb36d24e142690e70b61669c46873214df7f7a Mon Sep 17 00:00:00 2001 From: Peer Richelsen Date: Sat, 7 Aug 2021 14:02:01 +0200 Subject: [PATCH] added ToolTip component and added to EventTypes --- components/Tooltip.tsx | 36 ++++++++++ package.json | 2 + pages/event-types/index.tsx | 31 +++++---- yarn.lock | 130 +++++++++++++++++++++++++++++++++++- 4 files changed, 184 insertions(+), 15 deletions(-) create mode 100644 components/Tooltip.tsx diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx new file mode 100644 index 00000000..dfab8cdd --- /dev/null +++ b/components/Tooltip.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import * as TooltipPrimitive from "@radix-ui/react-tooltip"; +import { Slot } from "@radix-ui/react-slot"; + +export function Tooltip({ + children, + content, + open, + defaultOpen, + onOpenChange, + ...props +}: { + [x: string]: any; + children: React.ReactNode; + content: React.ReactNode; + open: boolean; + defaultOpen: boolean; + onOpenChange: (open: boolean) => void; +}) { + return ( + + {children} + + {content} + + + ); +} diff --git a/package.json b/package.json index 35455355..6e151e85 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,8 @@ "@prisma/client": "^2.23.0", "@radix-ui/react-collapsible": "^0.0.16", "@radix-ui/react-dialog": "^0.0.19", + "@radix-ui/react-slot": "^0.0.12", + "@radix-ui/react-tooltip": "^0.0.21", "@tailwindcss/forms": "^0.2.1", "async": "^3.2.0", "bcryptjs": "^2.4.3", diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx index ee77b4c2..fce16851 100644 --- a/pages/event-types/index.tsx +++ b/pages/event-types/index.tsx @@ -1,4 +1,5 @@ import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@components/Dialog"; +import { Tooltip } from "@components/Tooltip"; import Loader from "@components/Loader"; import { Menu, Transition } from "@headlessui/react"; import { @@ -223,23 +224,27 @@ export default function Availability({ user, types }) {
- + - + className="group cursor-pointer text-neutral-400 p-2 border border-transparent hover:border-gray-200"> + - - + + + + +
diff --git a/yarn.lock b/yarn.lock index 616ddef3..bb82f82b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -753,6 +753,14 @@ resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-2.26.0-23.9b816b3aa13cc270074f172f30d6eda8a8ce867d.tgz#cfdacfad3acc0f3bf1d7710aa8f3852fd85ac6d9" integrity sha512-a0jIhLvw9rFh6nZTr5Y3uzP28I2xNDu3pqxANvwMNnmIoYr1wYEcO1pMXn/36BGXldDdAWMmAbhfloHA3IB8DA== +"@radix-ui/popper@0.0.10": + version "0.0.10" + resolved "https://registry.yarnpkg.com/@radix-ui/popper/-/popper-0.0.10.tgz#9f707d9cec8762423f81acaf8e650e40a554cb73" + integrity sha512-YFKuPqQPKscreQid7NuB4it3PMzSwGg03vgrud6sVliHkI43QNAOHyrHyMNo015jg6QK5GVDn+7J2W5uygqSGA== + dependencies: + "@babel/runtime" "^7.13.10" + csstype "^3.0.4" + "@radix-ui/primitive@0.0.5": version "0.0.5" resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-0.0.5.tgz#8464fb4db04401bde72d36e27e05714080668d40" @@ -760,6 +768,15 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-arrow@0.0.15": + version "0.0.15" + resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-0.0.15.tgz#2fb7e4cab626f87d4f7a403672c57bce74b0a7b4" + integrity sha512-lw3/3nPmEeK67IgndT764w/65EMm5psXnr2efCeo0eWOERTnFAswNka2bKJUSKY02FHECkH4qVzhwupFyeYv0g== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-polymorphic" "0.0.13" + "@radix-ui/react-primitive" "0.0.15" + "@radix-ui/react-collapsible@^0.0.16": version "0.0.16" resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-0.0.16.tgz#6a99068f70bb85a60f8cbd43f093bd3053ab61cc" @@ -855,6 +872,27 @@ resolved "https://registry.yarnpkg.com/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.12.tgz#bf4ae516669b68e059549538104d97322f7c876b" integrity sha512-/GYNMicBnGzjD1d2fCAuzql1VeFrp8mqM3xfzT1kxhnV85TKdURO45jBfMgqo17XNXoNhWIAProUsCO4qFAAIg== +"@radix-ui/react-polymorphic@0.0.13": + version "0.0.13" + resolved "https://registry.yarnpkg.com/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.13.tgz#d010d48281626191c9513f11db5d82b37662418a" + integrity sha512-0sGqBp+v9/yrsMhPfAejxcem2MwAFgaSAxF3Sieaklm6ZVYM/hTZxxWI5NVOLGV+482GwW0wIqwpVUzREjmh+w== + +"@radix-ui/react-popper@0.0.18": + version "0.0.18" + resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-0.0.18.tgz#e85ec077c18ffca92ce97cc19586dcc6f022fffb" + integrity sha512-j8nPqX5scAmeGuyW9VQv+M4MkKsV/ulR1Yt0eu13LyGLT3L7FM2YBMt3KlbpUxrT3mrNGC0eEQAiVgm/G3/fGQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/popper" "0.0.10" + "@radix-ui/react-arrow" "0.0.15" + "@radix-ui/react-compose-refs" "0.0.5" + "@radix-ui/react-context" "0.0.5" + "@radix-ui/react-polymorphic" "0.0.13" + "@radix-ui/react-primitive" "0.0.15" + "@radix-ui/react-use-rect" "0.0.7" + "@radix-ui/react-use-size" "0.0.6" + "@radix-ui/rect" "0.0.5" + "@radix-ui/react-portal@0.0.14": version "0.0.14" resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-0.0.14.tgz#31513d8777cf5e50a3a30ebc9deb34821e890e9e" @@ -865,6 +903,16 @@ "@radix-ui/react-primitive" "0.0.14" "@radix-ui/react-use-layout-effect" "0.0.5" +"@radix-ui/react-portal@0.0.15": + version "0.0.15" + resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-0.0.15.tgz#833bccb192aafb9420bd037d5827e88caf429dc4" + integrity sha512-qMESsdqph1gbRGzy9oSzUoeZYXnR2egXVcEZDqmesfn8w/o1rC1wadKkyBf7qo/YyjUX4mvXknAA+ftp1aQp+w== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-polymorphic" "0.0.13" + "@radix-ui/react-primitive" "0.0.15" + "@radix-ui/react-use-layout-effect" "0.0.5" + "@radix-ui/react-presence@0.0.14": version "0.0.14" resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-0.0.14.tgz#6a86058bbbf46234dd8840dacd620b3ac5797025" @@ -873,6 +921,15 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-compose-refs" "0.0.5" +"@radix-ui/react-presence@0.0.15": + version "0.0.15" + resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-0.0.15.tgz#4ff12feb436f1499148feb11c3a63a5d8fab568a" + integrity sha512-+5+ePKUdTkqN1ze7nYmcoeHSsmKCcREwt0NhvNgDocPaqEUoZSkK9Mq6eMiMXSj02NkXH9P+bK32VCClYFnMBQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "0.0.5" + "@radix-ui/react-use-layout-effect" "0.0.5" + "@radix-ui/react-primitive@0.0.14": version "0.0.14" resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-0.0.14.tgz#752a967cb05d4c5643634fe20274e7dc905d1cce" @@ -881,7 +938,15 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-polymorphic" "0.0.12" -"@radix-ui/react-slot@0.0.12": +"@radix-ui/react-primitive@0.0.15": + version "0.0.15" + resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-0.0.15.tgz#c0cf609ee565a32969d20943e2697b42a04fbdf3" + integrity sha512-Y7JLnen/G3AT0cQXXkBo3A1OuWaKGerkd2gKs0Fuqxv+kTxEmYoqSp/soo0Mm3Ccw61LKLQAjPiE37GK9/Zqwg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-polymorphic" "0.0.13" + +"@radix-ui/react-slot@0.0.12", "@radix-ui/react-slot@^0.0.12": version "0.0.12" resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.0.12.tgz#c4d8a75fffca561aeeca2ed9603384d86757f60a" integrity sha512-Em8P/xYyh3O/32IhrmARJNH+J/XCAVnw6h2zGu6oeReliIX7ktU67pMSeyyIZiU2hNXzaXYB/xDdixizQe/DGA== @@ -889,6 +954,29 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-compose-refs" "0.0.5" +"@radix-ui/react-tooltip@^0.0.21": + version "0.0.21" + resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.0.21.tgz#86160645cf0441fa7f465c8aaa265887cc3ff9b4" + integrity sha512-+QLMXclfX0XM3inY5LEAvmKsomQ+S0cqzo1v/oS8CiIcawg01RDLV9mzjDYLnpE4eKokn30d+gk4r1YAtWIbZA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "0.0.5" + "@radix-ui/react-compose-refs" "0.0.5" + "@radix-ui/react-context" "0.0.5" + "@radix-ui/react-id" "0.0.6" + "@radix-ui/react-polymorphic" "0.0.13" + "@radix-ui/react-popper" "0.0.18" + "@radix-ui/react-portal" "0.0.15" + "@radix-ui/react-presence" "0.0.15" + "@radix-ui/react-primitive" "0.0.15" + "@radix-ui/react-slot" "0.0.12" + "@radix-ui/react-use-controllable-state" "0.0.6" + "@radix-ui/react-use-escape-keydown" "0.0.6" + "@radix-ui/react-use-layout-effect" "0.0.5" + "@radix-ui/react-use-previous" "0.0.5" + "@radix-ui/react-use-rect" "0.0.7" + "@radix-ui/react-visually-hidden" "0.0.15" + "@radix-ui/react-use-body-pointer-events@0.0.6": version "0.0.6" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.0.6.tgz#30b21301880417e7dbb345871ff5a83f2abe0d8d" @@ -927,6 +1015,44 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-use-previous@0.0.5": + version "0.0.5" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.0.5.tgz#75191d1fa0ac24c560fe8cfbaa2f1174858cbb2f" + integrity sha512-GjtJlWlDAEMqCm2RDnVdWI6tk4/ZQfRq/VlP05Xy5rFZj6lD37VZWVWUELMBasRPzd2AS/9wPmphOgjH0VnE5A== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-use-rect@0.0.7": + version "0.0.7" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-0.0.7.tgz#e3a55fa7183ef436042198787bf38f8c9befcc14" + integrity sha512-OmaeFTgyiGNAchaxzDu+kFLz4Ly8RUcT5nwfoz4Nddd86I8Zdq93iNFnOpVLoVYqBnFEmvR6zexHXNFATrMbbQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/rect" "0.0.5" + +"@radix-ui/react-use-size@0.0.6": + version "0.0.6" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-0.0.6.tgz#998eaf6e8871b868f81f3b7faac06c3e896c37a0" + integrity sha512-kP4RIb2I5oHQzwzXJ21Hu8htNqf+sdaRzywxQpbj+hmqeUhpvIkhoq+ShNWV9wE/3c1T7gPnka8/nKYsKaKdCg== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-visually-hidden@0.0.15": + version "0.0.15" + resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-0.0.15.tgz#7bd18af3fb5da1349f9b04006d22c3d6e9ce0453" + integrity sha512-8J13Nzu9MfT2z+mDTGRfBukPi5L9LXLV7w1HvNZPVqxGLK8p7/CoXnt8XdS1HKSFm6akZmWJXMZVNVBUsONOcA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-polymorphic" "0.0.13" + "@radix-ui/react-primitive" "0.0.15" + +"@radix-ui/rect@0.0.5": + version "0.0.5" + resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.0.5.tgz#6000d8d800288114af4bbc5863e6b58755d7d978" + integrity sha512-gXw171KbjyttA7K1DRIvPguLmKsg8raitB67MIcsdZwcquy+a1O2w3xY21NIKEqGhJwqJkECPUmMJDXgMNYuAg== + dependencies: + "@babel/runtime" "^7.13.10" + "@sinonjs/commons@^1.7.0": version "1.8.3" resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d" @@ -2187,7 +2313,7 @@ cssstyle@^2.3.0: dependencies: cssom "~0.3.6" -csstype@^3.0.2: +csstype@^3.0.2, csstype@^3.0.4: version "3.0.8" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340" integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==