ada/cpularp-manager-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Properly display and add items to database.

Browse source
This commit is contained in:
Ada Werefox 2025-04-25 15:40:04 -07:00
parent e596e31f15
commit edc93401db
15 changed files with 445 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
package-lock.json generated
View file

@ -10,6 +10,7 @@
"dependencies": {
"@tailwindcss/cli": "^4.1.4",
"@tailwindcss/vite": "^4.1.4",
"rustywind": "^0.24.0",
"tailwindcss": "^4.1.4",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
@ -2798,6 +2799,15 @@
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
}
},
"node_modules/agent-base": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
"integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==",
"license": "MIT",
"engines": {
"node": ">= 6.0.0"
}
},
"node_modules/ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@ -3083,7 +3093,6 @@
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
"integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
"dev": true,
"license": "MIT",
"dependencies": {
"ms": "^2.1.3"
@ -3844,6 +3853,19 @@
"dev": true,
"license": "MIT"
},
"node_modules/https-proxy-agent": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
"integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
"license": "MIT",
"dependencies": {
"agent-base": "5",
"debug": "4"
},
"engines": {
"node": ">= 6.0.0"
}
},
"node_modules/human-signals": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-8.0.1.tgz",
@ -4516,7 +4538,6 @@
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
"dev": true,
"license": "MIT"
},
"node_modules/muggle-string": {
@ -4947,6 +4968,12 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"license": "MIT"
},
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@ -5096,6 +5123,21 @@
"queue-microtask": "^1.2.2"
}
},
"node_modules/rustywind": {
"version": "0.24.0",
"resolved": "https://registry.npmjs.org/rustywind/-/rustywind-0.24.0.tgz",
"integrity": "sha512-NVOuXMO6WSuzZ1M+p2d3tGuSVY0XFJtjCHtK4G2L3tm+DDxfVUUR0RGhfQShoSKttYfc25cCbzhLUfQrlvfY8A==",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
"https-proxy-agent": "^4.0.0",
"proxy-from-env": "^1.1.0",
"user": "^0.0.0"
},
"bin": {
"rustywind": "bin/rustywind"
}
},
"node_modules/semver": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@ -5478,6 +5520,12 @@
"punycode": "^2.1.0"
}
},
"node_modules/user": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/user/-/user-0.0.0.tgz",
"integrity": "sha512-eRNM5isOvr6aEFAGi1CqAkmLkYxW2NJ5ThhbD+6IJXYKM1mo7Gtxx4mQIveHz/5K3p/SVnlW9k17ETn+QAu8IQ==",
"license": "MIT"
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

1
package.json
View file

