rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: format with prettier

Browse source
This commit is contained in:
swve 2024-02-09 21:22:15 +01:00
parent 03fb09c3d6
commit a147ad6610
164 changed files with 11257 additions and 8154 deletions
Download patch file Download diff file Expand all files Collapse all files

60
apps/web/components/StyledElements/Tooltip/Tooltip.tsx
View file

@ -1,66 +1,65 @@
'use client';
import React from 'react';
import * as Tooltip from '@radix-ui/react-tooltip';
import { styled, keyframes } from '@stitches/react';
'use client'
import React from 'react'
import * as Tooltip from '@radix-ui/react-tooltip'
import { styled, keyframes } from '@stitches/react'
type TooltipProps = {
sideOffset?: number;
content: React.ReactNode;
children: React.ReactNode;
side?: 'top' | 'right' | 'bottom' | 'left'; // default is bottom
slateBlack?: boolean;
};
sideOffset?: number
content: React.ReactNode
children: React.ReactNode
side?: 'top' | 'right' | 'bottom' | 'left' // default is bottom
slateBlack?: boolean
}
const ToolTip = (props: TooltipProps) => {
return (
<Tooltip.Provider delayDuration={200}>
<Tooltip.Root>
<Tooltip.Trigger asChild>
{props.children}
</Tooltip.Trigger>
<Tooltip.Trigger asChild>{props.children}</Tooltip.Trigger>
<Tooltip.Portal>
<TooltipContent slateBlack={props.slateBlack} side={props.side ? props.side : 'bottom'} sideOffset={props.sideOffset}>
<TooltipContent
slateBlack={props.slateBlack}
side={props.side ? props.side : 'bottom'}
sideOffset={props.sideOffset}
>
{props.content}
</TooltipContent>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>
);
};
)
}
const slideUpAndFade = keyframes({
'0%': { opacity: 0, transform: 'translateY(2px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
});
})
const slideRightAndFade = keyframes({
'0%': { opacity: 0, transform: 'translateX(-2px)' },
'100%': { opacity: 1, transform: 'translateX(0)' },
});
})
const slideDownAndFade = keyframes({
'0%': { opacity: 0, transform: 'translateY(-2px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
});
})
const slideLeftAndFade = keyframes({
'0%': { opacity: 0, transform: 'translateX(2px)' },
'100%': { opacity: 1, transform: 'translateX(0)' },
});
})
const closeAndFade = keyframes({
'0%': { opacity: 1 },
'100%': { opacity: 0 },
});
})
const TooltipContent = styled(Tooltip.Content, {
variants: {
slateBlack: {
true: {
backgroundColor: " #0d0d0d",
backgroundColor: ' #0d0d0d',
color: 'white',
},
},
@ -70,10 +69,11 @@ const TooltipContent = styled(Tooltip.Content, {
padding: '5px 10px',
fontSize: 12,
lineHeight: 1,
color: "black",
color: 'black',
backgroundColor: 'rgba(217, 217, 217, 0.50)',
zIndex: 500,
boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
boxShadow:
'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
userSelect: 'none',
animationDuration: '400ms',
animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
@ -92,8 +92,6 @@ const TooltipContent = styled(Tooltip.Content, {
'&[data-side="bottom"]': { animationName: closeAndFade },
'&[data-side="left"]': { animationName: closeAndFade },
},
});
})
export default ToolTip;
export default ToolTip