Skip to content

Commit db73a4f

Browse files
grv-saini-20grv-saini-20
committed
fix: format and lint
1 parent d73fa09 commit db73a4f

File tree

18 files changed

+541
-487
lines changed

18 files changed

+541
-487
lines changed

‎infrastructure/control-panel/src/app.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,5 +67,5 @@
6767
--color-danger-400: #ff7b77;
6868
--color-danger-500: #ff5255;
6969

70-
--color-green: #0FB340;
70+
--color-green: #0fb340;
7171
}

‎infrastructure/control-panel/src/lib/fragments/LiveDataFlow/LiveDataFlow.stories.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ export default {
1414
export const Default = {
1515
args: {
1616
events: [
17-
{ id: 1, from: "alice", to: "pictique" },
18-
{ id: 2, from: "pictique", to: "bob" }
17+
{ id: 1, from: 'alice', to: 'pictique' },
18+
{ id: 2, from: 'pictique', to: 'bob' }
1919
]
2020
}
21-
};
21+
};

‎infrastructure/control-panel/src/lib/fragments/LiveDataFlow/LiveDataFlow.svelte‎

Lines changed: 88 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,100 @@
11
<script lang="ts">
2-
import { Database01FreeIcons, PauseFreeIcons, PlayFreeIcons } from "@hugeicons/core-free-icons";
3-
import { HugeiconsIcon } from "@hugeicons/svelte";
2+
import { Database01FreeIcons, PauseFreeIcons, PlayFreeIcons } from '@hugeicons/core-free-icons';
3+
import { HugeiconsIcon } from '@hugeicons/svelte';
44
5-
interface IEvent {
6-
id: string,
7-
from: string,
8-
to: string,
9-
imageSrc?: string,
10-
vaultName?: string
11-
}
5+
interface IEvent {
6+
id: string;
7+
from: string;
8+
to: string;
9+
imageSrc?: string;
10+
vaultName?: string;
11+
}
1212
13-
interface IDataFlowProps {
14-
events: IEvent[];
15-
}
13+
interface IDataFlowProps {
14+
events: IEvent[];
15+
}
1616
17-
let {events}: IDataFlowProps = $props();
17+
let { events }: IDataFlowProps = $props();
1818
let isPaused = $state(false);
1919
</script>
2020

