Skip to content

Commit 3d771ed

Browse files
mechelonmechelon
committed
UI
1 parent 76250d3 commit 3d771ed

39 files changed

+953
-41
lines changed

‎resources/js/internal-dashboard/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + Vue + TS</title>
7+
<title>Expose Dashboard</title>
88
</head>
99
<body>
1010
<div id="app"></div>

‎resources/js/internal-dashboard/package-lock.json

Lines changed: 100 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/internal-dashboard/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12+
"@vueuse/core": "^11.1.0",
1213
"class-variance-authority": "^0.7.0",
1314
"clsx": "^2.1.1",
1415
"lucide-vue-next": "^0.441.0",
@@ -18,6 +19,8 @@
1819
"vue": "^3.4.37"
1920
},
2021
"devDependencies": {
22+
"@iconify-json/radix-icons": "^1.2.0",
23+
"@iconify/vue": "^4.1.2",
2124
"@types/node": "^22.5.5",
2225
"@vitejs/plugin-vue": "^5.1.2",
2326
"autoprefixer": "^10.4.20",

‎resources/js/internal-dashboard/src/InternalDashboard.vue

Lines changed: 74 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,84 @@
11
<script setup lang="ts">
2-
import { Button } from '@/components/ui/button'
3-
import { ref } from 'vue';
2+
import Header from '@/components/Header.vue'
3+
import ResponseBadge from '@/components/ui/ResponseBadge.vue'
4+
import { exampleRequests, exampleSubdomains } from './lib/devUtils';
5+
import { Card } from './components/ui/card';
6+
import {
7+
Table,
8+
TableBody,
9+
TableCell,
10+
TableHead,
11+
TableHeader,
12+
TableRow,
13+
} from '@/components/ui/table'
14+
import {
15+
Tooltip,
16+
TooltipContent,
17+
TooltipProvider,
18+
TooltipTrigger
19+
} from '@/components/ui/tooltip'
420
5-
const counter = ref(0 as number)
621
22+
const requests = exampleRequests() as ExposeRequest[]
23+
const subdomains = exampleSubdomains() as string[]
724
</script>
825

926
<template>
10-
<div>
11-
<Button @click="counter++">Hello there</Button>
27+
<div class="">
1228

13-
<div>
14-
{{ counter }}
29+
<Header :subdomains="subdomains" />
30+
31+
32+
<div class="flex items-start max-w-7xl mx-auto mt-8 space-x-8">
33+
<div class="">
34+
<Card>
35+
<!-- <Button>
36+
Clear
37+
</Button> -->
38+
<Table>
39+
<TableHeader>
40+
<TableRow>
41+
<TableHead></TableHead>
42+
<TableHead class="">
43+
URL
44+
</TableHead>
45+
<TableHead class="text-right">
46+
Duration
47+
</TableHead>
48+
</TableRow>
49+
</TableHeader>
50+
<TableBody>
51+
<TableRow v-for="request in requests" :key="request.id">
52+
<TableCell>
53+
<ResponseBadge :statusCode="request.response.status" />
54+
</TableCell>
55+
<TooltipProvider>
56+
<Tooltip>
57+
<TooltipTrigger>
58+
<TableCell class="font-medium max-w-[200px] truncate text-left">
59+
<span class="opacity-60">{{ request.request.method }}</span> <br />{{ request.request.uri }}
60+
</TableCell>
61+
</TooltipTrigger>
62+
<TooltipContent>
63+
{{ request.request.uri }}
64+
</TooltipContent>
65+
</Tooltip>
66+
</TooltipProvider>
67+
68+
69+
<TableCell>
70+
{{ request.duration }}ms
71+
</TableCell>
72+
</TableRow>
73+
</TableBody>
74+
</Table>
75+
</Card>
76+
</div>
77+
78+
<Card class="">
79+
{{ requests }}
80+
</Card>
1581
</div>
16-
</div>
1782

83+
</div>
1884
</template>

‎resources/js/internal-dashboard/src/components/Header.vue

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<script setup lang="ts">
2+
import { useColorMode } from '@vueuse/core'
3+
import Search from '@/components/ui/Search.vue'
4+
import { Icon } from '@iconify/vue'
5+
import { Button } from '@/components/ui/button'
6+
import { ref } from 'vue';
7+
import {
8+
Tooltip,
9+
TooltipContent,
10+
TooltipProvider,
11+
TooltipTrigger
12+
} from '@/components/ui/tooltip'
13+
14+
defineProps<{
15+
subdomains: string[]
16+
}>()
17+
18+
19+
const mode = useColorMode()
20+
21+
const followRequests = ref(true as boolean)
22+
23+
const toggleAppearance = () => {
24+
if (mode.value === 'light') {
25+
mode.value = 'dark'
26+
} else {
27+
mode.value = 'light'
28+
}
29+
}
30+
31+
const toggleFollowRequests = () => {
32+
followRequests.value = !followRequests.value
33+
}
34+
35+
36+
</script>
37+
38+
39+
<template>
40+
<div>
41+
<div class="max-w-7xl mx-auto px-4 py-6 flex items-center justify-between">
42+
<div>
43+
<a href="https://expose.dev" target="_blank" class="inline-flex items-center self-start">
44+
<img src="https://beyondco.de/apps/icons/expose.png" class="h-10">
45+
<p class="ml-4 text-2xl tracking-tight font-bold">Dashboard</p>
46+
</a>
47+
48+
<div class="text-sm mt-1">
49+
<a href="{{ subdomains[0] }}" class="font-medium">
50+
{{ subdomains[0].substring(subdomains[0].lastIndexOf("/") + 1) }}
51+
</a>
52+
<TooltipProvider>
53+
<Tooltip>
54+
<TooltipTrigger>
55+
<span v-if="subdomains.length > 1" class="opacity-50 ">
56+
&nbsp;and {{ subdomains.length - 1 }} more
57+
</span>
58+
</TooltipTrigger>
59+
<TooltipContent>
60+
<div class="font-medium">Waiting for requests on</div>
61+
<ul class="list-disc ml-4 space-y-1 mb-0.5 mt-1">
62+
<li v-for="subdomain in subdomains" :key="subdomain" :href="subdomain">
63+
<a href="{{ subdomain }}" class="">
64+
{{ subdomain.substring(subdomain.lastIndexOf("/") + 1) }}
65+
</a>
66+
</li>
67+
</ul>
68+
</TooltipContent>
69+
</Tooltip>
70+
</TooltipProvider>
71+
72+
73+
</div>
74+
</div>
75+
76+
<div class="flex items-center space-x-4">
77+
<Search />
78+
<TooltipProvider>
79+
<Tooltip>
80+
<TooltipTrigger>
81+
<Button @click="toggleFollowRequests" variant="outline"
82+
:class="{ 'border-pink-600 text-pink-600': followRequests }">
83+
<Icon icon="radix-icons:enter" class="h-[1.2rem] w-[1.2rem] " />
84+
<span class="sr-only">Toggle follow requests</span>
85+
</Button>
86+
</TooltipTrigger>
87+
<TooltipContent>
88+
<p>Follow Requests: {{ followRequests }}</p>
89+
</TooltipContent>
90+
</Tooltip>
91+
</TooltipProvider>
92+
93+
<TooltipProvider>
94+
<Tooltip>
95+
<TooltipTrigger>
96+
<Button @click="toggleAppearance" variant="outline">
97+
<Icon icon="radix-icons:moon"
98+
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
99+
<Icon icon="radix-icons:sun"
100+
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
101+
<span class="sr-only">Toggle Appearance</span>
102+
</Button>
103+
</TooltipTrigger>
104+
<TooltipContent>
105+
<p>Toggle Appearance</p>
106+
</TooltipContent>
107+
</Tooltip>
108+
</TooltipProvider>
109+
110+
</div>
111+
112+
</div>
113+
<div class="border-b"></div>
114+
</div>
115+
</template>

0 commit comments

Comments
 (0)