@fortawesome/free-solid-svg-icons#faStar JavaScript Examples

ICONS = {
  bars: faBars,
  'check-circle': faCheckCircle,
  'chevron-down': faChevronDown,
  'chevron-right': faChevronRight,
  'exchange-alt': faExchangeAlt,
  exclamation: faExclamation,
  'exclamation-triangle': faExclamationTriangle,
  info: faInfo,
  moon: faMoon,
  question: faQuestion,
  rss: faRss,
  'sign-in-alt': faSignInAlt,
  sun: faSun,
  snowflake: faSnowflake,
  star: faStar,
  'times-circle': faTimesCircle,
  user: faUser,
}

function RatingBlock({ t, data }) {
  const { vote_average, vote_count } = data;

  if (!vote_average) return null;

  return (
    <div className={styles.rating}>
      <FontAwesomeIcon
        className={styles.icon}
        icon={faStar}
      />
      {vote_average}
      <span className={styles.scale}>
        /10
      </span>

      {vote_count
        ? (
          <div className={styles.votes}>
            <span className={styles.votesLabel}>
              {vote_count}
            </span>

            <span className={styles.votesValue}>
              {t('movie_details.rating_votes.count', { count: vote_count })}
            </span>
          </div>
        )
        : ''}
    </div>
  );
}

function CardRatingBlock({ vote_average }) {
  if (!vote_average) return null;

  return (
    <span
      className={styles.rating}
      data-test="movie-card__rating"
    >
      <FontAwesomeIcon
        className="mr-1"
        icon={faStar}
      />
      {vote_average}
    </span>
  );
}

LteMessageNavItem = ({ href, avatar, user, message, date, textColor }) => {
  return (
    <>
      <DropdownItem tag={Link} to={href}>
        <Media>
          <img src={avatar} alt='' className='img-size-50 mr-3 img-circle' />
          <Media body>
            <h3 className='dropdown-item-title'>
              {user}
              <LteText className='float-right' size='sm' color={textColor}>
                <FontAwesomeIcon icon={faStar} />
              </LteText>
            </h3>
            <LteText size='sm'>{message}</LteText>
            <LteText size='sm' color='muted'>
              <FontAwesomeIcon icon={faClock} />
              <span className='ml-1'>{date}</span>
            </LteText>
          </Media>
        </Media>
      </DropdownItem>
      <DropdownItem divider />
    </>
  );
}

//ToDo
//import { Dynatrace, Platform } from '@dynatrace/react-native-plugin';

export default function Detail(props) {

  const movie = props.navigation.getParam('movie', null);
  let token=null;
  const [ highlight, setHeighlight] = useState(0); 

  const getData = async () => {
    token = await AsyncStorage.getItem('MR_Token');
    if (token) {
      console.log("+++++++++++++ Token retrieved= " + token);
    } else {
      console.log("************* No token found ************");
    }
  };
  
  const rateClicked = () => {
    getData();
    if(highlight > 0 && highlight < 6){ 
      //ToDo
      //Dynatrace.reportIntValue("Stars",  highlight);
      fetch(`http://www.dynatraceworkshops.com:8079/api/movies/${movie.id}/rate_movie/`, {
      method: 'POST',
      headers: {
        'Authorization': `Token ad99a678759cb7c771457680a6cc68cbec062de9`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ stars: highlight})
    })
    .then( res => res.json())
    .then( res => {
      setHeighlight(0);
      Alert.alert("Rating", res.message);
    })
    .catch( error => Alert.alert("Error", error));
    }
  }

  return (
    <View style={styles.container}>
      <View style={styles.starContainer}>
        <FontAwesomeIcon style={movie.avg_rating > 0 ? styles.orange : styles.white} icon={faStar}/>
        <FontAwesomeIcon style={movie.avg_rating > 1 ? styles.orange : styles.white} icon={faStar}/>
        <FontAwesomeIcon style={movie.avg_rating > 2 ? styles.orange : styles.white} icon={faStar}/>
        <FontAwesomeIcon style={movie.avg_rating > 3 ? styles.orange : styles.white} icon={faStar}/>
        <FontAwesomeIcon style={movie.avg_rating > 4 ? styles.orange : styles.white} icon={faStar}/>
        <Text style={styles.white}>({movie.no_of_ratings})</Text>
      </View>
      <Text style={styles.description}>{movie.description}</Text>

      <View style={{borderBottomColor: 'white', borderBottomWidth: 2}}/>
      <Text style={styles.description}>Rate it !!!</Text>

      <View style={styles.starContainer}>
        <FontAwesomeIcon style={highlight > 0 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(1)}/>
        <FontAwesomeIcon style={highlight > 1 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(2)}/>
        <FontAwesomeIcon style={highlight > 2 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(3)}/>
        <FontAwesomeIcon style={highlight > 3 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(4)}/>
        <FontAwesomeIcon style={highlight > 4 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(5)}/>
      </View>
      <Button title="Rate" onPress={() => rateClicked()}/>
    </View>
  );
}

