{"size": 1183, "ext": "js", "max_stars_repo_path": "src/components/dnd/Element.js", "max_stars_repo_name": "gsulloa/diet-planner", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/dnd/Element.js", "max_issues_repo_name": "gsulloa/diet-planner", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/dnd/Element.js", "max_forks_repo_name": "gsulloa/diet-planner", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.170212766, "max_line_length": 57, "alphanum_fraction": 0.6187658495}
import React from "react"
import PropTypes from "prop-types"
import { Draggable } from "react-beautiful-dnd"
import { Card, CardContent } from "../Container"

const grid = 8
const getItemStyle = (isDragging, draggableStyle) => ({
  // some basic styles to make the items look a bit nicer
  userSelect: "none",
  margin: `0 0 ${grid}px 0`,

  // change background colour if dragging
  background: isDragging ? "lightgreen" : "grey",

  // styles we need to apply on draggables
  ...draggableStyle,
})

const Element = ({ id, index, content }) => {
  return (
    <Draggable draggableId={id} index={index}>
      {(provided, snapshot) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          style={getItemStyle(
            snapshot.isDragging,
            provided.draggableProps.style
          )}
        >
          <Card>
            <CardContent>{content}</CardContent>
          </Card>
        </div>
      )}
    </Draggable>
  )
}
Element.propTypes = {
  id: PropTypes.any.isRequired,
  index: PropTypes.number.isRequired,
  content: PropTypes.element.isRequired,
}

export default Element
