AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add calendar

Browse Source
This commit is contained in:
MuslemRahimi 2024-09-18 21:32:34 +02:00
parent d1c7b148fc
commit a8f4bfe44b
17 changed files with 383 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@ -18,6 +18,7 @@
"ua-parser-js": "^1.0.37"
},
"devDependencies": {
"@internationalized/date": "^3.5.5",
"@playwright/test": "^1.43.1",
"@rollup/plugin-dynamic-import-vars": "^2.1.2",
"@sveltejs/adapter-vercel": "^5.3.0",
@ -1744,10 +1745,11 @@
}
},
"node_modules/@internationalized/date": {
"version": "3.5.4",
"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.4.tgz",
"integrity": "sha512-qoVJVro+O0rBaw+8HPjUB1iH8Ihf8oziEnqMnvhJUSuVIrHOuZ6eNLHNvzXJKUvAtaDiqMnRlg8Z2mgh09BlUw==",
"version": "3.5.5",
"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.5.tgz",
"integrity": "sha512-H+CfYvOZ0LTJeeLOqm19E3uj/4YjrmOFtBufDHPfvtI80hFAMqtrp7oCACpe4Cil5l8S0Qu/9dYfZc/5lY8WQQ==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
"@swc/helpers": "^0.5.0"
}

1
package.json
View File

@ -18,6 +18,7 @@
"test:safari": "npx playwright test --headed --project=safari"
},
"devDependencies": {
"@internationalized/date": "^3.5.5",
"@playwright/test": "^1.43.1",
"@rollup/plugin-dynamic-import-vars": "^2.1.2",
"@sveltejs/adapter-vercel": "^5.3.0",

21
src/lib/components/shadcn/calendar/calendar-cell.svelte Normal file
View File

@ -0,0 +1,21 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = CalendarPrimitive.CellProps;
export let date: $$Props["date"];
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<CalendarPrimitive.Cell
{date}
class={cn(
"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
className
)}
{...$$restProps}
>
<slot />
</CalendarPrimitive.Cell>

42
src/lib/components/shadcn/calendar/calendar-day.svelte Normal file
View File

@ -0,0 +1,42 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { buttonVariants } from "$lib/components/shadcn/button/index.js";
import { cn } from "$lib/utils.js";
type $$Props = CalendarPrimitive.DayProps;
type $$Events = CalendarPrimitive.DayEvents;
export let date: $$Props["date"];
export let month: $$Props["month"];
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<CalendarPrimitive.Day
on:click
{date}
{month}
class={cn(
buttonVariants({ variant: "ghost" }),
"h-9 w-9 p-0 font-normal ",
"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
// Selected
"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
// Disabled
"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
// Unavailable
"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
// Outside months
"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
className
)}
{...$$restProps}
let:selected
let:disabled
let:unavailable
let:builder
>
<slot {selected} {disabled} {unavailable} {builder}>
{date.day}
</slot>
</CalendarPrimitive.Day>

13
src/lib/components/shadcn/calendar/calendar-grid-body.svelte Normal file
View File

@ -0,0 +1,13 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = CalendarPrimitive.GridBodyProps;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<CalendarPrimitive.GridBody class={cn(className)} {...$$restProps}>
<slot />
</CalendarPrimitive.GridBody>

13
src/lib/components/shadcn/calendar/calendar-grid-head.svelte Normal file
View File

@ -0,0 +1,13 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = CalendarPrimitive.GridHeadProps;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<CalendarPrimitive.GridHead class={cn(className)} {...$$restProps}>
<slot />
</CalendarPrimitive.GridHead>

13
src/lib/components/shadcn/calendar/calendar-grid-row.svelte Normal file
View File

@ -0,0 +1,13 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = CalendarPrimitive.GridRowProps;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<CalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
<slot />
</CalendarPrimitive.GridRow>

13
src/lib/components/shadcn/calendar/calendar-grid.svelte Normal file
View File

@ -0,0 +1,13 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = CalendarPrimitive.GridProps;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<CalendarPrimitive.Grid class={cn("w-full border-none space-y-1", className)} {...$$restProps}>
<slot />
</CalendarPrimitive.Grid>

16
src/lib/components/shadcn/calendar/calendar-head-cell.svelte Normal file
View File

@ -0,0 +1,16 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = CalendarPrimitive.HeadCellProps;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<CalendarPrimitive.HeadCell
class={cn("text-white w-9 rounded-md text-[0.8rem] font-normal", className)}
{...$$restProps}
>
<slot />
</CalendarPrimitive.HeadCell>

16
src/lib/components/shadcn/calendar/calendar-header.svelte Normal file
View File

@ -0,0 +1,16 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = CalendarPrimitive.HeaderProps;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<CalendarPrimitive.Header
class={cn("relative flex w-full items-center justify-between pt-1", className)}
{...$$restProps}
>
<slot />
</CalendarPrimitive.Header>

19
src/lib/components/shadcn/calendar/calendar-heading.svelte Normal file
View File

@ -0,0 +1,19 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = CalendarPrimitive.HeadingProps;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<CalendarPrimitive.Heading
let:headingValue
class={cn("text-sm font-medium", className)}
{...$$restProps}
>
<slot {headingValue}>
{headingValue}
</slot>
</CalendarPrimitive.Heading>

16
src/lib/components/shadcn/calendar/calendar-months.svelte Normal file
View File

@ -0,0 +1,16 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<div
class={cn("mt-4 text-white flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
{...$$restProps}
>
<slot />
</div>

27
src/lib/components/shadcn/calendar/calendar-next-button.svelte Normal file
View File

@ -0,0 +1,27 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import ChevronRight from "lucide-svelte/icons/chevron-right";
import { buttonVariants } from "$lib/components/shadcn/button/index.js";
import { cn } from "$lib/utils.js";
type $$Props = CalendarPrimitive.NextButtonProps;
type $$Events = CalendarPrimitive.NextButtonEvents;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<CalendarPrimitive.NextButton
on:click
class={cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100",
className
)}
{...$$restProps}
let:builder
>
<slot {builder}>
<ChevronRight class="h-4 w-4" />
</slot>
</CalendarPrimitive.NextButton>

27
src/lib/components/shadcn/calendar/calendar-prev-button.svelte Normal file
View File

@ -0,0 +1,27 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import ChevronLeft from "lucide-svelte/icons/chevron-left";
import { buttonVariants } from "$lib/components/shadcn/button/index.js";
import { cn } from "$lib/utils.js";
type $$Props = CalendarPrimitive.PrevButtonProps;
type $$Events = CalendarPrimitive.PrevButtonEvents;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<CalendarPrimitive.PrevButton
on:click
class={cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100",
className
)}
{...$$restProps}
let:builder
>
<slot {builder}>
<ChevronLeft class="h-4 w-4" />
</slot>
</CalendarPrimitive.PrevButton>

59
src/lib/components/shadcn/calendar/calendar.svelte Normal file
View File

@ -0,0 +1,59 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import * as Calendar from "./index.js";
import { cn } from "$lib/utils.js";
type $$Props = CalendarPrimitive.Props;
type $$Events = CalendarPrimitive.Events;
export let value: $$Props["value"] = undefined;
export let placeholder: $$Props["placeholder"] = undefined;
export let weekdayFormat: $$Props["weekdayFormat"] = "short";
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<CalendarPrimitive.Root
bind:value
bind:placeholder
{weekdayFormat}
class={cn("p-3", className)}
{...$$restProps}
on:keydown
let:months
let:weekdays
>
<Calendar.Header>
<Calendar.PrevButton />
<Calendar.Heading />
<Calendar.NextButton />
</Calendar.Header>
<Calendar.Months >
{#each months as month}
<Calendar.Grid>
<Calendar.GridHead >
<Calendar.GridRow class="flex">
{#each weekdays as weekday}
<Calendar.HeadCell class="text-white">
{weekday.slice(0, 2)}
</Calendar.HeadCell>
{/each}
</Calendar.GridRow>
</Calendar.GridHead>
<Calendar.GridBody>
{#each month.weeks as weekDates}
<Calendar.GridRow class="mt-2 w-full">
{#each weekDates as date}
<Calendar.Cell {date}>
<Calendar.Day {date} month={month.value} />
</Calendar.Cell>
{/each}
</Calendar.GridRow>
{/each}
</Calendar.GridBody>
</Calendar.Grid>
{/each}
</Calendar.Months>
</CalendarPrimitive.Root>

30
src/lib/components/shadcn/calendar/index.ts Normal file
View File

@ -0,0 +1,30 @@
import Root from "./calendar.svelte";
import Cell from "./calendar-cell.svelte";
import Day from "./calendar-day.svelte";
import Grid from "./calendar-grid.svelte";
import Header from "./calendar-header.svelte";
import Months from "./calendar-months.svelte";
import GridRow from "./calendar-grid-row.svelte";
import Heading from "./calendar-heading.svelte";
import GridBody from "./calendar-grid-body.svelte";
import GridHead from "./calendar-grid-head.svelte";
import HeadCell from "./calendar-head-cell.svelte";
import NextButton from "./calendar-next-button.svelte";
import PrevButton from "./calendar-prev-button.svelte";
export {
Day,
Cell,
Grid,
Header,
Months,
GridRow,
Heading,
GridBody,
GridHead,
HeadCell,
NextButton,
PrevButton,
//
Root as Calendar,
};

67
src/routes/options-flow/+page.svelte
View File

@ -3,11 +3,19 @@
import { screenWidth, numberOfUnreadNotification, etfTicker, stockTicker, isOpen } from '$lib/store';
import notifySound from '$lib/audio/options-flow-reader.mp3';
//import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import { abbreviateNumber } from '$lib/utils';
import { abbreviateNumber,cn } from '$lib/utils';
import { onMount, onDestroy } from 'svelte';
import toast from 'svelte-french-toast';
import {
DateFormatter,
type DateValue,
} from "@internationalized/date";
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
import * as Popover from "$lib/components/shadcn/popover/index.js";
import { Button } from "$lib/components/shadcn/button/index.js";
import { Calendar } from "$lib/components/shadcn/calendar/index.js";
import CalendarIcon from "lucide-svelte/icons/calendar";
import VirtualList from 'svelte-tiny-virtual-list';
import { writable } from 'svelte/store';
@ -34,6 +42,13 @@
let showFilters = true;
let filteredRows = [];
let shouldLoadWorker = writable(false);
const df = new DateFormatter("en-US", {
day: "2-digit",
month: "short",
year: "numeric"
});
let selectedDate: DateValue | undefined = undefined;
const allRules = {
volume: { label: 'Volume', step: ['100K','10K','1K'], defaultCondition: 'over', defaultValue: 'any' },
@ -737,7 +752,7 @@ $: {
<div class="rounded-lg border border-gray-700 bg-[#262626] p-2">
<div class="rounded-md border border-gray-700 bg-[#262626] p-2">
<div class="flex flex-col sm:flex-row items-center pt-3 sm:pt-1 pb-3 sm:border-b sm:border-gray-600">
<div class="flex flex-row items-center justify-center sm:justify-start">
<label data-tip="Audio Preference" on:click={() => muted = !muted} class="xl:tooltip xl:tooltip-bottom flex flex-col items-center mr-3 cursor-pointer">
@ -772,12 +787,32 @@ $: {
<div class="sm:ml-auto w-full sm:w-fit pt-5">
<div class="relative flex flex-col sm:flex-row items-center">
<div class="relative w-full sm:w-fit pl-3 py-2 sm:py-1.5 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-[#313131] rounded-lg border border-gray-600">
<Popover.Root>
<Popover.Trigger asChild let:builder>
<Button
class={cn(
"w-fit mr-3 py-2 bg-[#000] sm:hover:bg-[#000] sm:hover:text-white text-white justify-start text-left font-normal border-none rounded-md",
!selectedDate && "text-gray-300"
)}
builders={[builder]}
>
<CalendarIcon class="mr-2 h-4 w-4" />
{selectedDate ? df.format(selectedDate?.toDate()) : "Pick a date"}
</Button>
</Popover.Trigger>
<Popover.Content class="w-auto p-0 border-gray-500">
<Calendar class="bg-[#09090B] text-white" bind:value={selectedDate} initialFocus />
</Popover.Content>
</Popover.Root>
<div class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-[#313131] rounded-md border border-gray-600">
<label class="flex flex-row items-center ">
<input
id="modal-search"
type="search"
class="text-white sm:ml-2 text-[1rem] placeholder-gray-300 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1 bg-inherit"
class="text-white sm:ml-2 text-[1rem] placeholder-gray-300 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1.5 bg-inherit"
placeholder="Find by Symbol"
bind:value={filterQuery}
on:input={debouncedHandleInput}
@ -842,7 +877,7 @@ $: {
<div on:click={() => ruleName = row?.rule}>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} class="bg-[#000] h-[40px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 text-white rounded-lg truncate">
<Button builders={[builder]} class="bg-[#000] h-[40px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 text-white rounded-md truncate">
<span class="truncate ml-2 text-sm sm:text-[1rem]">
{#if valueMappings[row?.rule] === 'any'}
Any
@ -931,7 +966,7 @@ $: {
<!--Start Flow Sentiment-->
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
<div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Flow Sentiment</span>
<span class="text-start text-[1rem] font-semibold {flowSentiment === 'Bullish' ? 'text-[#00FC50]' : flowSentiment === 'Bearish' ? 'text-[#FC2120]' : flowSentiment === 'Neutral' ? 'text-[#FBCE3C]' : 'text-white'}">{flowSentiment}</span>
@ -940,7 +975,7 @@ $: {
</div>
<!--End Flow Sentiment-->
<!--Start Put/Call-->
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
<div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Put/Call</span>
<span class="text-start text-[1rem] font-semibold text-white">
@ -967,7 +1002,7 @@ $: {
</div>
<!--End Put/Call-->
<!--Start Call Flow-->
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
<div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Call Flow</span>
<span class="text-start text-[1rem] font-semibold text-white">
@ -996,7 +1031,7 @@ $: {
</div>
<!--End Call Flow-->
<!--Start Put Flow-->
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
<div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Put Flow</span>
<span class="text-start text-[1rem] font-semibold text-white">
@ -1027,7 +1062,7 @@ $: {
<!--
{#if showMore}
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
<div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Most Traded Option</span>
<span class="text-start text-[1rem] font-semibold text-white mt-0.5">
@ -1042,7 +1077,7 @@ $: {
</div>
</div>
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
<div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Highest Premium</span>
<span class="text-start text-[1rem] font-semibold text-white mt-0.5">
@ -1058,7 +1093,7 @@ $: {
</div>
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
<div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Highest Volume</span>
<span class="text-start text-[1rem] font-semibold text-white mt-0.5">
@ -1074,7 +1109,7 @@ $: {
</div>
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
<div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
<div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Highest Open Interest</span>
<span class="text-start text-[1rem] font-semibold text-white mt-0.5">
@ -1204,7 +1239,7 @@ $: {
</div>
</div>
{:else}
<div class="text-white text-center p-3 sm:p-5 mb-10 mt-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
<div class="text-white text-center p-3 sm:p-5 mb-10 mt-5 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
<svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
Looks like your taste is one-of-a-kind! No matches found... yet!
</div>
@ -1273,7 +1308,7 @@ $: {
autocomplete="off"
type="search"
id="search"
class="placeholder-gray-300 block w-full p-2 ps-10 text-sm text-gray-200 border border-gray-300 rounded-lg bg-[#404040] border border-blue-500"
class="placeholder-gray-300 block w-full p-2 ps-10 text-sm text-gray-200 border border-gray-300 rounded-md bg-[#404040] border border-blue-500"
placeholder="Search {allRows?.length} filters..."
bind:value={searchTerm}
/>
@ -1281,7 +1316,7 @@ $: {
</form>
<!-- End Search bar-->
<div class="text-white text-sm bg-[#141417] overflow-y-scroll pt-3 rounded-lg max-h-[500px] sm:max-h-[420px] md:max-h-[540px] lg:max-h-[600px]">
<div class="text-white text-sm bg-[#141417] overflow-y-scroll pt-3 rounded-md max-h-[500px] sm:max-h-[420px] md:max-h-[540px] lg:max-h-[600px]">
<div class="text-white relative">