@ -15,6 +15,7 @@
"dependencies": {
"@tailwindcss/cli": "^4.1.4",
"@tailwindcss/vite": "^4.1.4",
"rustywind": "^0.24.0",
"tailwindcss": "^4.1.4",
"vue": "^3.5.13",
"vue-router": "^4.5.0"

77
public/css/main.css
View file

@ -23,7 +23,6 @@
--text-3xl--line-height: calc(2.25 / 1.875);
--radius-sm: 0.25rem;
--drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
--color-primary: oklch(0.1 0 0);
@ -177,6 +176,9 @@
}
}
@layer utilities {
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
@ -207,12 +209,18 @@
.mx-auto {
margin-inline: auto;
}
.my-auto {
margin-block: auto;
}
.ml-2 {
margin-left: calc(var(--spacing) * 2);
}
.flex {
display: flex;
}
.h-fit {
height: fit-content;
}
.h-full {
height: 100%;
}
@ -225,6 +233,9 @@
.min-h-screen {
min-height: 100vh;
}
.w-fit {
width: fit-content;
}
.w-full {
width: 100%;
}
@ -260,6 +271,13 @@
margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}
}
.space-x-2 {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
}
}
.space-x-4 {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
@ -267,6 +285,13 @@
margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
}
}
.space-x-8 {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
}
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
@ -284,25 +309,28 @@
.border-accent {
border-color: var(--color-accent);
}
.bg-accent {
background-color: var(--color-accent);
}
.bg-black {
background-color: var(--color-black);
}
.bg-primary {
background-color: var(--color-primary);
}
.bg-primary\/50 {
background-color: color-mix(in srgb, oklch(0.1 0 0) 50%, transparent);
.bg-primary\/80 {
background-color: color-mix(in srgb, oklch(0.1 0 0) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
}
}
.bg-secondary {
background-color: var(--color-secondary);
}
.bg-white\/50 {
background-color: color-mix(in srgb, #fff 50%, transparent);
.bg-secondary\/50 {
background-color: color-mix(in srgb, oklch(0.85 0.1733 93.56) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
background-color: color-mix(in oklab, var(--color-secondary) 50%, transparent);
}
}
.bg-white\/75 {
@ -311,18 +339,6 @@
background-color: color-mix(in oklab, var(--color-white) 75%, transparent);
}
}
.bg-white\/80 {
background-color: color-mix(in srgb, #fff 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
}
}
.bg-white\/90 {
background-color: color-mix(in srgb, #fff 90%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
}
}
.mask-clip-border {
mask-clip: border-box;
}
@ -335,6 +351,9 @@
.text-center {
text-align: center;
}
.align-middle {
vertical-align: middle;
}
.font-mono {
font-family: var(--font-mono);
}
@ -346,6 +365,9 @@
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-nowrap {
text-wrap: nowrap;
}
.text-accent {
color: var(--color-accent);
}
@ -359,23 +381,30 @@
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-accent\/80 {
--tw-ring-color: color-mix(in srgb, oklch(0.6 0.1556 246.71) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--color-accent) 80%, transparent);
}
}
.ring-primary\/80 {
--tw-ring-color: color-mix(in srgb, oklch(0.1 0 0) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
}
}
.ring-secondary\/30 {
--tw-ring-color: color-mix(in srgb, oklch(0.85 0.1733 93.56) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--color-secondary) 30%, transparent);
}
}
.ring-secondary\/80 {
--tw-ring-color: color-mix(in srgb, oklch(0.85 0.1733 93.56) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-ring-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
}
}
.drop-shadow-lg {
--tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
--tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.drop-shadow-md {
--tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12)));
--tw-drop-shadow: drop-shadow(var(--drop-shadow-md));

59
src/components/AddFunction.vue Normal file
View file

@ -0,0 +1,59 @@
<script lang="ts" setup>
import { add_function } from '@/ts/functions.ts'
const function_name_input = defineModel('name')
const function_tags_input = defineModel('tags')
const function_requirements_input = defineModel('requirements')
</script>
<template>
<div class="flex flex-col w-full h-full p-4 space-y-4 bg-primary">
<div class="flex flex-row space-x-2">
<div
class="h-full my-auto text-lg align-middle text-accent drop-shadow-accent drop-shadow-md text-nowrap w-fit"
>
> Name:
</div>
<input
class="w-full h-full p-2 bg-white/75 text-primary"
v-model="function_name_input"
type="text"
/>
</div>
<div class="flex flex-row space-x-2">
<div
class="h-full my-auto text-lg align-middle text-accent drop-shadow-accent drop-shadow-md text-nowrap w-fit"
>
> Tags:
</div>
<input
class="w-full h-full p-2 bg-white/75 text-primary"
v-model="function_tags_input"
type="text"
/>
</div>
<div class="flex flex-row space-x-2">
<div
class="h-full my-auto text-lg align-middle text-accent drop-shadow-accent drop-shadow-md text-nowrap w-fit"
>
> Requirements:
</div>
<input
class="w-full h-full p-2 bg-white/75 text-primary"
v-model="function_requirements_input"
type="text"
/>
</div>
<div
class="w-full p-2 m-auto text-center drop-shadow-accent drop-shadow-md text-md hover:bg-white/20"
@click="
add_function(
String(function_name_input),
String(function_tags_input).split(' '),
String(function_requirements_input).split(' '),
)
"
>
> SUBMIT
</div>
</div>
</template>

