ui fix feedback
This commit is contained in:
MuslemRahimi
parent
5d29880469
commit
2108d3abfc
@ -5,20 +5,36 @@
|
|||||||
import badEmoji from "$lib/assets/badEmoji.svg";
|
import badEmoji from "$lib/assets/badEmoji.svg";
|
||||||
import veryBadEmoji from "$lib/assets/veryBadEmoji.svg";
|
import veryBadEmoji from "$lib/assets/veryBadEmoji.svg";
|
||||||
export let data;
|
export let data;
|
||||||
import * as Tabs from "$lib/components/shadcn/tabs/index.js";
|
|
||||||
|
|
||||||
import feedback_icon from "$lib/images/feedback_icon.png";
|
import feedback_icon from "$lib/images/feedback_icon.png";
|
||||||
|
|
||||||
let rating = "";
|
let rating = "";
|
||||||
let inputValue = "";
|
let inputValue = "";
|
||||||
let category = "general";
|
let category = "general";
|
||||||
/*
|
let activeIdx = 0;
|
||||||
async function handleReturn() {
|
|
||||||
rating = '';
|
|
||||||
inputValue = '';
|
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{
|
||||||
|
title: "General",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Feature",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Bug",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function handleMode(index) {
|
||||||
|
activeIdx = index;
|
||||||
|
if (activeIdx === 0) {
|
||||||
|
category = "general";
|
||||||
|
} else if (activeIdx === 1) {
|
||||||
|
category = "feature-request";
|
||||||
|
} else if (activeIdx === 2) {
|
||||||
|
category = "bug-report";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
|
|
||||||
async function sendFeedback() {
|
async function sendFeedback() {
|
||||||
if (inputValue?.length === 0) {
|
if (inputValue?.length === 0) {
|
||||||
@ -117,25 +133,32 @@
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Tabs.Root value="general" class="w-full mt-5 m-auto">
|
<div class="p-2">
|
||||||
<Tabs.List class="grid w-full grid-cols-3 bg-[#09090B]">
|
<div
|
||||||
<Tabs.Trigger
|
class="bg-[#313131] w-full min-w-24 sm:w-full relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
|
||||||
on:click={() => (category = "general")}
|
|
||||||
value="general"
|
|
||||||
class="text-sm">General</Tabs.Trigger
|
|
||||||
>
|
>
|
||||||
<Tabs.Trigger
|
{#each tabs as item, i}
|
||||||
on:click={() => (category = "feature-request")}
|
<button
|
||||||
value="feature-request"
|
on:click={() => handleMode(i)}
|
||||||
class="text-sm">Feature Request</Tabs.Trigger
|
class="group relative z-[1] rounded-full w-1/3 min-w-24 px-5 py-1 {activeIdx ===
|
||||||
|
i
|
||||||
|
? 'z-0'
|
||||||
|
: ''} "
|
||||||
>
|
>
|
||||||
<Tabs.Trigger
|
{#if activeIdx === i}
|
||||||
on:click={() => (category = "bug-report")}
|
<div class="absolute inset-0 rounded-md bg-[#fff]"></div>
|
||||||
value="bug-report"
|
{/if}
|
||||||
class="text-sm">Bug Report</Tabs.Trigger
|
<span
|
||||||
|
class="relative text-sm block font-semibold {activeIdx === i
|
||||||
|
? 'text-black'
|
||||||
|
: 'text-white'}"
|
||||||
>
|
>
|
||||||
</Tabs.List>
|
{item.title}
|
||||||
</Tabs.Root>
|
</span>
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="p-2 mt-5 w-full h-[200px] max-h-[1000px]">
|
<div class="p-2 mt-5 w-full h-[200px] max-h-[1000px]">
|
||||||
<textarea
|
<textarea
|
||||||
|
|||||||
@ -1,157 +0,0 @@
|
|||||||
<script lang 'ts'></script>
|
|
||||||
|
|
||||||
<section class="overflow-hidden text-white h-full pb-8 sm:pb-2">
|
|
||||||
<main class="overflow-hidden">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label
|
|
||||||
for="h1bVisaInfo"
|
|
||||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
|
|
||||||
>
|
|
||||||
Talent Acquisition
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"H1B Visa"}
|
|
||||||
content={"Add explanation"}
|
|
||||||
id={"h1bVisaInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if h1bVisaList?.length !== 0}
|
|
||||||
<div
|
|
||||||
class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-md bg-[#09090B] sm:bg-[#09090B]"
|
|
||||||
>
|
|
||||||
<div class="w-full flex flex-col items-start">
|
|
||||||
<div
|
|
||||||
class="text-white text-sm sm:text-[1rem] mt-1 sm:mt-3 mb-1 w-full"
|
|
||||||
>
|
|
||||||
Explore {$displayCompanyName} talent acquisition strategies for attracting
|
|
||||||
top global talent, securing exceptional employees worldwide through the
|
|
||||||
H1B Visa program, spanning sales to engineering roles.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href={"/stocks/" + $stockTicker + "/stats/employees"}
|
|
||||||
class="text-blue-400 hover:text-white flex justify-end mt-3 text-sm sm:text-[1rem]"
|
|
||||||
>
|
|
||||||
Full Report
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<Lazy
|
|
||||||
height={300}
|
|
||||||
fadeOption={{ delay: 100, duration: 500 }}
|
|
||||||
keep={true}
|
|
||||||
>
|
|
||||||
<div class="app w-full h-[300px]">
|
|
||||||
<Chart options={optionsData} class="chart" />
|
|
||||||
</div>
|
|
||||||
</Lazy>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-5/6"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="h-full bg-gray-800 transform -translate-x-1/2"
|
|
||||||
aria-hidden="true"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="w-3 h-3 bg-[#F8901E] border-4 box-content border-gray-900 rounded-full transform sm:-translate-x-1/2"
|
|
||||||
aria-hidden="true"
|
|
||||||
></div>
|
|
||||||
<span
|
|
||||||
class="mt-2 sm:mt-0 text-white text-sm sm:text-md inline-block"
|
|
||||||
>
|
|
||||||
Engineer
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-col sm:flex-row items-center w-1/2 justify-center"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="h-full bg-gray-800 transform -translate-x-1/2"
|
|
||||||
aria-hidden="true"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="w-3 h-3 bg-[#fff] border-4 box-content border-gray-900 rounded-full transform sm:-translate-x-1/2"
|
|
||||||
aria-hidden="true"
|
|
||||||
></div>
|
|
||||||
<span
|
|
||||||
class="mt-2 sm:mt-0 text-white text-sm sm:text-md sm:font-medium inline-block"
|
|
||||||
>
|
|
||||||
Sale
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="h-full bg-gray-800 transform -translate-x-1/2"
|
|
||||||
aria-hidden="true"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="w-3 h-3 bg-[#5470C6] border-4 box-content border-gray-900 rounded-full transform sm:-translate-x-1/2"
|
|
||||||
aria-hidden="true"
|
|
||||||
></div>
|
|
||||||
<span
|
|
||||||
class="mt-2 sm:mt-0 text-white text-sm sm:text-md inline-block"
|
|
||||||
>
|
|
||||||
Marketing
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="h-full bg-gray-800 transform -translate-x-1/2"
|
|
||||||
aria-hidden="true"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="w-3 h-3 bg-[#FF2F1F] border-4 box-content border-gray-900 rounded-full transform sm:-translate-x-1/2"
|
|
||||||
aria-hidden="true"
|
|
||||||
></div>
|
|
||||||
<span
|
|
||||||
class="mt-2 sm:mt-0 text-white text-sm sm:text-md inline-block"
|
|
||||||
>
|
|
||||||
Manager
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<h2
|
|
||||||
class="mt-10 mb-5 flex justify-center items-center text-3xl font-bold text-slate-700 m-auto"
|
|
||||||
>
|
|
||||||
No data available
|
|
||||||
<svg
|
|
||||||
class="w-10 sm:w-12 inline-block"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path
|
|
||||||
fill="#334155"
|
|
||||||
d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</h2>
|
|
||||||
{/if}
|
|
||||||
</main>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.app {
|
|
||||||
height: 300px;
|
|
||||||
max-width: 100%; /* Ensure chart width doesn't exceed the container */
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.app {
|
|
||||||
height: 230px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
<script lang='ts'>
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
|
|
||||||
let chart;
|
|
||||||
|
|
||||||
const options = {
|
|
||||||
grid: {
|
|
||||||
show: false,
|
|
||||||
horizontal: {
|
|
||||||
show: false,
|
|
||||||
size: 1,
|
|
||||||
color: '#EDEDED',
|
|
||||||
style: 'dashed',
|
|
||||||
dashedValue: [2, 2]
|
|
||||||
},
|
|
||||||
vertical: {
|
|
||||||
show: false,
|
|
||||||
size: 1,
|
|
||||||
color: '#EDEDED',
|
|
||||||
style: 'dashed',
|
|
||||||
dashedValue: [2, 2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
const klinecharts = await import('klinecharts');
|
|
||||||
chart = klinecharts.init('k-line-chart', options);
|
|
||||||
chart.applyNewData(genData());
|
|
||||||
});
|
|
||||||
|
|
||||||
function genData(timestamp = new Date().getTime(), length = 800) {
|
|
||||||
let basePrice = 5000
|
|
||||||
timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000
|
|
||||||
const dataList = []
|
|
||||||
for (let i = 0; i < length; i++) {
|
|
||||||
const prices = []
|
|
||||||
for (let j = 0; j < 4; j++) {
|
|
||||||
prices.push(basePrice + Math.random() * 60 - 30)
|
|
||||||
}
|
|
||||||
prices.sort()
|
|
||||||
const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))
|
|
||||||
const high = +(prices[3].toFixed(2))
|
|
||||||
const low = +(prices[0].toFixed(2))
|
|
||||||
const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))
|
|
||||||
const volume = Math.round(Math.random() * 100) + 10
|
|
||||||
const turnover = (open + high + low + close) / 4 * volume
|
|
||||||
dataList.push({ timestamp, open, high, low, close, volume, turnover })
|
|
||||||
|
|
||||||
basePrice = close
|
|
||||||
timestamp += 60 * 1000
|
|
||||||
}
|
|
||||||
return dataList
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="k-line-chart" style="height:430px"/>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user