Social Profiles

Social Profiles display

<Script :dependencies={[data.profiles]} :as="activePlatforms">
  const allPlatforms = [
    {
      name: "facebook",
      label: "Facebook",
      icon: "font-awesome-5:brands:facebook-f"
    },
    {
      name: "twitter",
      label: "Twitter",
      icon: "font-awesome-5:brands:twitter"
    },
    {
      name: "instagram",
      label: "Instagram",
      icon: "font-awesome-5:brands:instagram"
    },
    {
      name: "linkedin",
      label: "LinkedIn",
      icon: "font-awesome-5:brands:linkedin-in"
    },
    {
      name: "youtube",
      label: "YouTube",
      icon: "font-awesome-5:brands:youtube"
    },
    {
      name: "tiktok",
      label: "TikTok",
      icon: "font-awesome-5:brands:tiktok"
    }
  ]

  const platforms = allPlatforms.filter(platform => {
    const url = data.profiles[platform.name]
    if (url && url.trim() !== '') {
      platform.url = url
      return true
    }
    return false
  })
</Script>

<Box p="md">
  <Text 
    :if={data.display.title}
    fontSize="xl" 
    fontWeight="bold" 
    textAlign="center"
    mb="lg"
  >
    {data.display.title}
  </Text>

  <Box 
    flexDirection="row" 
    flexWrap="wrap" 
    justifyContent="center"
    alignItems="center"
  >
    <Box :forEach={activePlatforms.platforms} :as="platform">
      <Box mr="md" mb="md">
        <Actionable 
          action.link={platform.url}
        >
          <Box
            bg="gray-100"
            p="md"
            borderRadius="full"
            alignItems="center"
            justifyContent="center"
            width={48}
            height={48}
          >
            <Icon 
              icon={platform.icon}
              size={24}
              color="primary-900"
            />
          </Box>
        </Actionable>
      </Box>
    </Box>
  </Box>
</Box>