Add Tinder-like card swiping UI component

smbls/components/ActionButton.js

@@ -0,0 +1,24 @@
+export const ActionButton = {
+  extends: 'Flex',
+  flexAlign: 'center center',
+  round: '100px',
+  cursor: 'pointer',
+  transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+  style: {
+    userSelect: 'none'
+  },
+  ':hover': {
+    style: {
+      transform: 'scale(1.12)'
+    }
+  },
+  ':active': {
+    style: {
+      transform: 'scale(0.95)'
+    }
+  },
+
+  Icon: {
+    name: (el, s) => s.icon || 'heart'
+  }
+}

smbls/components/ActionButtons.js

@@ -0,0 +1,65 @@
+export const ActionButtons = {
+  extends: 'Flex',
+  flow: 'x',
+  flexAlign: 'center center',
+  gap: 'A2',
+  padding: 'A2 0',
+
+  RewindBtn: {
+    extends: 'ActionButton',
+    boxSize: 'C2',
+    background: 'gray3 0.85',
+    ':hover': { background: 'gray3' },
+    Icon: { name: 'rewind', boxSize: 'A', color: 'tinderGold' },
+    onClick: (ev, el, s) => {
+      s.update({ action: 'rewind' })
+    }
+  },
+
+  NopeBtn: {
+    extends: 'ActionButton',
+    boxSize: 'D',
+    background: 'gray3 0.85',
+    border: 'tinderRed 2px solid',
+    ':hover': { background: 'tinderRed 0.15' },
+    Icon: { name: 'tinderClose', boxSize: 'A2', color: 'tinderRed' },
+    onClick: (ev, el, s) => {
+      s.update({ action: 'nope' })
+    }
+  },
+
+  SuperLikeBtn: {
+    extends: 'ActionButton',
+    boxSize: 'C2',
+    background: 'gray3 0.85',
+    border: 'tinderBlue 2px solid',
+    ':hover': { background: 'tinderBlue 0.15' },
+    Icon: { name: 'star', boxSize: 'A', color: 'tinderBlue' },
+    onClick: (ev, el, s) => {
+      s.update({ action: 'superlike' })
+    }
+  },
+
+  LikeBtn: {
+    extends: 'ActionButton',
+    boxSize: 'D',
+    background: 'gray3 0.85',
+    border: 'tinderGreen 2px solid',
+    ':hover': { background: 'tinderGreen 0.15' },
+    Icon: { name: 'heart', boxSize: 'A2', color: 'tinderGreen' },
+    onClick: (ev, el, s) => {
+      s.update({ action: 'like' })
+    }
+  },
+
+  BoostBtn: {
+    extends: 'ActionButton',
+    boxSize: 'C2',
+    background: 'gray3 0.85',
+    ':hover': { background: 'tinderPurple 0.15' },
+    Icon: { name: 'bolt', boxSize: 'A', color: 'tinderPurple' },
+    onClick: (ev, el, s) => {
+      s.update({ action: 'boost' })
+    }
+  }
+}

smbls/components/ProfileCard.js

@@ -0,0 +1,176 @@
+export const ProfileCard = {
+  extends: 'Flex',
+  flow: 'y',
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  overflow: 'hidden',
+  round: 'B',
+
+  Photo: {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    tag: 'img',
+    style: { objectFit: 'cover' },
+    src: (el, s) => s.image || '',
+    draggable: 'false'
+  },
+
+  Gradient: {
+    position: 'absolute',
+    bottom: '0',
+    left: '0',
+    width: '100%',
+    height: '55%',
+    style: {
+      background: 'linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, transparent 100%)',
+      pointerEvents: 'none'
+    }
+  },
+
+  Info: {
+    extends: 'Flex',
+    flow: 'y',
+    position: 'absolute',
+    bottom: '0',
+    left: '0',
+    width: '100%',
+    padding: 'A2',
+    gap: 'Z',
+    color: 'white',
+
+    NameRow: {
+      extends: 'Flex',
+      flow: 'x',
+      align: 'center flex-start',
+      gap: 'Z',
+      Name: {
+        tag: 'h2',
+        fontSize: 'C',
+        fontWeight: '700',
+        text: (el, s) => s.name || ''
+      },
+      Age: {
+        tag: 'span',
+        fontSize: 'B2',
+        fontWeight: '300',
+        text: (el, s) => s.age || ''
+      }
+    },
+
+    JobRow: {
+      extends: 'Flex',
+      flow: 'x',
+      align: 'center flex-start',
+      gap: 'Z',
+      if: (el, s) => s.job,
+      Icon: { name: 'briefcase', boxSize: 'Z2', color: 'white 0.85' },
+      Text: {
+        tag: 'span',
+        fontSize: 'A',
+        color: 'white 0.9',
+        text: (el, s) => s.job || ''
+      }
+    },
+
+    SchoolRow: {
+      extends: 'Flex',
+      flow: 'x',
+      align: 'center flex-start',
+      gap: 'Z',
+      if: (el, s) => s.school,
+      Icon: { name: 'graduationCap', boxSize: 'Z2', color: 'white 0.85' },
+      Text: {
+        tag: 'span',
+        fontSize: 'A',
+        color: 'white 0.9',
+        text: (el, s) => s.school || ''
+      }
+    },
+
+    LocationRow: {
+      extends: 'Flex',
+      flow: 'x',
+      align: 'center flex-start',
+      gap: 'Z',
+      if: (el, s) => s.distance,
+      Icon: { name: 'mapPin', boxSize: 'Z2', color: 'white 0.85' },
+      Text: {
+        tag: 'span',
+        fontSize: 'Z2',
+        color: 'white 0.75',
+        text: (el, s) => s.distance || ''
+      }
+    }
+  },
+
+  LikeStamp: {
+    extends: 'Flex',
+    flexAlign: 'center center',
+    position: 'absolute',
+    top: 'B',
+    left: 'A2',
+    padding: 'Z A',
+    border: 'tinderGreen 4px solid',
+    round: 'Z2',
+    color: 'tinderGreen',
+    fontSize: 'C',
+    fontWeight: '800',
+    letterSpacing: '2px',
+    text: 'LIKE',
+    opacity: '0',
+    style: {
+      transform: 'rotate(-25deg)',
+      pointerEvents: 'none',
+      textTransform: 'uppercase'
+    }
+  },
+
+  NopeStamp: {
+    extends: 'Flex',
+    flexAlign: 'center center',
+    position: 'absolute',
+    top: 'B',
+    right: 'A2',
+    padding: 'Z A',
+    border: 'tinderRed 4px solid',
+    round: 'Z2',
+    color: 'tinderRed',
+    fontSize: 'C',
+    fontWeight: '800',
+    letterSpacing: '2px',
+    text: 'NOPE',
+    opacity: '0',
+    style: {
+      transform: 'rotate(25deg)',
+      pointerEvents: 'none',
+      textTransform: 'uppercase'
+    }
+  },
+
+  SuperLikeStamp: {
+    extends: 'Flex',
+    flexAlign: 'center center',
+    position: 'absolute',
+    bottom: 'E',
+    left: '50%',
+    padding: 'Z A',
+    border: 'tinderBlue 4px solid',
+    round: 'Z2',
+    color: 'tinderBlue',
+    fontSize: 'C',
+    fontWeight: '800',
+    letterSpacing: '2px',
+    text: 'SUPER LIKE',
+    opacity: '0',
+    style: {
+      transform: 'translateX(-50%)',
+      pointerEvents: 'none',
+      textTransform: 'uppercase',
+      whiteSpace: 'nowrap'
+    }
+  }
+}