1 files changed, 110 insertions, 0 deletions
diff --git a/apps/user_status/src/components/OnlineStatusSelect.vue b/apps/user_status/src/components/OnlineStatusSelect.vue
new file mode 100644
index 00000000000..0abcc8d68e6
--- /dev/null
+++ b/apps/user_status/src/components/OnlineStatusSelect.vue
@@ -0,0 +1,110 @@
+<!--
+  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="user-status-online-select">
+		<input :id="id"
+			:checked="checked"
+			class="hidden-visually user-status-online-select__input"
+			type="radio"
+			name="user-status-online"
+			@change="onChange">
+		<label :for="id" class="user-status-online-select__label">
+			<NcUserStatusIcon :status="type"
+				class="user-status-online-select__icon"
+				aria-hidden="true" />
+			{{ label }}
+			<em class="user-status-online-select__subline">{{ subline }}</em>
+		</label>
+	</div>
+</template>
+
+<script>
+import NcUserStatusIcon from '@nextcloud/vue/components/NcUserStatusIcon'
+
+export default {
+	name: 'OnlineStatusSelect',
+
+	components: {
+		NcUserStatusIcon,
+	},
+
+	props: {
+		checked: {
+			type: Boolean,
+			default: false,
+		},
+		type: {
+			type: String,
+			required: true,
+		},
+		label: {
+			type: String,
+			required: true,
+		},
+		subline: {
+			type: String,
+			default: null,
+		},
+	},
+
+	computed: {
+		id() {
+			return `user-status-online-status-${this.type}`
+		},
+	},
+
+	methods: {
+		onChange() {
+			this.$emit('select', this.type)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.user-status-online-select {
+	&__label {
+		box-sizing: inherit;
+		display: grid;
+		grid-template-columns: var(--default-clickable-area) 1fr 2fr;
+		align-items: center;
+		gap: var(--default-grid-baseline);
+		min-height: var(--default-clickable-area);
+		padding: var(--default-grid-baseline);
+		border-radius: var(--border-radius-large);
+		background-color: var(--color-background-hover);
+
+		&, & * {
+			cursor: pointer;
+		}
+
+		&:hover {
+			background-color: var(--color-background-dark);
+		}
+	}
+
+	&__icon {
+		flex-shrink: 0;
+		max-width: 34px;
+		max-height: 100%;
+	}
+
+	&__input:checked + &__label {
+		outline: 2px solid var(--color-main-text);
+		background-color: var(--color-background-dark);
+		box-shadow: 0 0 0 4px var(--color-main-background);
+	}
+
+	&__input:focus-visible + &__label {
+		outline: 2px solid var(--color-primary-element) !important;
+		background-color: var(--color-background-dark);
+	}
+
+	&__subline {
+		display: block;
+		color: var(--color-text-lighter);
+	}
+}
+</style>