import * as React from 'react'; import Head from 'next/head'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; interface StarProps { isActive: boolean; } const Star: React.FC = ({ isActive }) => { return ; }; const Details: React.FC<{}> = () => { return ( `} css={` .rating { /* Center the content */ align-items: center; display: flex; justify-content: center; flex-direction: row-reverse; font-size: 32px; } .rating__star:hover, .rating__star:hover ~ .rating__star { color: transparent; } /* Make all previous stars selected when hover on a star Note that we use \`flex-direction: row-reverse\` on the container */ .rating__star:hover:before, .rating__star:hover ~ .rating__star:before { color: #00449e; content: '\\2605'; left: 0; position: absolute; } .rating__star { /* Reset styles for button */ background-color: transparent; border: transparent; margin: 0 2px; padding: 0; /* Used to position the hover state */ position: relative; } `} >

); }; export default Details;