shack/pages/shelf/create.page.vue

<template>
	<div class="content">
		<h2 class="heading">Create new shelf</h2>

		<form
			class="form create"
			@submit.prevent="create"
		>
			<div class="form-section">
				<div class="form-row name">
					<span class="prefix">s/</span>

					<input
						v-model="slug"
						placeholder="home"
						class="input"
					>
				</div>

				<div class="form-row">
					<input
						v-model="title"
						placeholder="Tag line"
						class="input"
					>
				</div>

				<div class="form-row">
					<textarea
						v-model="description"
						placeholder="Description"
						class="input"
					/>
				</div>
			</div>

			<div class="form-section">
				<div class="form-row">
					<div class="form-column">
						<h4 class="form-heading">View access</h4>

						<label class="access">
							<input
								v-model="viewAccess"
								type="radio"
								value="public"
								class="radio"
							>Public

							<div class="access-description">Everyone can browse this shelf</div>
						</label>

						<label class="access">
							<input
								v-model="viewAccess"
								type="radio"
								value="registered"
								class="radio"
							>Registered

							<div class="access-description">Registered shack users can browse</div>
						</label>

						<label class="access">
							<input
								v-model="viewAccess"
								type="radio"
								value="private"
								class="radio"
							>Private

							<div class="access-description">Only invited users can browse</div>
						</label>
					</div>

					<div class="form-column">
						<h4 class="form-heading">Post access</h4>

						<label class="access">
							<input
								v-model="postAccess"
								type="radio"
								value="registered"
								class="radio"
							>Registered

							<div class="access-description">Registered users can post</div>
						</label>

						<label class="access">
							<input
								v-model="postAccess"
								type="radio"
								value="private"
								class="radio"
							>Private

							<div class="access-description">Only invited users can post</div>
						</label>
					</div>
				</div>
			</div>

			<div class="form-section">
				<label class="check-container">
					<span>
						<span class="nsfw">NSFW 18+</span>
						<span class="description">This community allows explicit content</span>
					</span>

					<Checkbox
						:checked="isNsfw"
						@change="(checked) => isNsfw = checked"
					/>
				</label>
			</div>

			<div class="form-row form-actions">
				<button class="button button-submit">Create shelf</button>
			</div>
		</form>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import Checkbox from '../../components/form/checkbox.vue';
import { post } from '../../assets/js/api';

const slug = ref();
const title = ref();
const description = ref();

const viewAccess = ref('public');
const postAccess = ref('registered');

const isNsfw = ref(false);

async function create() {
	await post('/shelves', {
		slug: slug.value,
		title: title.value,
		description: description.value,
		settings: {
			viewAccess: viewAccess.value,
			postAccess: postAccess.value,
			isNsfw: isNsfw.value,
		},
	});
}
</script>

<style scoped>
.content {
	display: flex;
	justify-content: center;
	align-items: center;
}

.create {
	background: var(--background);
	padding: 1rem;
	border-radius: .5rem;
}

.name {
	position: relative;

	.input {
		padding-left: 1.65rem;
	}

	.prefix {
		color: var(--shadow);
		position: absolute;
		top: 1px;
		left: .25rem;
		letter-spacing: .1rem;
		padding: .5rem;
	}
}

.access {
	font-weight: bold;
	margin-bottom: .75rem;
	cursor: pointer;
}

.access-description {
	margin: .25rem 0 0 1.25rem;
	color: var(--shadow);
	font-size: .9rem;
	font-weight: normal;
}

.nsfw {
	margin-right: .5rem;
	font-weight: bold;
	color: var(--error);
}
</style>