moein/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Moein Moradi
2025-08-04 16:33:07 +03:30
commit f798e8e35c
9595 changed files with 1208683 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
resources/js/views/pages/account-settings/AccountSettingsConnections.vue Normal file
View File

@@ -0,0 +1,204 @@
<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',
color: 'yellow',
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: '@Pixinvent',
link: 'https://twitter.com/Pixinvents',
},
connected: true,
},
{
logo: linkedin,
name: 'LinkedIn',
links: {
username: '@Pixinvent',
link: 'https://in.linkedin.com/in/pixinvent-creative-studio-561a4713b',
},
connected: true,
},
{
logo: dribbble,
name: 'Dribbble',
connected: false,
},
{
logo: behance,
name: 'Behance',
connected: false,
},
])
</script>
<template>
<VCard>
<VRow>
<VCol
cols="12"
md="6"
class="pe-md-0 pb-0 pb-md-3"
>
<!-- 👉 Connected Accounts -->
<VCard
title="Connected Accounts"
subtitle="Display content from your connected accounts on your site"
flat
>
<VCardText>
<VList class="card-list">
<VListItem
v-for="item in connectedAccounts"
:key="item.logo"
>
<template #prepend>
<VAvatar>
<img
:src="item.logo"
height="32"
>
</VAvatar>
</template>
<VListItemTitle>
<h6 class="text-h6">
{{ item.name }}
</h6>
</VListItemTitle>
<VListItemSubtitle class="text-xs">
{{ item.subtitle }}
</VListItemSubtitle>
<template #append>
<VListItemAction>
<VSwitch
v-model="item.connected"
density="compact"
class="me-1"
/>
</VListItemAction>
</template>
</VListItem>
</VList>
</VCardText>
</VCard>
</VCol>
<VCol
cols="12"
md="6"
class="ps-md-0 pt-0 pt-md-3"
>
<!-- 👉 Social Accounts -->
<VCard
title="Social Accounts"
subtitle="Display content from social accounts on your site"
flat
>
<VCardText>
<VList class="card-list">
<VListItem
v-for="item in socialAccounts"
:key="item.logo"
>
<template #prepend>
<VAvatar rounded>
<img
:src="item.logo"
height="32"
>
</VAvatar>
</template>
<VListItemTitle>
<h6 class="text-h6">
{{ item.name }}
</h6>
</VListItemTitle>
<VListItemSubtitle v-if="item.links?.link">
<a
:href="item.links.link"
target="_blank"
rel="noopener noreferrer"
>{{ item.links?.username }}</a>
</VListItemSubtitle>
<VListItemSubtitle
v-else
class="text-xs"
>
Not Connected
</VListItemSubtitle>
<template #append>
<VListItemAction>
<IconBtn
variant="tonal"
:color="item.connected ? 'error' : 'secondary'"
class="rounded"
>
<VIcon
size="22"
:icon="item.connected ? 'tabler-trash' : 'tabler-link' "
/>
</IconBtn>
</VListItemAction>
</template>
</VListItem>
</VList>
</VCardText>
</VCard>
</VCol>
</VRow>
</VCard>
</template>
<style lang="scss">
.card-list {
--v-card-list-gap: 16px;
}
</style>