27
src/components/AddFunctionTag.vue Normal file
View file

@ -0,0 +1,27 @@
<script lang="ts" setup>
import { add_function_tag } from '@/ts/function_tags.ts'
const function_tag_input = defineModel('name')
</script>
<template>
<div class="flex flex-col w-full h-full p-4 space-y-4 bg-primary">
<div class="flex flex-row space-x-2">
<div
class="h-full my-auto text-lg align-middle text-accent drop-shadow-accent drop-shadow-md text-nowrap w-fit"
>
> Name:
</div>
<input
class="w-full h-full p-2 bg-white/75 text-primary"
v-model="function_tag_input"
type="text"
/>
</div>
<div
class="w-full p-2 m-auto text-center drop-shadow-accent drop-shadow-md text-md hover:bg-white/20"
@click="add_function_tag(String(function_tag_input))"
>
> SUBMIT
</div>
</div>
</template>

16
src/components/AddGroup.vue
View file

@ -1,13 +1,21 @@
<script lang="ts" setup>
import { add_group } from '@/ts/groups.ts'
const group_input = defineModel('name')
</script>
<template>
<div class="p-4 bg-primary w-full h-full flex flex-col space-y-4">
<input class="p-2 w-full h-full bg-white/75 text-primary" v-model="group_input" type="text" />
<div class="flex flex-col w-full h-full p-4 space-y-4 bg-primary">
<div class="flex flex-row space-x-2">
<div
class="h-full my-auto text-lg align-middle text-accent drop-shadow-accent drop-shadow-md text-nowrap w-fit"
>
> Name:
</div>
<input class="w-full h-full p-2 bg-white/75 text-primary" v-model="group_input" type="text" />
</div>
<div
class="drop-shadow-accent drop-shadow-md p-2 m-auto text-md w-full text-center hover:bg-white/20"
@click="add_group(group_input)"
class="w-full p-2 m-auto text-center drop-shadow-accent drop-shadow-md text-md hover:bg-white/20"
@click="add_group(String(group_input))"
>
> SUBMIT
</div>

15
src/components/ListFunctionTags.vue Normal file
View file

@ -0,0 +1,15 @@
<script lang="ts" setup>
import { function_tags_store } from '@/ts/function_tags.ts'
</script>
<template>
<div class="flex flex-col space-y-2 text-md">
<div
class="w-full h-full p-2 bg-primary"
v-for="function_tag in function_tags_store.function_tags"
:key="function_tag"
>
<p class="drop-shadow-accent drop-shadow-md">> {{ function_tag }}</p>
</div>
</div>
</template>

35
src/components/ListFunctions.vue Normal file
View file

@ -0,0 +1,35 @@
<script lang="ts" setup>
import { functions_store } from '@/ts/functions.ts'
</script>
<template>
<div class="flex flex-col space-y-2 text-md">
<div
class="flex flex-col w-full h-full p-2 space-y-1 bg-primary"
v-for="function_obj in functions_store.functions"
:key="function_obj.name"
>
<p class="text-lg drop-shadow-accent drop-shadow-md">> {{ function_obj.name }}</p>
<div class="flex flex-row space-x-2 text-sm">
<p>> tags:</p>
<p
class="drop-shadow-accent drop-shadow-md"
v-for="tag_obj in function_obj.tags"
:key="tag_obj.name"
>
{{ tag_obj.name }}
</p>
</div>
<div class="flex flex-row space-x-2 text-sm">
<p>> requirements:</p>
<p
class="drop-shadow-accent drop-shadow-md"
v-for="requirement_obj in function_obj.requirements"
:key="requirement_obj.name"
>
{{ requirement_obj.name }}
</p>
</div>
</div>
</div>
</template>

6
src/components/ListGroups.vue
View file

