new updates

src/components/Dialogue/index.tsx

@@ -0,0 +1,36 @@
+import { Button, Dialog, DialogContent, DialogTitle, styled, DialogActions } from "@mui/material";
+
+export const DialogueCard = styled(Dialog)(({ theme }) => ({
+
+  backdropFilter: 'blur(2px)',
+
+  '& .MuiDialog-paper': {
+    borderRadius: '1rem',
+  },
+}));
+
+export const DialogueTitle = styled(DialogTitle)(({ theme }) => ({
+  fontSize: '1.5rem',
+  fontWeight: theme.typography.fontWeightMedium,
+  color: theme.palette.text.primary,
+}));
+
+export const DialogueContent = styled(DialogContent)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontSize: '0.875rem',
+  lineHeight: '1.5 !important',
+  textAlign: 'justify',
+  textAlignLast: 'start',
+
+  [theme.breakpoints.down('md')]: {
+    textAlign: 'start',
+  },
+}));
+
+export const DialogueButton = styled(Button)(({ theme }) => ({
+  borderRadius: 0,
+  fontSize: '0.875rem',
+  fontWeight: theme.typography.fontWeightMedium,
+}));
+
+export const DialogueActions = styled(DialogActions)(({ theme }) => ({}));

src/components/Dividers/index.tsx

@@ -0,0 +1,9 @@
+import { DividerProps } from '@interfaces/DividerProps';
+import { styled, Divider as MuiDivider } from '@mui/material';
+
+const Divider = styled(MuiDivider)<DividerProps>(({ theme, size, orientation }) => ({
+  margin: (orientation === 'vertical' && `0 ${theme.Spaces.md}`) || `${theme.Spaces.xl} 0`,
+  height: theme.Spaces[size || 'xl'],
+}));
+
+export default Divider;

src/components/LanguageChanger/TranslationMenu.tsx

@@ -0,0 +1,77 @@
+import { DialogueActions, DialogueButton, DialogueCard, DialogueContent, DialogueTitle } from '@components/Dialogue';
+import { styled } from '@mui/material';
+import React from 'react';
+
+const TranslationMenuTitle = styled(DialogueTitle)(({ theme }) => ({
+  fontSize: '1.5em',
+  fontWeight: 600,
+  textAlign: 'start',
+  padding: '1em',
+}));
+
+const TranslationMenuContent = styled(DialogueContent)(({ theme }) => ({
+  maxWidth: '40em',
+  display: 'grid',
+  justifyItems: 'start',
+  gridTemplateColumns: 'repeat(4, 1fr)',
+}));
+
+const TranslationMenuButton = styled(DialogueButton)(({ theme }) => ({
+  width: '100%',
+  textTransform: 'none',
+}));
+
+const TranslationMenuActions = styled(DialogueActions)(({ theme }) => ({
+  justifyContent: 'end',
+  padding: '1em',
+}));
+
+const CloseButton = styled(DialogueButton)(({ theme }) => ({
+  textTransform: 'none',
+  borderRadius: '0.75em',
+}));
+
+const TranslationMenu = (
+  {
+    open,
+    onClose,
+  }: {
+    open: boolean;
+    onClose: () => void;
+  }
+) => {
+  return (
+    <DialogueCard
+      disableScrollLock
+      aria-labelledby='translation-menu'
+      aria-describedby='translation-menu-description'
+      open={open}
+      onClose={onClose}
+    >
+      <TranslationMenuTitle>Choose display language</TranslationMenuTitle>
+      <TranslationMenuContent>
+        <TranslationMenuButton variant='text' color='inherit'>Sanskrit</TranslationMenuButton>
+        <TranslationMenuButton variant='text' color='inherit'>Hindi</TranslationMenuButton>
+        <TranslationMenuButton variant='text' color='inherit'>Bengali</TranslationMenuButton>
+        <TranslationMenuButton variant='text' color='inherit'>Odia</TranslationMenuButton>
+        <TranslationMenuButton variant='text' color='inherit'>Telugu</TranslationMenuButton>
+        <TranslationMenuButton variant='text' color='inherit'>Tamil</TranslationMenuButton>
+        <TranslationMenuButton variant='text' color='inherit'>Malayalam</TranslationMenuButton>
+        <TranslationMenuButton variant='text' color='inherit'>Kannada</TranslationMenuButton>
+        <TranslationMenuButton variant='text' color='inherit'>English</TranslationMenuButton>
+        <TranslationMenuButton variant='text' color='inherit'>Italian</TranslationMenuButton>
+      </TranslationMenuContent>
+      <TranslationMenuActions>
+        <CloseButton
+          variant='contained'
+          color='error'
+          onClick={onClose}
+        >
+          Close
+        </CloseButton>
+      </TranslationMenuActions>
+    </DialogueCard>
+  )
+}
+
+export default TranslationMenu

