feat: add country flags to production countries

sct · Nov 8, 2021 · 6b27fbc · 6b27fbc
1 parent 18ca073
commit 6b27fbc
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
@@ -11,6 +11,8 @@ import {
   ChevronDoubleDownIcon,
   ChevronDoubleUpIcon,
 } from '@heroicons/react/solid';
+import { hasFlag } from 'country-flag-icons';
+import 'country-flag-icons/3x2/flags.css';
 import { uniqBy } from 'lodash';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -609,13 +611,20 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                   {data.productionCountries.map((c) => {
                     return (
                       <span
-                        className="block"
+                        className="flex items-center justify-end"
                         key={`prodcountry-${c.iso_3166_1}`}
                       >
-                        {intl.formatDisplayName(c.iso_3166_1, {
-                          type: 'region',
-                          fallback: 'none',
-                        }) ?? c.name}
+                        {hasFlag(c.iso_3166_1) && (
+                          <span
+                            className={`mr-1.5 text-xs leading-5 flag:${c.iso_3166_1}`}
+                          />
+                        )}
+                        <span>
+                          {intl.formatDisplayName(c.iso_3166_1, {
+                            type: 'region',
+                            fallback: 'none',
+                          }) ?? c.name}
+                        </span>
                       </span>
                     );
                   })}

diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
@@ -5,6 +5,8 @@ import {
   FilmIcon,
   PlayIcon,
 } from '@heroicons/react/outline';
+import { hasFlag } from 'country-flag-icons';
+import 'country-flag-icons/3x2/flags.css';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { useMemo, useState } from 'react';
@@ -546,13 +548,20 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                   {data.productionCountries.map((c) => {
                     return (
                       <span
-                        className="block"
+                        className="flex items-center justify-end"
                         key={`prodcountry-${c.iso_3166_1}`}
                       >
-                        {intl.formatDisplayName(c.iso_3166_1, {
-                          type: 'region',
-                          fallback: 'none',
-                        }) ?? c.name}
+                        {hasFlag(c.iso_3166_1) && (
+                          <span
+                            className={`mr-1.5 text-xs leading-5 flag:${c.iso_3166_1}`}
+                          />
+                        )}
+                        <span>
+                          {intl.formatDisplayName(c.iso_3166_1, {
+                            type: 'region',
+                            fallback: 'none',
+                          }) ?? c.name}
+                        </span>
                       </span>
                     );
                   })}