export default function Product({ product }) {
    const router = useRouter();
    const newProductData = { tags: [], ...product };

    const stars = useMemo(() => {
        const initial = [];
        for (let i = 1; i < product.stars; i += 1) {
            initial.push(
                <FontAwesomeIcon
                    key={i}
                    size="lg"
                    className="w-5"
                    icon={faStar}
                    color="#e69d3f"
                />
            );
        }

        return initial;
    }, [product.stars]);

    function handleClick() {
        return router.push({
            pathname: '/details',
            query: { productId: product.id },
        });
    }

    return (
        <div className="h-180 flex flex-row lg:mr-8 mr-0 rounded-lg max-w-500">
            <div className="flex items-center">
                <img
                    src={newProductData.image}
                    alt={newProductData.name}
                    aria-label={newProductData.name}
                    className="w-140 max-h-200"
                />
            </div>

            <div className="flex flex-col justify-between ml-3">
                <strong className="max-w-240 truncate text-xl text-gray-800">
                    {newProductData.name}
                </strong>

                <div className="flex flex-row">
                    <div>
                        <span className="font-bold text-gray-800">
                            ${product.price / 100}
                        </span>
                    </div>
                </div>
                <div className="flex flex-row">{stars}</div>

                <Button
                    handleClick={handleClick}
                    title="Click to see more details about this product"
                >
                    {' '}
                    More details{' '}
                </Button>
            </div>
        </div>
    );
}

