2019-03-17 00:25:20 +01:00
|
|
|
import React from 'react'
|
|
|
|
|
import Head from 'next/head'
|
|
|
|
|
import { styled } from 'linaria/react'
|
|
|
|
|
|
|
|
|
|
const Box = styled.div`
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
margin-left: 40px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
width: 200px;
|
|
|
|
|
background-color: tomato;
|
|
|
|
|
animation: spin 2s linear infinite;
|
|
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
|
|
|
from {
|
|
|
|
|
transform: rotate(0deg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
to {
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
`
|
|
|
|
|
|
|
|
|
|
export default () => {
|
|
|
|
|
return (
|
|
|
|
|
<React.Fragment>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>With Linaria</title>
|
|
|
|
|
</Head>
|
2019-03-27 21:12:45 +01:00
|
|
|
<Box>Zero runtime CSS in JS</Box>
|
2019-03-17 00:25:20 +01:00
|
|
|
</React.Fragment>
|
|
|
|
|
)
|
|
|
|
|
}
|
