AccountSettingsConnections.vue

<script setup>
import asana from '@images/icons/brands/asana.png'
import behance from '@images/icons/brands/behance.png'
import dribbble from '@images/icons/brands/dribbble.png'
import facebook from '@images/icons/brands/facebook.png'
import github from '@images/icons/brands/github.png'
import google from '@images/icons/brands/google.png'
import linkedin from '@images/icons/brands/linkedin.png'
import mailchimp from '@images/icons/brands/mailchimp.png'
import slack from '@images/icons/brands/slack.png'
import twitter from '@images/icons/brands/twitter.png'

const connectedAccounts = ref([
  {
    logo: google,
    name: 'Google',
    subtitle: 'Calendar and contacts',
    connected: true,
  },
  {
    logo: slack,
    name: 'Slack',
    subtitle: 'Communication',
    connected: false,
  },
  {
    logo: github,
    name: 'GitHub',
    subtitle: 'Manage your Git repositories',
    connected: true,
  },
  {
    logo: mailchimp,
    name: 'MailChimp',
    subtitle: 'Email marketing service',
    connected: true,
  },
  {
    logo: asana,
    name: 'Asana',
    subtitle: 'Task management',
    connected: false,
  },
])

const socialAccounts = ref([
  {
    logo: facebook,
    name: 'Facebook',
    connected: false,
  },
  {
    logo: twitter,
    name: 'Twitter',
    links: {
      username: '@ThemeSelection',
      link: 'https://twitter.com/Theme_Selection',
    },
    connected: true,
  },
  {
    logo: linkedin,
    name: 'LinkedIn',
    links: {
      username: '@ThemeSelection',
      link: 'https://in.linkedin.com/company/themeselection',
    },
    connected: true,
  },
  {
    logo: dribbble,
    name: 'Dribbble',
    connected: false,
  },
  {
    logo: behance,
    name: 'Behance',
    connected: false,
  },
])
</script>

<template>
  <!-- 👉 Connected Accounts -->
  <VCard>
    <VRow>
      <VCol
        cols="12"
        md="6"
        class="pe-md-0 pb-0 pb-md-3"
      >
        <VCard flat>
          <VCardItem class="pb-6">
            <VCardTitle class="mb-1">
              Connected Accounts
            </VCardTitle>
            <VCardSubtitle>Display content from your connected accounts on your site</VCardSubtitle>
          </VCardItem>

          <VCardText>
            <VList class="card-list">
              <VListItem
                v-for="item in connectedAccounts"
                :key="item.logo"
              >
                <template #prepend>
                  <VAvatar
                    size="32"
                    rounded
                  >
                    <img
                      :src="item.logo"
                      height="32"
                      width="32"
                    >
                  </VAvatar>
                </template>

                <VListItemTitle>
                  <h6 class="text-h6">
                    {{ item.name }}
                  </h6>
                </VListItemTitle>

                <VListItemSubtitle>
                  {{ item.subtitle }}
                </VListItemSubtitle>

                <template #append>
                  <VListItemAction>
                    <VSwitch
                      v-model="item.connected"
                      density="compact"
                      class="me-1"
                    />
                  </VListItemAction>
                </template>
              </VListItem>
            </VList>
          </VCardText>
        </VCard>
      </VCol>

      <!-- 👉 Social Accounts -->
      <VCol
        cols="12"
        md="6"
        class="ps-md-0 pt-0 pt-md-3"
      >
        <VCard flat>
          <VCardItem class="pb-6">
            <VCardTitle class="mb-1">
              Social Accounts
            </VCardTitle>
            <VCardSubtitle>Display content from social accounts on your site</VCardSubtitle>
          </VCardItem>
          <VCardText>
            <VList class="card-list">
              <VListItem
                v-for="item in socialAccounts"
                :key="item.logo"
              >
                <template #prepend>
                  <VAvatar
                    rounded="0"
                    size="32"
                  >
                    <img
                      :src="item.logo"
                      height="32"
                      width="32"
                    >
                  </VAvatar>
                </template>

                <VListItemTitle>
                  <h6 class="text-h6">
                    {{ item.name }}
                  </h6>
                </VListItemTitle>
                <VListItemSubtitle
                  v-if="item.links?.link"
                  tag="a"
                  target="_blank"
                  rel="noopener noreferrer"
                  :href="item.links?.link"
                  style="opacity: 1;"
                >
                  {{ item.links?.username }}
                </VListItemSubtitle>

                <VListItemSubtitle v-else>
                  Not Connected
                </VListItemSubtitle>
                <template #append>
                  <VListItemAction>
                    <VBtn
                      icon
                      variant="outlined"
                      :color="item.connected ? 'error' : 'secondary'"
                      rounded
                    >
                      <VIcon :icon="item.connected ? 'ri-delete-bin-line' : 'ri-link' " />
                    </VBtn>
                  </VListItemAction>
                </template>
              </VListItem>
            </VList>
          </VCardText>
        </VCard>
      </VCol>
    </VRow>
  </VCard>
</template>

<style lang="scss">
.card-list {
  --v-card-list-gap: 1rem;
}
</style>