// ** Next Import import Link from 'next/link' // ** MUI Imports import Box from '@mui/material/Box' import Grid from '@mui/material/Grid' import Card from '@mui/material/Card' import Switch from '@mui/material/Switch' import Button from '@mui/material/Button' import Typography from '@mui/material/Typography' import CardHeader from '@mui/material/CardHeader' import CardContent from '@mui/material/CardContent' // ** Icon Imports import Icon from 'src/@core/components/icon' import Image from 'next/image' interface ConnectedAccountsType { title: string logo: string checked: boolean subtitle: string } interface SocialAccountsType { title: string logo: string username?: string isConnected: boolean } const connectedAccountsArr: ConnectedAccountsType[] = [ { checked: true, title: 'Google', logo: '/images/logos/google.png', subtitle: 'Calendar and Contacts' }, { checked: false, title: 'Slack', logo: '/images/logos/slack.png', subtitle: 'Communications' }, { checked: true, title: 'Github', logo: '/images/logos/github.png', subtitle: 'Manage your Git repositories' }, { checked: true, title: 'Mailchimp', subtitle: 'Email marketing service', logo: '/images/logos/mail-chimp.png' }, { title: 'Asana', checked: false, subtitle: 'Communication', logo: '/images/logos/asana.png' } ] const socialAccountsArr: SocialAccountsType[] = [ { title: 'Facebook', isConnected: false, logo: '/images/logos/facebook.png' }, { title: 'Twitter', isConnected: true, username: '@Pixinvent', logo: '/images/logos/twitter.png' }, { title: 'Instagram', isConnected: true, username: '@Pixinvent', logo: '/images/logos/instagram.png' }, { title: 'Dribbble', isConnected: false, logo: '/images/logos/dribbble.png' }, { title: 'Behance', isConnected: false, logo: '/images/logos/behance.png' } ] const UserViewConnection = () => { return ( {/* Connected Accounts Cards */} Display content from your connected accounts on your site {connectedAccountsArr.map(account => { return ( {account.title}
{account.title} {account.subtitle}
) })}
{/* Social Accounts Cards */} Display content from social accounts on your site {socialAccountsArr.map(account => { return ( {account.title}
{account.title} {account.isConnected ? ( e.preventDefault()} sx={{ color: 'primary.main', textDecoration: 'none' }} > {account.username} ) : ( Not Connected )}
) })}
) } export default UserViewConnection