@ -4,10 +4,8 @@ import { groups_store } from '@/ts/groups.ts'
<template>
<div class="flex flex-col space-y-2 text-md">
<div class="p-2 bg-primary w-full h-full" v-for="group in groups_store.groups" :key="group.name">
<p class="drop-shadow-accent drop-shadow-md">
> {{ group }}
</p>
<div class="w-full h-full p-2 bg-primary" v-for="group in groups_store.groups" :key="group">
<p class="drop-shadow-accent drop-shadow-md">> {{ group }}</p>
</div>
</div>
</template>

5
src/components/TheWelcome.vue
View file

@ -32,8 +32,9 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
recommended IDE setup is
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
+
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener">Vue - Official</a>. If
you need to test your components and web pages, check out
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
>Vue - Official</a
>. If you need to test your components and web pages, check out
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
and
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>

2
src/components/UserInfo.vue
View file

@ -7,7 +7,7 @@ import { user_store } from '@/ts/user_info'
<div class="flex flex-row w-full h-full p-4 space-x-4 rounded-sm">
<div class="md:min-w-fit md:min-h-fit md:max-w-fit md:max-h-fit max-w-32 max-h-32">
<img
class="fixed z-1 max-w-[96px] max-h-[96px] md:max-w-[128px] md:max-h-[128px]"
class="absolute z-1 max-w-[96px] max-h-[96px] md:max-w-[128px] md:max-h-[128px]"
:src="user_store.avatar_decoration"
/>
<img

47
src/ts/function_tags.ts Normal file
View file

@ -0,0 +1,47 @@
import { reactive } from 'vue'
export const function_tags_store = reactive({
function_tags: [],
})
export function update_function_tags() {
fetch('http://localhost:31337/get/function-tags', {
credentials: 'include',
})
.then((res) => {
res
.json()
.then((functiontagsjson) => {
function_tags_store.function_tags = functiontagsjson.function_tags
})
.catch(() => {})
})
.catch(() => {})
}
export function add_function_tag(function_tag_name: string) {
const post_url = new URL('http://localhost:31337/post/function-tag')
const search_params = new URLSearchParams()
search_params.append('name', function_tag_name)
post_url.search = search_params.toString()
fetch(post_url, {
credentials: 'include',
method: 'POST',
body: JSON.stringify({
name: function_tag_name,
}),
headers: {
'Content-Type': 'application/json',
},
})
.then((res) => {
if (res.status === 400) {
console.log('Function Tag submitted is invalid.')
} else if (res.status === 401) {
console.log("You aren't logged in.")
} else {
update_function_tags()
}
})
.catch(() => {})
}

79
src/ts/functions.ts Normal file
View file

@ -0,0 +1,79 @@
import { reactive, ref } from 'vue'
export const functions_store = reactive({
functions: ref(
[] as Array<{
name: string
tags: {
id: string
created_at: string
updated_at: string
deleted_at: string
name: string
}[]
requirements: {
id: string
created_at: string
updated_at: string
deleted_at: string
name: string
}[]
}>,
),
})
export function update_functions() {
fetch('http://localhost:31337/get/functions', {
credentials: 'include',
})
.then((res) => {
res
.json()
.then((functionsjson) => {
functions_store.functions = functionsjson.functions
})
.catch(() => {})
})
.catch(() => {})
}
export function add_function(
function_name: string,
function_tags: string[],
function_requirements: string[],
) {
const post_url = new URL('http://localhost:31337/post/function')
const search_params = new URLSearchParams()
search_params.append('name', function_name)
function_tags.forEach((tag) => {
search_params.append('tags', tag)
})
if (function_requirements.length > 0 && function_requirements[0] != 'undefined') {
function_requirements.forEach((requirement) => {
search_params.append('requirements', requirement)
})
}
post_url.search = search_params.toString()
fetch(post_url, {
credentials: 'include',
method: 'POST',
body: JSON.stringify({
name: function_name,
tags: function_tags,
requirements: function_requirements,
}),
headers: {
'Content-Type': 'application/json',
},
})
.then((res) => {
if (res.status === 400) {
console.log('Function submitted is invalid.')
} else if (res.status === 401) {
console.log("You aren't logged in.")
} else {
update_functions()
}
})
.catch(() => {})
}

