Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
opacity: 0,
transition: { type: 'spring' }
},
enter: {
y: 0,
opacity: 1,
transition: { type: 'spring' }
},
exit: {
y: -30,
opacity: 0,
transition: { type: 'spring' }
}
}
const Item = posed.li(itemProps)
// https://popmotion.io/pose/api/posegroup/
const TransitionGrid = ({ visible, items, removeItem }) => {
return (
{visible && (
{items.map(item => (
removeItem(item)}
>
<div>✕</div>
<div>{item}</div>
import { scrollIt } from 'utils/scroll';
import Logo from 'assets/images/helloroman-logo.svg';
import styled from 'styled-components';
import { media, typography } from 'utils';
import { sizes } from 'utils/media';
import posed from 'react-pose';
import Hamburger from './Hamburger';
import { zIndex, colors } from 'utils';
const MenuWrapper = posed.nav({
open: { x: '0%', staggerChildren: 200 },
closed: { x: '-100%' }
});
const NavItem = posed.li({
open: { opacity: 1 },
closed: { opacity: 0 }
});
const NavigationWrapper = styled.div`
position: fixed;
top: 0;
left: 0;
z-index: ${zIndex.level9};
padding: 20px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: ${({hasBackground}) => hasBackground ? colors.light : 'transparent'};
transition: background-color .3s ease-out;
closed: {
y: 20,
opacity: 0
},
open: {
y: 0,
opacity: 1
}
};
const Sidepanel = styled(posed.ul(sidepanelProps))`
width: 300px;
padding: 20px;
`;
const Item = styled(posed.li())`
width: 100%;
border-radius: 5px;
height: 35px;
background: ${color.white};
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
&[data-key='0'] {
background: ${color.green};
}
&[data-key='1'] {
background: ${color.brand};
import React from 'react'
import Link from 'gatsby-link'
import styled from 'styled-components'
import Img from 'gatsby-image'
import posed from 'react-pose'
import { appear } from '../../styles/poses'
const Wrapper = styled(posed.li(appear))`
width: 100%;
position: relative;
background: ${props => props.theme.colors.tertiary};
border-radius: 2px;
margin: 0 0 1rem 0;
&:hover {
h2 {
text-decoration: underline;
}
}
`
const StyledLink = styled(Link)`
display: flex;
flex-direction: row-reverse;
`
import * as React from 'react';
import styled from 'styled-components';
import { Incident } from '@rdrnt/tps-calls-shared';
import VisibilitySensor from 'react-visibility-sensor';
import posed from 'react-pose';
import Text from '../../Text';
import { Sizes, Colors } from '../../../config';
import { DateHelper } from '../../../helpers';
export interface DrawerListItem {
incident: Incident;
onClick: () => void;
}
const AnimatedContainer = posed.li({
visible: {
opacity: 1,
},
hidden: {
opacity: 0,
},
});
const Container = styled(AnimatedContainer)`
height: 75px;
width: 100%;
background-color: ${Colors.BACKGROUND};
padding: ${Sizes.SPACING / 2}px;
display: flex;
flex-direction: column;
justify-content: center;
import React, { memo, useState, useEffect } from 'react';
import posed, { PoseGroup } from 'react-pose';
import IntlRelativeFormat from 'intl-relativeformat';
import '../../assets/style/commentsList.css';
const Ul = posed.ul({});
const Li = posed.li({
enter: { opacity: 1 },
exit: { opacity: 0 }
});
const rf = new IntlRelativeFormat();
let ws;
export const CommentsList = memo(() => {
const [comments, updateComments] = useState([]);
useEffect(() => {
if (!ws) {
ws = new WebSocket(`ws://${window.location.hostname}:${process.env.SERVER_PORT}`);
ws.onmessage = ({ data }) => {
const fetchedComments = JSON.parse(data);
if (Array.isArray(fetchedComments) && fetchedComments.length !== 0) {
y: 20,
opacity: 0
},
open: {
y: 0,
opacity: 1
}
};
const Sidepanel = styled(posed.ul(sidepanelProps))`
background: ${color.blue};
width: 300px;
padding: 20px;
`;
const Item = styled(posed.li(itemProps))`
width: 100%;
border-radius: 5px;
height: 35px;
background: ${color.white};
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
`;
const code = {
react: `const Parent = posed.ul(config)
const Child = posed.li(childConfig)
({ items }) => (