Playground started

docs/.vitepress/components/avatar-playground.vue

@@ -0,0 +1,27 @@
+<script setup>
+import GunVueAvatar from './gun-vue-avatar.vue';
+import { useState } from '../composables/state'
+const state = useState()
+</script>
+
+<template lang='pug'>
+.p-12.max-w-1200px.m-auto 
+	h1.text-2xl.font-bold Playground
+	.flex.w-full.justify-between.gap-2.mt-8
+		.p-2.flex.flex-col.gap-2
+			select.p-2(v-model="state.options.draw")
+				option(value="circles") Circles
+				option(value="squares") Squares
+				.text-lg Draw
+			label.flex.gap-2
+				input(type="checkbox" v-model="state.options.dark")
+				.text-lg Dark
+			label.flex.gap-2
+				input(type="checkbox" v-model="state.options.reflect")
+				.text-lg Reflect
+		.p-2
+			gun-vue-avatar.rounded-full(
+				:pub="state.pub"
+				v-bind="state.options"
+			)
+</template>

docs/.vitepress/composables/state.js

@@ -11,6 +11,12 @@ export const state = reactive({
 		epriv: "Tr9_a9sWJbo7EI0ARB5VeptIBALFuVNkSkrRAuP8vQc",
 	},
 	pub: computed(() => state.pair.pub),
+	options: {
+		size: 200,
+		reflect: true,
+		dark: false,
+		draw: 'circles'
+	},
 })
 
 state.history = useRefHistory(toRef(state, 'pair'))

docs/.vitepress/theme/Layout.vue

@@ -3,6 +3,7 @@ import DefaultTheme from 'vitepress/theme'
 import { computed, onMounted } from 'vue';
 import GunVueAvatar from '../components/gun-vue-avatar.vue';
 import HeaderLinks from '../components/header-links.vue'
+import AvatarPlayground from '../components/avatar-playground.vue'
 import { useState } from '../composables/state'
 
 const { Layout } = DefaultTheme
@@ -45,11 +46,13 @@ Layout
 				.flex(
 					v-for="rec in list"
 					:key="rec"
-				)
+					)
 					gun-vue-avatar.rounded-full(
 						:pub="rec.snapshot.pub"
 						:size="50"
 						) {{ rec.snapshot.pub }}
+	template(#home-features-after)
+		AvatarPlayground
 </template>
 
 <style scoped lang="postcss">