4
src/ts/groups.ts
View file

@ -1,7 +1,7 @@
import { reactive } from 'vue'
import { reactive, ref } from 'vue'
export const groups_store = reactive({
groups: [],
groups: ref([]),
})
export function update_groups() {

65
src/views/UserDashboard.vue
View file

@ -1,13 +1,21 @@
<script lang="ts" setup>
import UserInfo from '@/components/UserInfo.vue'
import ListGroups from '@/components/ListGroups.vue'
import ListFunctions from '@/components/ListFunctions.vue'
import ListFunctionTags from '@/components/ListFunctionTags.vue'
import AddGroup from '@/components/AddGroup.vue'
import AddFunction from '@/components/AddFunction.vue'
import AddFunctionTag from '@/components/AddFunctionTag.vue'
import { onMounted } from 'vue'
import { update_info } from '@/ts/user_info'
import { update_groups } from '@/ts/groups'
import { update_functions } from '@/ts/functions'
import { update_function_tags } from '@/ts/function_tags'
onMounted(update_info)
onMounted(update_groups)
onMounted(update_functions)
onMounted(update_function_tags)
</script>
<template>
@ -19,20 +27,65 @@ onMounted(update_groups)
<div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
<div class="bg-primary ring-2 ring-primary/80">
<div
class="flex flex-col w-full h-full p-2 space-x-4 rounded-sm space-2 drop-shadow-md drop-shadow-accent"
class="flex flex-col w-full h-full p-2 rounded-sm drop-shadow-md drop-shadow-accent"
>
<h1 class="text-md md:text-xl">> USER AUTHENTICATED</h1>
<h1 class="text-lg md:text-2xl text-accent">> USER AUTHENTICATED</h1>
</div>
</div>
</div>
<div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
<UserInfo></UserInfo>
</div>
<div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
<ListGroups></ListGroups>
<div class="flex flex-col p-2 space-y-2 bg-secondary/50 ring-2 ring-secondary/30">
<div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
<div class="bg-primary ring-2 ring-primary/80">
<div
class="flex flex-col w-full h-full p-2 rounded-sm drop-shadow-md drop-shadow-accent"
>
<h2 class="text-lg md:text-2xl text-accent">> Groups</h2>
</div>
</div>
</div>
<div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
<ListGroups></ListGroups>
</div>
<div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
<AddGroup></AddGroup>
</div>
</div>
<div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
<AddGroup></AddGroup>
<div class="flex flex-col p-2 bg-secondary/50 ring-2 ring-secondary/30">
<div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
<div class="bg-primary ring-2 ring-primary/80">
<div
class="flex flex-col w-full h-full p-2 rounded-sm drop-shadow-md drop-shadow-accent"
>
<h2 class="text-lg md:text-2xl text-accent">> Functions</h2>
</div>
</div>
</div>
<div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
<ListFunctions></ListFunctions>
</div>
<div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
<AddFunction></AddFunction>
</div>
</div>
<div class="flex flex-col p-2 bg-secondary/50 ring-2 ring-secondary/30">
<div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
<div class="bg-primary ring-2 ring-primary/80">
<div
class="flex flex-col w-full h-full p-2 rounded-sm drop-shadow-md drop-shadow-accent"
>
<h2 class="text-lg md:text-2xl text-accent">> Function Tags</h2>
</div>
</div>
</div>
<div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
<ListFunctionTags></ListFunctionTags>
</div>
<div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
<AddFunctionTag></AddFunctionTag>
</div>
</div>
<a
class="flex w-full p-2 font-mono text-lg md:p-4 md:text-2xl bg-secondary ring-2 ring-secondary/80 h-fit0 hover:bg-secondary/50"