render() {
    const {
      email, folder, oId, pIndex, updatePath, userId, shareFile, moveWithin,
    } = this.props;

    const deleteFunc = loadAuthParam(email, this.delete);
    const renameFunc = loadAuthParam(email, this.rename);
    const starFunc = loadAuthParam(email, this.star);
    const findPermissionFunc = loadAuthParam(email, this.findPermission);
    const findFilePermissionFunc = loadAuthParam(email, this.findFilePermission);
    const deletePermissionFunc = loadAuthParam(email, this.deletePermission);
    return (
      <span className="file-path">
        <span>
          {' '}
          <FontAwesomeIcon icon={faChevronRight} />
          <ContextMenuTrigger id={folder.id + userId.toString() + oId.toString()}>
            <button type="button" className="path-btn" onClick={() => updatePath(userId, oId, pIndex)}>{folder.name}</button>
          </ContextMenuTrigger>
          <ContextMenu className="context-menu" id={folder.id + userId.toString() + oId.toString()}>
            <MenuItem className="menu-item" onClick={() => window.open(folder.webViewLink, 'blank')}>
              <FontAwesomeIcon className="faGoogle menu-icon" icon={faGoogleDrive} />
              View on Google Drive
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => shareFile(folder.id, window.prompt('Email Address of sharee: '))}>
              <FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
              Share
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => moveWithin(userId, folder, 'root')}>
              <FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
              Move to Root
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => renameFunc()}>
              <FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
              Rename
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => starFunc()}>
              <FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
              { (folder.starred) ? 'Remove From Starred' : 'Add to Starred' }
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => { if (window.confirm('This item and all its contents will be placed in the trash. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
              <FontAwesomeIcon className="menu-icon" icon={faTrash} />
              Delete
            </MenuItem>
          </ContextMenu>
        </span>
      </span>
    );
  }

function FavouritesPage() {
  const [courses, setCourses] = useState([]);
  const { user } = useContext(UserContext);
  const history = useHistory();

  useEffect(() => {
    document.title = "Courseyard | Favourites";
    if (user.uid) {
      axios
        .get("/favourites/getall")
        .then((res) => {
          setCourses(res.data.favourites);
        })
        .catch((err) => {
          console.error(err);
        });
    } else {
      history.push("/signin");
    }
  }, [user]);

  const NoCourses = () => {
    return (
      <div className="mr-auto ml-auto text-center p-5 w-full lg:w-1/2 md:w-1/2 pb-16">
        <h1 className="text-primary font-display text-3xl font-semibold">
          {" "}
          <FontAwesomeIcon icon={faBookmark} /> Seems like you have no Favourite Courses.
        </h1>
        <h2 className="text-secondary font-display text-lg mt-3">
          Click the <FontAwesomeIcon icon={faStar} /> icon below the courses to set one as your
          favourite.
        </h2>
      </div>
    );
  };

  return (
    <div className="bg-accent">
      <h1 className="title-fav mb-10 text-center text-5xl lg:text-6xl md:text-5xl font-bold font-display text-primary">
        Favourites
      </h1>
      {courses.length !== 0 ? <CoursePreview courses={courses} /> : <NoCourses />}
    </div>
  );
}

export default function Details({ product, error }) {
    const dispatch = useDispatch();
    const isSelected = useSelector(state =>
        state.cart.products.find(
            selectedProduct => selectedProduct.id === product.id
        )
    );

    const stars = useMemo(() => {
        const initial = [];
        for (let i = 1; i < product.stars; i += 1) {
            initial.push(
                <FontAwesomeIcon
                    key={i}
                    size="lg"
                    className="w-5"
                    icon={faStar}
                    color="#e69d3f"
                />
            );
        }

        return initial;
    }, [product.stars]);

    const liked = useSelector(state =>
        state.user.likedProducts.find(
            likedProduct => likedProduct.id === product.id
        )
    );

    function handleCart() {
        if (isSelected) return dispatch(removeFromCartRequest(product.id));
        return dispatch(addToCartRequest(product));
    }

    function handleLike() {
        dispatch(likeProductRequest(product));
    }

    return (
        <Layout>
            <motion.div
                className={`product-details h-screen px-12 py-8 flex flex-col ${error &&
                    'justify-center items-center'}`}
                exit={{ opacity: 0 }}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
            >
                {error ? (
                    <span className="text-xl text-center">
                        {' '}
                        <FontAwesomeIcon
                            icon={faExclamationTriangle}
                            color="red"
                        />{' '}
                        There was an error while consulting the products{' '}
                    </span>
                ) : (
                    <motion.div className="flex flex-col lg:grid grid-cols-2 h-full py-12 lg:py-0">
                        <div className="h-full flex flex-col">
                            <Link href="/">
                                <div className="cursor-pointer transition-shadows duration-300 hover:shadow shadow-lg mb-5 lg:mb-0  rounded-full text-gray-500 w-12 h-12 flex items-center justify-center p-8">
                                    <FontAwesomeIcon
                                        icon={faArrowLeft}
                                        size="lg"
                                    />
                                </div>
                            </Link>
                            <motion.img
                                src={product.image}
                                alt={product.name}
                                aria-label={product.name}
                                title={product.name}
                                initial={{ opacity: 0, x: -40 }}
                                animate={{ opacity: 1, x: 0 }}
                                exit={{ opacity: 0, x: -40 }}
                                transition={{ delay: 0.2 }}
                                className="lg:my-12 mx-0 h-300 max-w-480 self-center"
                            />
                        </div>
                        <motion.div
                            variants={stagger}
                            className="h-full flex flex-col justify-between pr-8"
                        >
                            <motion.header
                                initial="fadeup"
                                animate="normal"
                                exit="exit"
                            >
                                <motion.h1
                                    variants={fadeUp}
                                    className="text-2xl mb-2 text-gray-800 font-bold"
                                >
                                    {product.name}
                                </motion.h1>
                                <motion.div
                                    variants={fadeUp}
                                    className="flex flex-row"
                                >
                                    {stars}{' '}
                                    <span className="ml-2 font-light text-yellow-burn">
                                        1540 reviews
                                    </span>
                                </motion.div>
                                <motion.p
                                    variants={fadeUp}
                                    className="text-md text-gray-500 mt-8"
                                >
                                    <DangerousHTML html={product.description} />
                                </motion.p>
                            </motion.header>
                            <motion.footer
                                variants={fadeUp}
                                initial="fadeup"
                                animate="normal"
                                exit="exit"
                                className="flex flex-col lg:flex-row w-full justify-between  pt-5 pb-8"
                            >
                                <div className="flex flex-col">
                                    <span className="text-gray-500">
                                        Best price
                                    </span>
                                    <strong className="text-3xl text-gray-800">
                                        ${product.price / 100}
                                    </strong>
                                </div>

                                <div className="flex flex-row items-center mt-5 lg:mt-0">
                                    <Button
                                        className="font-bold text-xl px-12 flex items-center justify-center lg:w-300 box-border"
                                        title="Add to cart"
                                        handleClick={handleCart}
                                    >
                                        {' '}
                                        {isSelected
                                            ? 'Remove from cart'
                                            : 'Add to cart'}
                                    </Button>
                                    <motion.button
                                        className="ml-5 border-none bg-none outline-none"
                                        type="button"
                                        title="Save to my list"
                                        onClick={handleLike}
                                        whileTap={{ y: -10 }}
                                    >
                                        {liked ? (
                                            <FontAwesomeIcon
                                                size="lg"
                                                icon={faHeart}
                                                className="text-blue-500 hover:text-blue-600 transition-colors duration-500"
                                            />
                                        ) : (
                                            <FontAwesomeIcon
                                                size="lg"
                                                icon={faHeartRegular}
                                                className="text-blue-500 hover:text-blue-600 transition-colors duration-500"
                                            />
                                        )}
                                    </motion.button>
                                </div>
                            </motion.footer>
                        </motion.div>
                    </motion.div>
                )}
            </motion.div>
        </Layout>
    );
}

// export default function File(props) {
  render() {
    const {
      data, email, moveWithin, oId, openFolder, shareFile, userId,
    } = this.props;

    const {
      id, webViewLink, iconLink, name, mimeType, starred,
    } = data;

    const copyFunc = loadAuthParam(email, this.copy);
    const deleteFunc = loadAuthParam(email, this.delete);
    const renameFunc = loadAuthParam(email, this.rename);
    const starFunc = loadAuthParam(email, this.star);
    const findPermissionFunc = loadAuthParam(email, this.findPermission);
    const findFilePermissionFunc = loadAuthParam(email, this.findFilePermission);
    const deletePermissionFunc = loadAuthParam(email, this.deletePermission);
    if (mimeType !== 'application/vnd.google-apps.folder') {
      // if file
      return (
        <div>
          <ContextMenuTrigger id={id + userId.toString() + oId.toString()}>
            <a href={webViewLink} target="blank">
              <div className="file-container">
                <div className="file-image-container">
                  <img className="file-img" src={iconLink} alt="File icon" />
                </div>
                <div className="file-name">
                  {name}
                </div>
              </div>
            </a>
          </ContextMenuTrigger>
          <ContextMenu className="context-menu" id={id + userId.toString() + oId.toString()}>
            <MenuItem className="menu-item" onClick={() => window.open(webViewLink, 'blank')}>
              <FontAwesomeIcon className="faOpen menu-icon" icon={faFolderOpen} />
              Open
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => shareFile(id, window.prompt('Email Address of sharee: '))}>
              <FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
              Share
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => moveWithin(userId, data, 'root')}>
              <FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
              Move to Root
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => renameFunc()}>
              <FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
              Rename
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => copyFunc()}>
              <FontAwesomeIcon className="faCopy menu-icon" icon={faCopy} />
              Make a copy
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => starFunc()}>
              <FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
              { (starred) ? 'Remove From Starred' : 'Add to Starred' }
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => { if (window.confirm('This item will be placed in the trash. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
              <FontAwesomeIcon className="menu-icon" icon={faTrash} />
              Delete
            </MenuItem>
          </ContextMenu>
        </div>
      );
    }
    // if folder
    return (
      <div>
        <ContextMenuTrigger id={id + userId.toString() + oId.toString()}>
          <div className="folder-container" onClick={() => openFolder(userId, oId, data)}>
            <div className="folder-content-container">
              <img className="folder-img" src={iconLink} alt="File icon" />
              <p className="folder-name">{name}</p>
            </div>
          </div>
        </ContextMenuTrigger>
        <ContextMenu className="context-menu" id={id + userId.toString() + oId.toString()}>
          <MenuItem className="menu-item" onClick={() => window.open(webViewLink, 'blank')}>
            <FontAwesomeIcon className="faGoogle menu-icon" icon={faGoogleDrive} />
            View on Google Drive
          </MenuItem>
          <hr className="divider" />
          <MenuItem className="menu-item" onClick={() => shareFile(id, window.prompt('Email Address of sharee: '))}>
            <FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
            Share
          </MenuItem>
          <MenuItem className="menu-item" onClick={() => moveWithin(userId, data, 'root')}>
            <FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
            Move to Root
          </MenuItem>
          <MenuItem className="menu-item" onClick={() => renameFunc(userId, id)}>
            <FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
            Rename
          </MenuItem>
          <MenuItem className="menu-item" onClick={() => starFunc()}>
            <FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
            { (starred) ? 'Remove From Starred' : 'Add to Starred' }
          </MenuItem>
          <hr className="divider" />
          <MenuItem className="menu-item" onClick={() => { if (window.confirm('This item will become unrecoverable. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
            <FontAwesomeIcon className="menu-icon" icon={faTrash} />
            Delete
          </MenuItem>
        </ContextMenu>
      </div>
    );
  }

export default function Sidebar({
  authorizeUser, filterFilesInAllAccounts, userList, removeAllAccounts,
  starFilter,
}) {
  const body = document.getElementsByTagName('body')[0];
  const style = getComputedStyle(body);

  const initialState = (style.getPropertyValue('--sidebar-width') === '225px');
  const [expand, setExpand] = useState(initialState);

  const selectedElementList = document.getElementsByClassName('selected');
  const initilaSelected = (selectedElementList.length === 0) ? 'all-files' : selectedElementList[0].id;
  const [selected, setSelected] = useState(initilaSelected);

  const scrollToggle = (ref) => {
    userList.forEach((user) => {
      user.ref.current.style.display = 'none';
    });
    ref.current.style.display = 'block';
    window.scrollTo(0, ref.current.offsetTop - 100);
  };

  const toggleExpand = () => {
    const sidebarItem = document.getElementsByClassName('collapsible');
    Array.from(sidebarItem).forEach((item) => {
      if (expand) {
        item.classList.add('collapse');
        body.style.setProperty('--sidebar-width', '60px');
      } else {
        item.classList.remove('collapse');
        body.style.setProperty('--sidebar-width', '225px');
      }
    });
    setExpand(!expand);
  };

  const handleClick = (target) => {
    setSelected(target);
    let query = 'trashed = false';

    if (target === 'my-drive') {
      query += ' and "me" in owners';
    } else if (target === 'shared') {
      query += ' and not "me" in owners';
    } else if (target === 'starred') {
      starFilter();
      return;
    }
    filterFilesInAllAccounts(query);
  };
  const sidebarClassName = (expand) ? 'collapsible' : 'collapsible collapse';
  return (
    <div className={(expand) ? 'sidebar' : 'sidebar collapse'}>
      <div>
        <button type="button" className="sidebar-add-button" id="signin-btn" onClick={() => authorizeUser()}>
          <FontAwesomeIcon icon={faUserPlus} size="lg" title="Add an Account" />
          {expand ? ' Add Account' : ''}
        </button>
        <button type="button" className="sidebar-remove-button" id="remove-btn" onClick={() => removeAllAccounts()}>
          <FontAwesomeIcon icon={faUserSlash} size="lg" title="Remove All Accounts" />
          {expand ? ' Remove All Accounts' : ''}
        </button>
        <button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'all-files') ? 'selected' : ''}`} id="all-files" onClick={() => handleClick('all-files')}>
          <FontAwesomeIcon className="sidebar-icon" icon={faHome} size="lg" title="All Files" />
          {expand ? ' All Files' : ''}
        </button>
        <button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'my-drive') ? 'selected' : ''}`} id="my-drive" onClick={() => handleClick('my-drive')}>
          <FontAwesomeIcon className="sidebar-icon" icon={faGoogleDrive} size="lg" title="My Drive Files" />
          {expand ? ' My Drive Files' : ''}
        </button>
        <button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'shared') ? 'selected' : ''}`} id="shared" onClick={() => handleClick('shared')}>
          <FontAwesomeIcon className="sidebar-icon" icon={faShareSquare} size="lg" title="Shared" />
          {expand ? ' Shared' : ''}
        </button>
        <button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'starred') ? 'selected' : ''}`} id="starred" onClick={() => handleClick('starred')}>
          <FontAwesomeIcon className="sidebar-icon" icon={faStar} size="lg" title="Starred" />
          {expand ? ' Starred' : ''}
        </button>

        <div className="sidebar-user-container">
          { userList.map((user) => {
            const { name, picture } = parseIDToken(user.idToken);
            const { ref } = user;
            return (
              <button type="button" className={`sidebar-user ${sidebarClassName}`} key={user.id} onClick={() => scrollToggle(ref)}>
                <img className="sidebar-picture" src={picture} alt="Account profile" />
                {expand ? ` ${name}` : ''}
              </button>
            );
          })}
        </div>
      </div>
      <div className="collapse-container collapsible">
        <button type="button" className="collapse-button" onClick={() => toggleExpand()}>
          <FontAwesomeIcon icon={expand ? faCaretSquareLeft : faCaretSquareRight} size="lg" title={expand ? 'Collapse' : 'Expand'} />
        </button>
      </div>
    </div>
  );
}

