feat: add PresenceAvatar component with presence indicator styles

src/app/components/presence/styles.css.ts

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { config } from 'folds';
+import { config, color } from 'folds';
 
 export const AvatarPresence = style({
   display: 'flex',
@@ -20,3 +20,41 @@ export const AvatarPresenceBadge = style({
   borderRadius: config.radii.Pill,
   overflow: 'hidden',
 });
+
+export const PresenceAvatarContainer = style({
+  display: 'flex',
+  position: 'relative',
+  flexShrink: 0,
+  alignSelf: 'flex-start',
+  '::before': {
+    content: '""',
+    position: 'absolute',
+    left: 0,
+    top: '10%',
+    height: '80%',
+    width: '3px',
+    borderTopRightRadius: '2px',
+    borderBottomRightRadius: '2px',
+    zIndex: 1,
+  },
+});
+
+export const PresenceIndicator = style({});
+
+export const PresenceOnline = style({
+  '::before': {
+    backgroundColor: color.Success.Main,
+  },
+});
+
+export const PresenceUnavailable = style({
+  '::before': {
+    backgroundColor: color.Warning.Main,
+  },
+});
+
+export const PresenceOffline = style({
+  '::before': {
+    backgroundColor: color.Secondary.Main,
+  },
+});