Added social icon component. Fixes #3

resources/js/components/ui/social-icon/SocialIcon.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import { socialIconVariants, SocialIconVariant } from '.';
+import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue"
+import { computed } from "vue"
+
+const props = defineProps<PrimitiveProps & {
+    variant?: string,
+    class?: HTMLAttributes["class"]
+}>();
+
+const currentVariant = computed<SocialIconVariant>(() => {
+    const v = props.variant?.toLowerCase() as SocialIconVariant; // Konvertiere zu lowercase
+    return v && socialIconVariants[v] ? v : 'default';
+});
+
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" stroke="currentColor"
+        fill="transparent" stroke-width="1.5" :class="cn(props.class)" width="24" height="24" focusable="false">
+        <g v-html="socialIconVariants[currentVariant]"></g>
+    </svg>
+</template>

resources/js/components/ui/social-icon/index.ts

@@ -0,0 +1,71 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as SocialIcon } from "./SocialIcon.vue"
+export type SocialIconVariant =
+    'default' |
+    'linkedin' |
+    'xing' |
+    'github' |
+    'instagram' |
+    'twitter' |
+    'x' |
+    'slack' |
+    'teams' |
+    'matrix' |
+    'bluesky' |
+    'mastodon' |
+    'whatsapp' |
+    'telegram' |
+    'threema'
+    ;
+
+export const socialIconVariants: Record<SocialIconVariant, string> = {
+    default: `
+    <path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
+    `,
+    linkedin: `
+    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/>
+    `,
+    xing: `
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16 21l-4 -7l6.5 -11" /><path d="M7 7l2 3.5l-3 4.5" />
+    `,
+    github: `
+    <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/>
+    `,
+    instagram: `
+    <rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/>
+    `,
+    twitter: `
+    <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/>
+    `,
+    x: `
+    <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/>
+    `,
+    slack: `
+    <rect width="3" height="8" x="13" y="2" rx="1.5"/><path d="M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5"/><rect width="3" height="8" x="8" y="14" rx="1.5"/><path d="M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5"/><rect width="8" height="3" x="14" y="13" rx="1.5"/><path d="M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5"/><rect width="8" height="3" x="2" y="8" rx="1.5"/><path d="M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5"/>
+    `,
+    teams: `
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7h10v10h-10z" /><path d="M6 10h4" /><path d="M8 10v4" /><path d="M8.104 17c.47 2.274 2.483 4 4.896 4a5 5 0 0 0 5 -5v-7h-5" /><path d="M18 18a4 4 0 0 0 4 -4v-5h-4" /><path d="M13.003 8.83a3 3 0 1 0 -1.833 -1.833" /><path d="M15.83 8.36a2.5 2.5 0 1 0 .594 -4.117" />
+    `,
+    matrix: `
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 3h-1v18h1" /><path d="M20 21h1v-18h-1" /><path d="M7 9v6" /><path d="M12 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" /><path d="M17 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" />
+    `,
+    bluesky: `
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6.335 5.144c-1.654 -1.199 -4.335 -2.127 -4.335 .826c0 .59 .35 4.953 .556 5.661c.713 2.463 3.13 2.75 5.444 2.369c-4.045 .665 -4.889 3.208 -2.667 5.41c1.03 1.018 1.913 1.59 2.667 1.59c2 0 3.134 -2.769 3.5 -3.5c.333 -.667 .5 -1.167 .5 -1.5c0 .333 .167 .833 .5 1.5c.366 .731 1.5 3.5 3.5 3.5c.754 0 1.637 -.571 2.667 -1.59c2.222 -2.203 1.378 -4.746 -2.667 -5.41c2.314 .38 4.73 .094 5.444 -2.369c.206 -.708 .556 -5.072 .556 -5.661c0 -2.953 -2.68 -2.025 -4.335 -.826c-2.293 1.662 -4.76 5.048 -5.665 6.856c-.905 -1.808 -3.372 -5.194 -5.665 -6.856z" />
+    `,
+    mastodon: `
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18.648 15.254c-1.816 1.763 -6.648 1.626 -6.648 1.626a18.262 18.262 0 0 1 -3.288 -.256c1.127 1.985 4.12 2.81 8.982 2.475c-1.945 2.013 -13.598 5.257 -13.668 -7.636l-.026 -1.154c0 -3.036 .023 -4.115 1.352 -5.633c1.671 -1.91 6.648 -1.666 6.648 -1.666s4.977 -.243 6.648 1.667c1.329 1.518 1.352 2.597 1.352 5.633s-.456 4.074 -1.352 4.944z" /><path d="M12 11.204v-2.926c0 -1.258 -.895 -2.278 -2 -2.278s-2 1.02 -2 2.278v4.722m4 -4.722c0 -1.258 .895 -2.278 2 -2.278s2 1.02 2 2.278v4.722" />
+    `,
+    whatsapp: `
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" /><path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" />
+    `,
+    telegram: `
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4" />
+    `,
+    threema: `
+    <g><g><path d="M7.284,23.5c0.831,0 1.504,-0.673 1.504,-1.504c-0,-0.831 -0.673,-1.504 -1.504,-1.504c-0.831,-0 -1.504,0.673 -1.504,1.504c0,0.831 0.673,1.504 1.504,1.504Z" /><path d="M12.199,23.5c0.831,0 1.504,-0.673 1.504,-1.504c0,-0.831 -0.673,-1.504 -1.504,-1.504c-0.831,-0 -1.504,0.673 -1.504,1.504c-0,0.831 0.673,1.504 1.504,1.504Z" /><path d="M17.109,23.5c0.83,0 1.504,-0.673 1.504,-1.504c0,-0.831 -0.674,-1.504 -1.504,-1.504c-0.831,-0 -1.504,0.673 -1.504,1.504c-0,0.831 0.673,1.504 1.504,1.504Z" /><path d="M11.998,0.5c-4.935,0 -8.95,4.014 -8.95,8.95c-0,1.956 0.634,3.772 1.705,5.246l-1.116,3.326l3.441,-1.102c1.414,0.936 3.103,1.479 4.925,1.479c4.935,0 8.949,-4.014 8.949,-8.949c0,-4.936 -4.014,-8.95 -8.949,-8.95l-0.005,0Z" /></g><path d="M14.654,8.489l-0.08,-0l-0,-1.203c-0,-1.418 -1.157,-2.575 -2.576,-2.575c-1.419,-0 -2.576,1.157 -2.576,2.575l0,1.203l-0.08,-0c-0.448,-0 -0.811,0.362 -0.811,0.81l0,3.249c0,0.448 0.363,0.81 0.811,0.81l5.307,0c0.448,0 0.81,-0.362 0.81,-0.81l0,-3.249c0,-0.448 -0.362,-0.81 -0.81,-0.81l0.005,-0Zm-4.176,-1.203c0,-0.84 0.684,-1.519 1.52,-1.519c0.835,0 1.519,0.684 1.519,1.519l-0,1.203l-3.039,-0l0,-1.203Z" /></g>
+    `,
+}
+
+