src/components/LanguageChanger/index.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Button, Typography, styled } from '@mui/material';
+import TranslationIcon from '@icons/utility/TranslationIcon';
+import TranslationMenu from './TranslationMenu';
+
+const LocaleButton = styled(Button)(({ theme }) => ({
+  textTransform: 'none',
+  fontSize: '1rem',
+  fontWeight: theme.typography.fontWeightRegular,
+  borderRadius: '2rem',
+  padding: `${theme.Spaces.xs} ${theme.Spaces.lg} ${theme.Spaces.xs} ${theme.Spaces.md}`,
+  marginLeft: theme.Spaces.sm,
+
+  '&:hover': {
+    backgroundColor: theme.palette.secondary.main,
+
+    '& svg': {
+      '& *': {
+        fill: theme.palette.secondary.contrastText + ' !important',
+      },
+    },
+
+    '& .MuiTypography-root': {
+      color: theme.palette.secondary.contrastText,
+    },
+  },
+}));
+
+const LocaleIcon = styled(TranslationIcon)(({ theme }) => ({
+  width: '1.65rem',
+  height: '1.65rem',
+  marginRight: theme.Spaces.sm,
+}));
+
+const ButtonText = styled(Typography)(({ theme }) => ({
+  lineHeight: 1.5,
+  fontSize: '0.875rem',
+  color: theme.palette.error.contrastText,
+  cursor: 'pointer',
+}));
+
+const Locale = () => {
+
+  const [localeMenuOpen, setLocaleMenuOpen] = React.useState(false);
+
+  const handleLocaleButtonOnClick = () => {
+    setLocaleMenuOpen(!localeMenuOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <LocaleButton
+        disableElevation
+        variant="contained"
+        color="error"
+        onClick={handleLocaleButtonOnClick}
+      >
+        <LocaleIcon />
+        <ButtonText>
+          Eng IN
+        </ButtonText>
+      </LocaleButton>
+      <TranslationMenu
+        open={localeMenuOpen}
+        onClose={() => setLocaleMenuOpen(false)}
+      />
+    </React.Fragment>
+  )
+}
+
+export default Locale

src/components/Socials/SocialLink.tsx

@@ -0,0 +1,37 @@
+import { styled } from '@mui/material';
+import Link from 'next/link';
+import React from 'react';
+
+interface SocialLinkProps {
+  href: string;
+  target?: string;
+  rel?: string;
+  children: React.ReactNode;
+};
+
+const StyledSocialLink = styled(Link)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const SocialLink = (
+  {
+    href = '',
+    target = '_blank',
+    rel = 'noreferrer',
+    children,
+  } : SocialLinkProps
+) => {
+  return (
+    <StyledSocialLink
+      href={href}
+      target={target}
+      rel={rel}
+    >
+      {children}
+    </StyledSocialLink>
+  )
+};
+
+export default SocialLink;

src/components/Socials/index.tsx

@@ -0,0 +1,47 @@
+import { Box, BoxProps, styled } from '@mui/material';
+import { SocialIconsProps } from '@interfaces/SocialIconsProps';
+import SocialLink from './SocialLink';
+import FacebookLogo from '@icons/socialMedia/FacebookLogo';
+import TwitterLogo from '@icons/socialMedia/TwitterLogo';
+import LinkedinLogo from '@icons/socialMedia/LinkedinLogo';
+import YoutubeLogo from '@icons/socialMedia/YoutubeLogo';
+import InstagramLogo from '@icons/socialMedia/InstagramLogo';
+import WhatsappLogo from '@icons/socialMedia/WhatsappLogo';
+
+interface SocialsWrapperProps extends BoxProps {
+  gap?: string;
+};
+
+const SocialsWrapper = styled(Box)<SocialsWrapperProps>(({ theme, gap }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'start',
+
+  '& > a': {
+    margin: `0 ${gap || theme.Spaces.xs}`,
+
+    '&:first-of-type': {
+      marginLeft: 0,
+    },
+
+    '&:last-of-type': {
+      marginRight: 0,
+    },
+  },
+
+}));
+
+const Socials = ({ links, options }: SocialIconsProps) => {
+  return (
+    <SocialsWrapper {...options}>
+      {links.facebook && <SocialLink href={links.facebook}><FacebookLogo /></SocialLink>}
+      {links.twitter && <SocialLink href={links.twitter}><TwitterLogo /></SocialLink>}
+      {links.linkedin && <SocialLink href={links.linkedin}><LinkedinLogo /></SocialLink>}
+      {links.youtube && <SocialLink href={links.youtube}><YoutubeLogo /></SocialLink>}
+      {links.instagram && <SocialLink href={links.instagram}><InstagramLogo /></SocialLink>}
+      {links.whatsapp && <SocialLink href={links.whatsapp}><WhatsappLogo /></SocialLink>}
+    </SocialsWrapper>
+  )
+}
+
+export default Socials

