<commit_before>// @flow
import React from "react"
import { Link } from "react-router-dom"
import { makeStyles } from "@material-ui/core/styles"
import Grid from "@material-ui/core/Grid"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { useCartStore } from "./CartStore"

const useStyles = makeStyles({
  container: {
    margin: "auto",
    width: "80%",
  },
  link: {
    color: "#004080",
    textDecoration: "none",
  },
})

/**
 * This is the cart component that displays between the Navbar and body content on every page.
 * It has a cart icon with the current number of added items next to it.
 */

const CartIcon = () => {
  const [{ addedItems }] = useCartStore()
  const classes = useStyles()

  return (
    <Grid container justify="flex-end" className={classes.container}>
      <Grid item>
        <Link className={classes.link} to="/cart">
          <FontAwesomeIcon icon="shopping-cart" size="2x" /> (
          {addedItems.length})
        </Link>
      </Grid>
    </Grid><commit_msg>feat: add note to cart icon if capacity is full #245<commit_after>// @flow
import React from "react"
import { Link } from "react-router-dom"
import { makeStyles } from "@material-ui/core/styles"
import Grid from "@material-ui/core/Grid"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { useCartStore } from "./CartStore"

const useStyles = makeStyles(({ palette }) => ({
  container: {
    margin: "auto",
    width: "80%",
  },
  link: {
    color: "#004080",
    textDecoration: "none",
  },
  cartFull: {
    fontSize: "0.7rem",
    color: palette.secondary.main,
  },
}))

/**
 * This is the cart component that displays between the Navbar and body content on every page.
 * It has a cart icon with the current number of added items next to it.
 */

const CartIcon = () => {
  const [{ addedItems, maxItemsInCart }] = useCartStore()
  const classes = useStyles()

  return (
    <Grid container justify="flex-end" className={classes.container}>
      <Grid item>
        <Link className={classes.link} to="/cart">
          <FontAwesomeIcon icon="shopping-cart" size="2x" /> (
          {addedItems.length}){" "}
          {maxItemsInCart && (
            <span className={classes.cartFull}>* cart full</span>
          )}
        </Link>
      </Grid>
    </Grid>
{'fraction_non_alphanumeric': 0.14328873543375054, 'fraction_numerical': 0.009926629261976695, 'mean_word_length': 3.0738137082601056, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 22, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2479258', 'n_tokens_mistral': 723, 'n_tokens_neox': 712, 'n_words': 211}