aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r--packages/website/ts/components/ui/pointer.tsx68
1 files changed, 68 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx
new file mode 100644
index 000000000..dcd1b8e54
--- /dev/null
+++ b/packages/website/ts/components/ui/pointer.tsx
@@ -0,0 +1,68 @@
+import { colors } from '@0xproject/react-shared';
+import { Island } from 'ts/components/ui/island';
+import * as React from 'react';
+import { styled } from 'ts/style/theme';
+
+export type PointerDirection = 'top' | 'right' | 'bottom' | 'left';
+
+export interface PointerProps {
+ className?: string;
+ color?: string;
+ size?: number;
+ direction: PointerDirection;
+}
+
+const PlainPointer: React.StatelessComponent<PointerProps> = props => <div {...props}/>;
+
+const positionToCss = (props: PointerProps) => {
+ const position = {
+ top: `bottom: 100%; left: 50%;`,
+ right: `left: 100%; top: 50%;`,
+ bottom: `top: 100%; left: 50%;`,
+ left: `right: 100%; top: 50%;`,
+ }[props.direction];
+
+ const borderColorSide = {
+ top: 'border-bottom-color',
+ right: 'border-left-color',
+ bottom: 'border-top-color',
+ left: 'border-right-color',
+ }[props.direction];
+ const border = `${borderColorSide}: ${props.color};`;
+ const marginSide = {
+ top: 'margin-left',
+ right: 'margin-top',
+ bottom: 'margin-left',
+ left: 'margin-top',
+ }[props.direction];
+ const margin = `${marginSide}: -${props.size}px`;
+ return {
+ position,
+ border,
+ margin,
+ };
+};
+
+export const Pointer = styled(PlainPointer)`
+ position: relative;
+ &:after {
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-color: rgba(136, 183, 213, 0);
+ border-width: ${props => `${props.size}px`};
+ ${props => positionToCss(props).position}
+ ${props => positionToCss(props).border}
+ ${props => positionToCss(props).margin}
+ }
+`;
+
+Pointer.defaultProps = {
+ color: colors.white,
+ size: 16,
+};
+
+Pointer.displayName = 'Pointer';