resources/js/pages/Customers.vue

@@ -20,6 +20,7 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import CustomerDialog from '@/components/CustomerDialog.vue'
 import { toast } from 'vue-sonner'
+import { SocialIcon } from '@/components/ui/social-icon'
 import { AxiosError } from 'axios'
 
 const breadcrumbs: BreadcrumbItem[] = [
@@ -250,21 +251,25 @@ const call = (number: string, event: Event) => {
                                     <p v-if="contact.jobTitle" class="text-muted-foreground">{{ contact.jobTitle }}</p>
 
                                     <ButtonGroup class="mt-4">
+                                        <!-- E-mail -->
                                         <Button size="sm" v-if="contact.email"
                                             @click="(event: Event) => mail(contact.email as string, event)">
                                             <Mail stroke-width="1.5" @click="" />
                                         </Button>
+                                        <!-- Phone -->
                                         <Button size="sm" v-if="contact.phone"
                                             @click="(event: Event) => call(contact.phone as string, event)">
                                             <Phone stroke-width="1.5" @click="" />
                                         </Button>
+                                        <!-- Mobile phone -->
                                         <Button size="sm" v-if="contact.mobilePhone"
                                             @click="(event: Event) => call(contact.mobilePhone as string, event)">
                                             <Smartphone stroke-width="1.5" @click="" />
                                         </Button>
+                                        <!-- Online accounts -->
                                         <Button size="sm" v-for="account in contact.onlineAccounts"
                                             @click="(event: Event) => browse(account.url as string, event)">
-                                            <span>{{ account.platform }}</span>
+                                            <SocialIcon :variant="account.platform" />
                                         </Button>
                                     </ButtonGroup>
                                 </TooltipContent>