feat: allow to customize the lume identity trigger

This commit is contained in:
Juan Di Toro 2023-10-10 16:26:43 +02:00
parent ee32356938
commit 099b2f2c64
2 changed files with 29 additions and 8 deletions

View File

@ -1,3 +1,4 @@
import React, { ReactElement, type FC, JSXElementConstructor, ReactPortal } from "react";
import { Button } from "../../ui/button"; import { Button } from "../../ui/button";
import { import {
SwitchableComponent, SwitchableComponent,
@ -8,7 +9,6 @@ import * as ComponentList from "./components";
import { LazyMotion, domAnimation } from "framer-motion"; import { LazyMotion, domAnimation } from "framer-motion";
import * as Dialog from "@radix-ui/react-dialog"; import * as Dialog from "@radix-ui/react-dialog";
import LumeLogoBg from "./LumeLogoBg"; import LumeLogoBg from "./LumeLogoBg";
import type { FC } from "react";
const LumeIdentity: FC = () => { const LumeIdentity: FC = () => {
const { visibleComponent, setVisibleComponent } = useSwitchableComponent( const { visibleComponent, setVisibleComponent } = useSwitchableComponent(
@ -106,14 +106,35 @@ const LumeIdentity: FC = () => {
// contrast is not very good, as im testing on a train with a lot of sunlight // contrast is not very good, as im testing on a train with a lot of sunlight
// hitting my screen, it is almost impossible to see whats happening the outline // hitting my screen, it is almost impossible to see whats happening the outline
// buttons have no contrast // buttons have no contrast
export default function Wrapped() { export const LumeIdentityTrigger = Dialog.Trigger;
return ( LumeIdentityTrigger.displayName = "LumeIdentityTrigger";
<Dialog.Root> export default function Wrapped({ children }: React.PropsWithChildren) {
<Dialog.Trigger asChild> const DefaultTrigger = () => (
<LumeIdentityTrigger asChild>
<button className="bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md"> <button className="bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md">
Open Lume Open Lume
</button> </button>
</Dialog.Trigger> </LumeIdentityTrigger>
);
const GivenTrigger = React.Children.toArray(children)
.filter((c) => {
if(typeof c === 'object'){
//@ts-expect-error -- I dont know what the type of this should be, i just know that this works
return c.type?.displayName === "LumeIdentityTrigger"
}
return false
})
.at(0);
const Trigger = GivenTrigger ? () => GivenTrigger : DefaultTrigger;
console.log({
Trigger, GivenTrigger
})
return (
<Dialog.Root>
<Trigger />
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" /> <Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" />
{/* @ditorodev: `left-[calc(50%-192px)] top-[calc(50vh-174px)]` these two are me being dumb and lazy, would be cool to fix with proper centering */} {/* @ditorodev: `left-[calc(50%-192px)] top-[calc(50vh-174px)]` these two are me being dumb and lazy, would be cool to fix with proper centering */}

View File

@ -3,5 +3,5 @@ export {
useLume, useLume,
} from "./components/lume/LumeProvider"; } from "./components/lume/LumeProvider";
export { default as LumeDashboard } from "./components/lume/LumeDashboard/LumeDashboard"; export { default as LumeDashboard } from "./components/lume/LumeDashboard/LumeDashboard";
export { default as LumeIdentity } from "./components/lume/LumeIdentity/LumeIdentity"; export { default as LumeIdentity, LumeIdentityTrigger } from "./components/lume/LumeIdentity/LumeIdentity";
import "../styles/globals.css"; import "../styles/globals.css";