function Card({
  course_id,
  title,
  instructor,
  courseurl,
  imageurl,
  tags,
  description,
  favourite_id,
}) {
  const [liked, setLiked] = useState(false);
  const [toolboxdisplay, setToolBoxDisplay] = useState("hidden");

  const { setSearchQuery } = useContext(CourseContext);
  const { user } = useContext(UserContext);
  const history = useHistory();

  useEffect(() => {
    if (favourite_id) {
      setLiked(true);
    } else {
      setLiked(false);
    }
  }, [favourite_id]);

  const likeHandler = () => {
    if (auth.currentUser && user.uid) {
      setLiked(!liked);
      const tmpLiked = !liked;
      (async () => {
        if (tmpLiked) {
          axios
            .put("/favourites/add", {
              course_id,
            })
            .then(() => {})
            .catch((err) => {
              console.error(err);
              setLiked(false);
            });
        } else {
          axios
            .post("/favourites/remove", {
              course_id,
            })
            .then((res) => {})
            .catch((err) => {
              console.error(err);
              setLiked(true);
            });
        }
      })();
    } else {
      history.push("/signin");
      window.scroll({ top: 0 });
    }
  };

  const copy = (value) => {
    let tempInput = document.createElement("input");
    tempInput.value = value;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
  };

  const ToolTip = ({ show }) => {
    return (
      <div
        className={`relative w-10 h-5 mx-2 ${show} ml-30 mb-2 z-10`}
        style={{ transform: "translateX(120px)" }}
      >
        <div className="bg-black text-white text-xs font-display rounded h-5 w-20 right-0 break-words text-center ml-30">
          Url Copied!
          <svg
            className="absolute text-black h-3 w-full left-0 top-full"
            x="0px"
            y="0px"
            viewBox="0 0 255 255"
            xmlSpace="preserve"
          >
            <polygon className="fill-current" points="0,0 127.5,127.5 255,0"></polygon>
          </svg>
        </div>
      </div>
    );
  };

  return (
    <div className="border-gray-300 border-t-0 card-box max-w-sm m-3 my-4 relative rounded-md overflow-hidden shadow-base hover:shadow-xl bg-secondary">
      <img
        className="course-cover w-full"
        src={
          imageurl
            ? imageurl
            : "https://www.ironagegrates.com/wp-content/uploads/2014/08/1280x720.png"
        }
        alt="course-cover"
      />
      <div className="tags flex flex-wrap justify-left ml-5 mb-3 mt-3 text-primary">
        {tags.map((tag, i) => {
          return (
            <div
              className="font-display hover:text-white text-xs flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full bg-opacity-0 text-primary border border-green-500 hover:bg-green-500 cursor-pointer"
              key={i}
              onClick={() => {
                setSearchQuery(tag.toLowerCase());
                window.scroll({
                  top: 80,
                  behavior: "smooth",
                });
              }}
            >
              {tag.toLowerCase()}
            </div>
          );
        })}
      </div>
      <div className="px-6 py-2 -mt-3 mb-3">
        <div className="break-words font-bold text-2xl mb-2 text-primary">
          {title || "I don't know Lorem Ipsum and you know that"}
        </div>
        <div className="text-primary font-medium mb-2 font-display">
          by <span className="font-semibold">{instructor || "anonymous"}</span>
        </div>
        <p className="text-primary text-base  font-display font-thin">{description}</p>
      </div>
      <div className="spacer h-16 inline-block"></div>
      <div className="w-full buttons m-5 absolute bottom-0 mt-13">
        <ToolTip show={toolboxdisplay} />
        <a href={courseurl} target="_blank" rel="noopener noreferrer">
          <button className="bg-transparent text-sm lg:text-base md:text-base font-display mr-2 focus:outline-none hover:bg-green-500 text-primary font-semibold hover:text-white py-2 px-4 border border-green-500 hover:border-transparent rounded-md">
            Learn More
          </button>
        </a>
        <button
          className="bg-transparent text-sm lg:text-base md:text-base font-display focus:outline-none hover:bg-green-500 text-primary font-semibold hover:text-white py-2 px-4 border border-green-500 hover:border-transparent rounded-md"
          onClick={() => {
            copy(courseurl);
          }}
          onFocus={() => {
            setToolBoxDisplay("block");
            setTimeout(() => {
              setToolBoxDisplay("hidden");
            }, 1300);
          }}
        >
          Share
          <span className="mr-2"></span>
          <FontAwesomeIcon icon={faShareAlt} />
        </button>
        <button
          onClick={likeHandler}
          className={`star mb-2 mr-12 w-8 h-8 float-right focus:outline-none rounded-full text-2xl md:text-3xl lg:text-3xl ${
            liked ? "text-green-500 notliked" : "text-gray-500 hover:text-secondary liked"
          }`}
        >
          <FontAwesomeIcon icon={faStar} />
        </button>
      </div>
    </div>
  );
}