Elgato_dark/console
1
0
Fork 0
mirror of https://github.com/graphql-hive/console synced 2026-05-23 09:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

pricing operations in label (#6578)

Browse source
This commit is contained in:
Piotr Monwid-Olechnowicz 2025-03-05 13:25:36 +01:00 committed by GitHub
parent b7ec22e8e3
commit b8d2ec488d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
packages/web/docs/src/components/pricing/pricing-slider.tsx
View file

@ -1,4 +1,4 @@
import { useState } from 'react';
import { useRef, useState } from 'react';
import { Content, Root, Trigger } from '@radix-ui/react-tooltip';
import { CallToAction, cn } from '@theguild/components';
import { BookIcon } from '../book-icon';
@ -16,17 +16,36 @@ export function PricingSlider({
const max = 300;
const [popoverOpen, setPopoverOpen] = useState(false);
const rootRef = useRef<HTMLLabelElement>(null);
return (
<label
ref={rootRef}
className={cn(
'relative isolate block rounded-3xl border border-green-400 p-4 sm:p-8',
'relative isolate block select-none rounded-3xl border border-green-400 p-4 [counter-set:ops_calc(var(--ops))_price_calc(var(--price))] sm:p-8',
className,
)}
// 10$ base price + 10$ per 1M
style={{ '--ops': min, '--price': 'calc(10 + var(--ops) * 10)' }}
{...rest}
>
<div className="text-green-1000 items-center text-2xl font-medium md:flex md:h-12 md:w-[calc(100%-260px)]">
How many operations per month do you need?
<div className="relative max-w-[clamp(calc(60.95px+14.47px*round(down,log(max(var(--ops),1),10),1)),(2-var(--ops))*111px,111px)] shrink grow motion-safe:transition-all">
<div
aria-hidden
className="flex w-full whitespace-pre rounded-[40px] bg-blue-300 px-3 py-1 tabular-nums leading-8 opacity-[calc(var(--ops)-1)] [transition-duration:calc(clamp(0,var(--ops)-1,1)*350ms)] before:tracking-[-0.12em] before:content-[''_counter(ops)_'_'] motion-safe:transition-all"
>
M
</div>
<div className="absolute left-0 top-0 whitespace-pre leading-10 opacity-[calc(2-var(--ops))] [transition-duration:calc(clamp(0,2-var(--ops),1)*350ms)] motion-safe:transition">
How many
</div>
</div>
<div className="whitespace-pre"> operations per month </div>
<div className="whitespace-pre opacity-[calc(2-var(--ops))] [transition-duration:350ms] motion-safe:transition">
do you need?
</div>
<div className="grow-[1.5] ease-in motion-safe:transition-all" />
</div>
<div className="text-green-1000 flex items-center gap-5 pt-12 text-sm">
<span className="font-medium">{min}M</span>
@ -36,12 +55,10 @@ export function PricingSlider({
max={max}
step={1}
defaultValue={min}
// 10$ base price + 10$ per 1M
style={{ '--ops': min, '--price': 'calc(10 + var(--ops) * 10)' }}
counter="after:content-[''_counter(ops)_'M_ops,_$'_counter(price)_'_/_month'] after:[counter-set:ops_calc(var(--ops))_price_calc(var(--price))]"
counter="after:content-['$'_counter(price)_'_/_month']"
onChange={event => {
const value = event.currentTarget.valueAsNumber;
event.currentTarget.parentElement!.style.setProperty('--ops', `${value}`);
rootRef.current!.style.setProperty('--ops', `${value}`);
onChange(value);
}}
/>

5
packages/web/docs/src/components/slider.tsx
View file

@ -15,7 +15,10 @@ export function Slider({ counter, className, deadZone, style, ...rest }: SliderP
ref={ref => {
if (ref) polyfillSlider(ref, '--val');
}}
className={cn('hive-slider relative h-10 flex-1 [container-type:inline-size]', className)}
className={cn(
'hive-slider relative h-10 flex-1 select-none [container-type:inline-size]',
className,
)}
style={style}
>
<input