21-
<style>
22-
.dot{
23-
offset-path: rect(0px 100% 175px 0px round 0%);
24-
offset-distance: 0%;
25-
offset-rotate: auto;
26-
animation: move 10s linear infinite;
27-
animation-play-state: var(--dot-animation-state, running);
28-
}
29-
30-
@keyframes move {
31-
0% {
32-
offset-distance: 100%;
33-
opacity: 1;
34-
}
35-
50% {
36-
opacity: 1;
37-
}
38-
55% {
39-
opacity: 0.4;
40-
}
41-
60% {
42-
opacity: 0;
43-
}
44-
100% {
45-
offset-distance: 0%;
46-
opacity: 0;
47-
}
48-
}
21+
<article class="bg-gray flex h-[80vh] w-full flex-col items-center rounded-md px-16 py-6">
22+
<div class="mb-20.5 flex w-full items-center justify-between">
23+
<h4 class="text-xl">Live Monitoring</h4>
24+
<button
25+
onclick={() => (isPaused = !isPaused)}
26+
class="font-geist text-black-700 flex items-center gap-2 rounded-4xl border border-[#e5e5e5] bg-white px-4 py-3 text-base font-medium"
27+
>
28+
{#if isPaused}
29+
<HugeiconsIcon icon={PlayFreeIcons} size="24px" />
30+
{:else}
31+
<HugeiconsIcon icon={PauseFreeIcons} size="24px" />
32+
{/if}
33+
{isPaused ? 'Resume Live Feed' : 'Pause Live Feed'}
34+
</button>
35+
</div>
36+
<div class="relative z-10 flex w-full items-center justify-between">
37+
<!-- svelte-ignore element_invalid_self_closing_tag -->
38+
<div
39+
class="border-s-green border-b-green border-e-green absolute start-[50%] top-[55%] z-[-1] h-[175px] w-[88%] translate-x-[-50%] rounded-md border border-t-transparent bg-transparent"
40+
>
41+
<div
42+
class="dot bg-green absolute start-[-1px] top-0 h-2.5 w-2.5 rounded-full"
43+
style="--dot-animation-state: {isPaused ? 'paused' : 'running'}"
44+
/>
45+
</div>
4946

50-
</style>
47+
<div
48+
class="flex flex-col items-center justify-center gap-2 rounded-md border border-black/10 bg-white p-3"
49+
>
50+
<HugeiconsIcon icon={Database01FreeIcons} />
51+
<div class="text-sm font-semibold">{events[0].from}</div>
52+
<div class="text-xs text-gray-500">{events[0].vaultName}</div>
53+
</div>
5154

52-
<article class="w-full h-[80vh] px-16 py-6 flex flex-col items-center bg-gray rounded-md">
53-
<div class="w-full flex justify-between items-center mb-20.5">
54-
<h4 class="text-xl">Live Monitoring</h4>
55-
<button onclick={() => isPaused = !isPaused} class="px-4 py-3 flex items-center gap-2 text-base font-geist font-medium text-black-700 bg-white border border-[#e5e5e5] rounded-4xl">
56-
{#if isPaused}
57-
<HugeiconsIcon icon={PlayFreeIcons} size="24px"/>
58-
{:else}
59-
<HugeiconsIcon icon={PauseFreeIcons} size="24px"/>
60-
{/if}
61-
{isPaused ? 'Resume Live Feed' : 'Pause Live Feed'}
62-
</button>
63-
</div>
64-
<div class="relative w-full flex justify-between items-center z-10">
65-
<!-- svelte-ignore element_invalid_self_closing_tag -->
66-
<div class="w-[88%] h-[175px] absolute top-[55%] start-[50%] z-[-1] translate-x-[-50%] bg-transparent border border-t-transparent border-s-green border-b-green border-e-green rounded-md">
67-
<div class="dot absolute h-2.5 w-2.5 top-0 start-[-1px] bg-green rounded-full" style="--dot-animation-state: {isPaused ? 'paused' : 'running'}"/>
68-
</div>
55+
<div
56+
class="absolute start-[50%] top-[200px] translate-x-[-50%] rounded-md bg-white p-3 text-center shadow"
57+
>
58+
<img src="/" alt="Icon" />
59+
<div class="text-xs text-gray-700">{events[1].from}</div>
60+
</div>
6961

70-
<div class="flex flex-col items-center justify-center rounded-md gap-2 bg-white p-3 border border-black/10">
71-
<HugeiconsIcon icon={Database01FreeIcons}/>
72-
<div class="font-semibold text-sm">{events[0].from}</div>
73-
<div class="text-xs text-gray-500">{events[0].vaultName}</div>
74-
</div>
62+
<div
63+
class="border-green flex flex-col items-center justify-center gap-2 rounded-md border bg-white p-3"
64+
>
65+
<HugeiconsIcon icon={Database01FreeIcons} />
66+
<div class="text-sm font-semibold">{events[2].from}</div>
67+
<div class="text-xs text-gray-500">{events[2].vaultName}</div>
68+
</div>
69+
</div>
70+
</article>
7571

76-
<div class="bg-white p-3 rounded-md shadow absolute top-[200px] start-[50%] translate-x-[-50%] text-center">
77-
<img src="/" alt="Icon">
78-
<div class="text-xs text-gray-700">{events[1].from}</div>
79-
</div>
72+
<style>
73+
.dot {
74+
offset-path: rect(0px 100% 175px 0px round 0%);
75+
offset-distance: 0%;
76+
offset-rotate: auto;
77+
animation: move 10s linear infinite;
78+
animation-play-state: var(--dot-animation-state, running);
79+
}
8080
81-
<div class="flex flex-col items-center justify-center rounded-md gap-2 bg-white p-3 border border-green">
82-
<HugeiconsIcon icon={Database01FreeIcons}/>
83-
<div class="font-semibold text-sm">{events[2].from}</div>
84-
<div class="text-xs text-gray-500">{events[2].vaultName}</div>
85-
</div>
86-
</div>
87-
</article>
81+
@keyframes move {
82+
0% {
83+
offset-distance: 100%;
84+
opacity: 1;
85+
}
86+
50% {
87+
opacity: 1;
88+
}
89+
55% {
90+
opacity: 0.4;
91+
}
92+
60% {
93+
opacity: 0;
94+
}
95+
100% {
96+
offset-distance: 0%;
97+
opacity: 0;
98+
}
99+
}
100+
</style>

‎infrastructure/control-panel/src/lib/fragments/Logs/Logs.stories.ts‎

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,37 @@
1-
import type { ComponentProps } from "svelte";
2-
import Logs from "./Logs.svelte";
1+
import type { ComponentProps } from 'svelte';
2+
import Logs from './Logs.svelte';
33

44
export default {
5-
title: "UI/Logs",
6-
component: Logs,
7-
tags: ["autodocs"],
8-
render: (args: {
9-
Component: Logs;
10-
props: ComponentProps<typeof Logs>;
11-
}) => ({
12-
Component: Logs,
13-
props: args,
14-
}),
5+
title: 'UI/Logs',
6+
component: Logs,
7+
tags: ['autodocs'],
8+
render: (args: { Component: Logs; props: ComponentProps<typeof Logs> }) => ({
9+
Component: Logs,
10+
props: args
11+
})
1512
};
1613

1714
export const Default = {
18-
args: {
19-
events: [
20-
{
21-
timestamp: new Date(),
22-
action: "upload",
23-
message: "msg_123",
24-
to: "alice.vault.dev",
25-
},
26-
{
27-
timestamp: new Date(),
28-
action: "fetch",
29-
message: "msg_124",
30-
from: "bob.vault.dev",
31-
},
32-
{
33-
timestamp: new Date(),
34-
action: "webhook",
35-
to: "Alice",
36-
from: "Pic",
37-
},
38-
],
39-
},
15+
args: {
16+
events: [
17+
{
18+
timestamp: new Date(),
19+
action: 'upload',
20+
message: 'msg_123',
21+
to: 'alice.vault.dev'
22+
},
23+
{
24+
timestamp: new Date(),
25+
action: 'fetch',
26+
message: 'msg_124',
27+
from: 'bob.vault.dev'
28+
},
29+
{
30+
timestamp: new Date(),
31+
action: 'webhook',
32+
to: 'Alice',
33+
from: 'Pic'
34+
}
35+
]
36+
}
4037
};

0 commit comments

Comments
 (0)