feat(LOY-195): digital team member card button on my pages overview

apps/scandic-web/components/DigitalTeamMemberCard/digitalTeamMemberCard.module.css

@@ -0,0 +1,31 @@
+.card {
+  padding: var(--Space-x2) var(--Space-x15);
+  border-radius: var(--Corner-radius-md);
+  border: 0;
+  cursor: pointer;
+  background: var(--Surface-Brand-Primary-1-OnSurface-Default);
+  color: var(--Text-Brand-OnPrimary-3-Accent);
+
+  &:focus,
+  &:hover {
+    outline: none;
+    background:
+      linear-gradient(
+        0deg,
+        rgb(255 255 255 / 10%) 0%,
+        rgb(255 255 255 / 10%) 100%
+      ),
+      var(--Surface-Brand-Primary-1-OnSurface-Default);
+  }
+  &:disabled {
+    background: var(--Surface-UI-Fill-Disabled);
+    color: var(--Text-Interactive-Disabled);
+  }
+}
+
+.text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Space-x1);
+}

apps/scandic-web/components/DigitalTeamMemberCard/index.tsx

@@ -0,0 +1,37 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { env } from "@/env/server"
+
+import { getIntl } from "@/i18n"
+
+import styles from "./digitalTeamMemberCard.module.css"
+
+import type { User } from "@/types/user"
+
+interface DigitalTeamMemberCardProps {
+  user: User
+}
+
+export default async function DigitalTeamMemberCard(
+  // TODO: Make a check whether user is eligible for benefits or not
+  _props: DigitalTeamMemberCardProps
+) {
+  if (!env.ENABLE_DTMC) {
+    return null
+  }
+
+  const intl = await getIntl()
+
+  return (
+    <button className={styles.card} type="button">
+      <Typography variant="Body/Paragraph/mdBold">
+        <span className={styles.text}>
+          {/* @ts-expect-error Icon is supported in font, just not in React Material Symbols package */}
+          <MaterialIcon icon="id_card" size={24} color="CurrentColor" />
+          {intl.formatMessage({ defaultMessage: "Show Team Member Card" })}
+        </span>
+      </Typography>
+    </button>
+  )
+}