Country Flag

1
import { cva, type VariantProps } from "class-variance-authority";
2
import { type SVGProps, useMemo } from "react";
3

4
import CountryFlags from "@/components/icons/pxl/terrabandiere";
5
import { cn } from "@/lib/utils";
6

7
const flagsByNumber: Record<number, keyof typeof CountryFlags.md> = {
8
  20: "Andorra",
9
  50: "Bangladesh",
10
  124: "Canada",
11
  156: "China",
12
  250: "France",
13
  276: "Germany",
14
  356: "India",
15
  380: "Italy",
16
  392: "Japan",
17
  410: "SouthKorea",
18
  620: "Portugal",
19
  643: "Russia",
20
  682: "SaudiArabia",
21
  724: "Spain",
22
  818: "Egypt",
23
  826: "UnitedKingdom",
24
};
25

26
const flagsByAlpha2: Record<string, keyof typeof CountryFlags.md> = {
27
  AD: "Andorra",
28
  BD: "Bangladesh",
29
  CA: "Canada",
30
  CH: "China",
31
  DE: "Germany",
32
  EG: "Egypt",
33
  ES: "Spain",
34
  FR: "France",
35
  GB: "UnitedKingdom",
36
  IN: "India",
37
  IT: "Italy",
38
  JP: "Japan",
39
  KR: "SouthKorea",
40
  PT: "Portugal",
41
  RU: "Russia",
42
  SA: "SaudiArabia",
43
};
44

45
const flagsByAlpha3: Record<string, keyof typeof CountryFlags.md> = {
46
  AND: "Andorra",
47
  BGD: "Bangladesh",
48
  CAN: "Canada",
49
  CHN: "China",
50
  DEU: "Germany",
51
  EGY: "Egypt",
52
  ESP: "Spain",
53
  FRA: "France",
54
  GBR: "UnitedKingdom",
55
  IND: "India",
56
  ITA: "Italy",
57
  JPN: "Japan",
58
  KOR: "SouthKorea",
59
  PRT: "Portugal",
60
  RUS: "Russia",
61
  SAU: "SaudiArabia",
62
};
63

64
const flagVariants = cva("", {
65
  variants: {
66
    size: {
67
      default: "w-8",
68
      sm: "w-4",
69
      md: "w-8",
70
    },
71
  },
72
});
73

74
function CountryFlag({
75
  className,
76
  code,
77
  size = "default",
78
  ...props
79
}: SVGProps<SVGSVGElement> &
80
  VariantProps<typeof flagVariants> & {
81
    /** [ISO 3166-1](https://www.wikiwand.com/es/ISO_3166-1) Code */
82
    code: string | number;
83
  }) {
84
  const key = useMemo(() => {
85
    if (typeof code === "number") {
86
      return flagsByNumber[code];
87
    }
88

89
    if (code.length === 3) {
90
      return flagsByAlpha3[code];
91
    }
92

93
    return flagsByAlpha2[code];
94
  }, [code]);
95

96
  const Component =
97
    CountryFlags[size === "default" || size === null ? "md" : size][key];
98

99
  if (!Component) {
100
    return null;
101
  }
102

103
  return (
104
    <Component shapeRendering="crisp-edges" className={cn(flagVariants({ size }), className)} {...props} />
105
  );
106
}
107

108
export { CountryFlag };