country flag and layout components

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>
+  );
+};

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 };