src/components/ThemeChanger/index.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import { Card, CardProps, FormControl, Typography, styled } from '@mui/material';
+import MoonIcon from '@icons/utility/MoonIcon';
+import SunIcon from '@icons/utility/SunIcon';
+import SystemIcon from '@icons/utility/SystemIcon';
+import { navbar } from '@theme/constants';
+import { useTheme } from "next-themes";
+import Divider from '@components/Dividers';
+import { ThemeNameProps } from '@interfaces/TypographyProps';
+
+interface ThemeChangerWrapperProps extends CardProps {
+  component?: React.ElementType;
+  elevation?: number;
+  name?: string;
+  role?: string;
+};
+
+const ThemeChangerWrapper = styled(Card)<ThemeChangerWrapperProps>(({ theme }) => ({
+  padding: `${theme.Spaces.sm} ${theme.Spaces.md}`,
+  borderRadius: '2rem',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxShadow: 'unset',
+
+  '& svg': {
+    margin: `0 ${theme.Spaces.xs}`,
+    width: '1.5rem',
+    height: '1.5rem',
+  },
+
+  '& svg:first-of-type': {
+    marginLeft: theme.Spaces.xxs,
+  },
+
+  '& svg:last-of-type': {
+    marginRight: theme.Spaces.xxs,
+  },
+}));
+
+const StyledDivider = styled(Divider)(({ theme }) => ({
+  height: '1rem',
+  margin: `0 ${theme.Spaces.sm}`,
+}));
+
+const ThemeName = styled(Typography)<ThemeNameProps>(({ theme }) => ({
+  margin: `0 ${theme.Spaces.xs}`,
+  minWidth: '3.25rem',
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
+
+const ThemeChanger = () => {
+
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // When mounted on client, now we can show the UI
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return <div />;
+
+  const handleThemeChange = (theme: string) => {
+    setTheme(theme);
+  };
+
+  return (
+    <ThemeChangerWrapper
+      elevation={navbar.elevationLow}
+      component={FormControl}
+      name='change-theme'
+      aria-label='change theme'
+      role='radiogroup'
+    >
+      <SunIcon
+        active={(theme === 'light')}
+        onClick={() => handleThemeChange('light')}
+      />
+      <MoonIcon
+        active={(theme === 'dark')}
+        onClick={() => handleThemeChange('dark')}
+      />
+      <SystemIcon
+        active={(theme === 'system')}
+        onClick={() => handleThemeChange('system')}
+      />
+      <StyledDivider orientation='vertical' />
+      <ThemeName variant='body2' component='span'>
+        {theme}
+      </ThemeName>
+    </ThemeChangerWrapper>
+  )
+}
+
+export default ThemeChanger