ashour

import React from "react";
import { useIntl, FormattedMessage } from "react-intl";

import games from "../data";

import "./GameIndex.css";
import Voting from "../components/Voting";

function GameIndex(props) {
  const intl = useIntl();

ashour

import React from "react";
import { Link } from "react-router-dom";
import { FormattedMessage } from "react-intl";

function Home() {
  return (
    <div className="Home">
      <div className="columns">
        <div className="column">
          <figure className="image">

ashour

 export default {
  en: {
    "app.title": "Boardaki",
    "nav.home": "Home",
    "nav.games": "Games",
    "home.title": "Find Your Next Game",
    "home.lead":
      "Vote with thousands of other players on games and find your favourite!",
    "home.c2a": "Check out the games!",
    "games.addedOn": "Added {addedOn, date, medium}",

ashour

import React from "react";
import { IntlProvider } from "react-intl";
import { Route, Switch } from "react-router-dom";

import Navbar from "./Navbar";
import Home from "./pages/Home";
import messages from "./lang/messages";
import GameIndex from "./pages/GameIndex";

import "bulma/css/bulma.css";

ashour

npm install --save react-intl

ashour

import React, { useState } from "react";

function Voting(props) {
  const [voteCount, setVoteCount] = useState(props.initialVoteCount);

  const voteCountTextClass =
    voteCount < 0 ? "has-text-danger" : "has-text-success";

  return (
    <p style={{ display: "flex", alignItems: "center" }}>

ashour

export default {
  en: [
    {
      id: 1,
      title: "Catan",
      addedOn: "2020-01-15",
      imageUrl: "/img/games/catan.jpg",
      initialVoteCount: 12,
    },
    {

ashour

import React from "react";

import games from "../data";

import "./GameIndex.css";
import Voting from "../components/Voting";

function GameIndex(props) {
  return (
    <div className="columns" style={{ flexWrap: "wrap" }}>

ashour

import React from "react";
import { Link } from "react-router-dom";

function Home() {
  return (
    <div className="Home">
      <div className="columns">
        <div className="column">
          <figure className="image">
            <img src="/img/home.jpg" />

ashour

import React from "react";

export default function LangSwitcher() {
  return (
    <div className="navbar-item has-dropdown is-hoverable">
      <a className="navbar-link">Language</a>

      <div className="navbar-dropdown is-right">
        <a className="navbar-item">English</a>
        <a className="navbar-item">Arabic (عربي)</a>