Add header tabs to virtual sample static component

src/components/project/virtual-sample/Static.vue

@@ -1 +1,78 @@
-<template>vue static</template>
+<template>
+	<header role="tablist" aria-labelledby="tablist">
+		<button
+			id="verre-brut-label"
+			type="button"
+			role="tab"
+			aria-selected="true"
+			aria-controls="verre-brut"
+			tabindex="-1"
+		>
+			<span class="label">Verre brut</span>
+		</button>
+		<button
+			id="verre-paracheve-label"
+			type="button"
+			role="tab"
+			aria-selected="false"
+			aria-controls="verre-paracheve"
+		>
+			<span class="label">Verre parachevé</span>
+		</button>
+	</header>
+	<div class="dialog__inner" id="verre-brut">
+		<!-- PdvViewer -->
+	</div>
+</template>
+
+<style scoped>
+.dialog__inner {
+	background-color: inherit;
+}
+[role="tablist"] {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 0 auto;
+  border-bottom: 1px solid var(--color-grey-700);
+  padding-top: 7px;
+}
+[role="tab"] {
+  --tab-h: 3rem;
+  --tab-min-w: none;
+  --tab-py: var(--space-8);
+  --tab-px: var(--space-12);
+  --tab-border-w: 1px;
+  --tab-color: var(--color-grey-400);
+  --tab-background: transparent;
+  --tab-border-color: transparent;
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: var(--text-md);
+  text-align: center;
+  background-color: transparent;
+  color: var(--tab-color);
+  padding: var(--tab-py) var(--tab-px);
+  margin: 0;
+  cursor: pointer;
+  gap: var(--space-4);
+  min-width: var(--tab-min-w);
+  height: var(--tab-h);
+  border-bottom: var(--tab-border-w) solid var(--tab-border-color);
+}
+[role="tab"][aria-selected="true"] {
+	--tab-border-color: var(--color-white);
+	--tab-color: var(--color-white);
+}
+[role="tab"]:focus-visible {
+  z-index: 20;
+}
+[role="tab"] .label {
+  flex-grow: 1;
+  font-weight: 500;
+  letter-spacing: .01em;
+  margin-top: -0.1em;
+}
+</style>