feat: activity screen in the SPA, route /activity

web/src/lib/segmentStyles.ts

@@ -0,0 +1,15 @@
+const SEGMENT_BUTTON =
+	'h-10.5 gap-1.5 px-3 text-sm ring-0 md:h-7.5 md:px-2.5 rounded-none whitespace-nowrap'
+const SEGMENT_SELECTED =
+	'bg-secondary-200 font-medium text-primary-900 hover:bg-secondary-200 dark:bg-secondary-300 dark:hover:bg-secondary-300'
+const SEGMENT_IDLE = 'bg-default font-normal text-toned'
+
+export function segmentClass(selected: boolean, block = false) {
+	return [
+		SEGMENT_BUTTON,
+		selected ? SEGMENT_SELECTED : SEGMENT_IDLE,
+		block ? 'flex-1 justify-center' : '',
+	]
+}
+
+export const SEGMENT_GROUP = 'flex shrink-0 border border-accented'