Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save blopa/e21df1e19a39b61a85a7ccc3643b946a to your computer and use it in GitHub Desktop.
Save blopa/e21df1e19a39b61a85a7ccc3643b946a to your computer and use it in GitHub Desktop.
Code for post "My blog now has Stories, and I'm not sure why"
const useStyles = makeStyles((theme) => ({
circleImage: ({ unseen }) => ({
width: 80,
height: 80,
borderRadius: '50%',
cursor: 'pointer',
objectFit: 'cover',
marginLeft: '5px',
position: 'relative',
...(unseen
? {
padding: 4,
background: theme.palette.secondary.main,
}
: {}),
}),
}));
const StoryImage = ({ category, previewImage, unseen, onClick }) => {
const classes = useStyles({ unseen });
return (
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
<img alt={category} src={previewImage} className={classes.circleImage} onClick={onClick} />
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment