From 7c0a45ed52de9a849e84fbad3cdcabedf097abf5 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Thu, 12 Dec 2024 23:27:52 +0000
Subject: [PATCH] country flag and layout components

---
 .../contentLayout/ContentLayout.tsx           | 26 +++++++++++++++++++
 .../components/countryFlag/CountryFlag.tsx    | 21 +++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 explorer-nextjs/src/components/contentLayout/ContentLayout.tsx
 create mode 100644 explorer-nextjs/src/components/countryFlag/CountryFlag.tsx

diff --git a/explorer-nextjs/src/components/contentLayout/ContentLayout.tsx b/explorer-nextjs/src/components/contentLayout/ContentLayout.tsx
new file mode 100644
index 0000000000..bfac848984
--- /dev/null
+++ b/explorer-nextjs/src/components/contentLayout/ContentLayout.tsx
@@ -0,0 +1,26 @@
+import { Box, type BoxProps } from "@mui/material";
+
+export const ContentLayout = ({
+  children,
+  component: Component = "div",
+  className,
+  sx,
+  ...rest
+}: BoxProps) => {
+  return (
+    <Box
+      component={Component}
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        gap: { xs: "30px", md: "200px" },
+        py: { xs: "30px", md: "100px" },
+        ...sx,
+      }}
+      className={className}
+      {...rest}
+    >
+      {children}
+    </Box>
+  );
+};
diff --git a/explorer-nextjs/src/components/countryFlag/CountryFlag.tsx b/explorer-nextjs/src/components/countryFlag/CountryFlag.tsx
new file mode 100644
index 0000000000..783fbaf175
--- /dev/null
+++ b/explorer-nextjs/src/components/countryFlag/CountryFlag.tsx
@@ -0,0 +1,21 @@
+import { Stack, Typography } from "@mui/material";
+import Flag from "react-world-flags";
+
+interface ICountryFlag {
+  countryCode: string;
+  countryName?: string;
+}
+
+const CountryFlag = ({ countryCode, countryName }: ICountryFlag) => {
+  return (
+    <Stack direction="row" gap={1}>
+      <Flag code={countryCode} width="19" />
+      <Typography variant="subtitle2" sx={{ color: "pine.950" }}>
+        {countryName}
+      </Typography>
+    </Stack>
+  );
+};
+
+export default CountryFlag;
+export type { ICountryFlag };