Skip to content

Commit

Permalink
Add more inputs
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdedreuille
cdedreuille committed May 17, 2024
1 parent 6269a4b commit 0a45c54
Show file tree
Hide file tree
Showing 8 changed files with 251 additions and 91 deletions.
5 changes: 2 additions & 3 deletions apps/frontpage/components/home/hero/manager/canvas.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import type { FC } from 'react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import { cn } from '@repo/utils';
import timeframe1 from './timeframe-1.svg';
import { Component } from './component';

export const Canvas: FC<{ slide: number }> = ({ slide }) => {
return (
Expand All @@ -15,7 +14,7 @@ export const Canvas: FC<{ slide: number }> = ({ slide }) => {
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
>
<Image alt="TimeFrame" priority src={timeframe1} />
<Component />
</motion.div>
);
};
57 changes: 57 additions & 0 deletions apps/frontpage/components/home/hero/manager/component.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import Image from 'next/image';

export const Component = () => {
// Create an array of dots with x and y coordinates with random positions between 0 and 120 in width and 0 and 48 in height
const dots = Array.from({ length: 140 }, (_, i) => ({
index: i,
x: Math.floor(Math.random() * 120),
y: Math.floor(Math.random() * 48),
opacity: Math.random() - 0.2,
}));

return (
<div className="relative">
<div className="h-16 bg-[#222448] rounded-full flex items-center justify-between pl-6 pr-2 gap-6 w-[520px] relative z-10">
<div className="flex items-center flex-shrink-0 gap-3 text-lg font-medium text-white/40">
<svg
fill="none"
height={24}
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 11a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm0 0a6 6 0 1 1-12 0 4 4 0 0 1 8 0 2 2 0 0 1-4 0m10 10-4.3-4.3"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
An app for a candy shop
</div>
<div className="relative flex items-center justify-center w-32 h-12 overflow-hidden font-medium text-white border rounded-full text-md bg-white/20 border-white/10">
Generate
{dots.map((dot) => (
<div
className="absolute w-px h-px bg-white rounded-full"
key={dot.index}
style={{
top: `${dot.y}px`,
left: `${dot.x}px`,
opacity: dot.opacity,
}}
/>
))}
</div>
</div>
<Image
alt="Shadows"
className="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
height={140}
src="/home/shadows.png"
width={560}
/>
</div>
);
};
11 changes: 5 additions & 6 deletions apps/frontpage/components/home/hero/manager/doc.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,8 @@ import {
ZoomOutIcon,
ZoomResetIcon,
} from '@storybook/icons';
import Image from 'next/image';
import timeframe1 from './timeframe-1.svg';
import { Controls } from './controls';
import { Component } from './component';

export const Doc: FC = () => {
return (
Expand All @@ -23,12 +22,12 @@ export const Doc: FC = () => {
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
>
<div className="text-3xl font-bold mb-4 md:mb-6">TimeFrame</div>
<div className="mb-4 text-3xl font-bold md:mb-6">TimeFrame</div>
<div className="mb-8 sm:hidden">
TimeFrame is a component that allows you to select a range of data
points from a time period.
</div>
<div className="mb-8 hidden sm:block">
<div className="hidden mb-8 sm:block">
TimeFrame is a component that allows you to select a range of data
points from a time period. It combines a time chart visualization and
slider. TimeFrames are often used in tandem with a form or as a facet in
Expand Down Expand Up @@ -67,8 +66,8 @@ export const Doc: FC = () => {
<ShareAltIcon />
</ToolbarButton>
</div>
<div className="flex w-full justify-center py-4 sm:py-8 px-4">
<Image alt="TimeFrame" priority src={timeframe1} />
<div className="flex justify-center w-full px-4 py-4 sm:py-16">
<Component />
</div>
</div>
<div>
Expand Down
2 changes: 1 addition & 1 deletion apps/frontpage/components/home/hero/manager/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { PanelVisualTesting } from './panel-visual-testing';
export const Manager: FC<{ slide: number }> = ({ slide }) => {
return (
<div
className="flex h-[620px] sm:h-[820px] rounded-b-md overflow-hidden"
className="flex h-[620px] sm:h-[720px] rounded-b-md overflow-hidden"
role="presentation"
>
<Sidebar slide={slide} />
Expand Down
192 changes: 135 additions & 57 deletions apps/frontpage/components/home/hero/manager/panel-controls.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,9 @@
import type { FC } from 'react';
import type { FC, ReactNode } from 'react';
import { motion } from 'framer-motion';
import { UndoIcon } from '@storybook/icons';
import { cn } from '@repo/utils';
import { Tabs } from './tabs';

const content = [
{
label: 'label',
description: 'Label of component',
default: 'Choose time frame',
control: 'Usage frequency',
},
{
label: 'startTime',
description: 'Start time in 24h notation',
default: 'undefined',
control: 'Edit string',
muted: true,
},
{
label: 'endTime',
description: 'End time in 24h notation',
default: 'undefined',
control: 'Edit string',
muted: true,
},
];

export const PanelControls: FC = () => {
return (
<motion.div
Expand All @@ -37,46 +14,147 @@ export const PanelControls: FC = () => {
>
<Tabs active={0} />
<div className="flex h-10 items-center border-b border-b-[#D9E0E6]">
<div className="text-[13px] w-1/2 md:w-24 flex-shrink-0 pl-4">Name</div>
<div className="text-[13px] w-[25%] md:w-full hidden lg:block">
Default
<div className="text-[13px] w-1/2 md:w-1/2 flex-shrink-0 pl-4">
Name
</div>
<div className="text-[13px] w-1/2 md:w-full flex justify-between items-center pr-4 ">
<div className="text-[13px] w-1/2 md:w-1/2 flex justify-between items-center pr-4 ">
<div>Controls</div>
<UndoIcon className="text-[#73828C]" />
</div>
</div>
<div>
<div
className={cn(
'bg-[#F7F9FC] h-10 items-center px-4 text-[11px] tracking-widest uppercase font-bold text-[#2E3438] border-b border-b-[#D9E0E6] hidden sm:flex',
)}
>
Props
</div>
{content.map((item) => (
<div className="flex border-b border-b-[#D9E0E6]" key={item.label}>
<div className="text-[13px] w-1/2 md:w-24 pl-4 py-2 flex-shrink-0">
{item.label}
</div>
<div className="text-[13px] w-[25%] md:w-full hidden lg:flex py-2">
<div className="bg-[#F6F9FC] border border-[#D9E0E6] h-5 px-1.5 rounded flex items-center">
{item.default}
</div>
</div>
<div className="text-[13px] w-1/2 md:w-full flex py-2 pr-4">
<div
className={cn(
'border border-[#D9E0E6] rounded w-full h-7 flex items-center px-2',
item.muted && 'text-[#73828C]',
)}
>
{item.control}
</div>
</div>
</div>
))}
<Line
control={<Input value="Generate" />}
label="buttonLabel"
required
/>
<Line
control={<Input value="What should I make?" />}
label="placeholder"
required
/>
<Line control={<Boolean value />} label="disabled" />
<Line control={<Color value="#FFD000" />} label="primaryColor" />
<Line control={<Range value={0.6} />} label="playfulness" />
</div>
</motion.div>
);
};

const Line = ({
label,
control,
required = false,
}: {
label: ReactNode;
control: ReactNode;
required?: boolean;
}) => {
return (
<div className="flex border-b border-b-[#D9E0E6] py-3">
<div className="text-[13px] w-1/2 md:w-1/2 pl-4 flex-shrink-0 flex items-center">
{label}
{required ? <span className="text-red-500">*</span> : null}
</div>
<div className="text-[13px] w-1/2 md:w-1/2 flex pr-4">{control}</div>
</div>
);
};

const Input = ({
value,
muted = false,
}: {
value: string;
muted?: boolean;
}) => {
return (
<div
className={cn(
'border border-[#D9E0E6] rounded w-full h-7 flex items-center px-2',
muted && 'text-[#73828C]',
)}
>
{value}
</div>
);
};

const Boolean = ({ value }: { value: boolean }) => {
return (
<div className="relative flex items-center h-8 px-0.5 rounded-full bg-slate-200">
<div className="relative z-10 flex items-center justify-center h-full w-14">
False
</div>
<div className="relative z-10 flex items-center justify-center h-full w-14">
True
</div>
<div
className={cn(
'absolute bg-white rounded-full w-14 h-7',
value && 'left-[58px]',
!value && 'left-0',
)}
/>
</div>
);
};

const Color = ({
value,
muted = false,
}: {
value: string;
muted?: boolean;
}) => {
return (
<div
className={cn(
'border border-[#D9E0E6] rounded w-full h-7 flex items-center px-2 justify-between',
muted && 'text-[#73828C]',
)}
>
<div className="flex items-center gap-2">
<div
className="w-4 h-4 rounded border border-[#D9E0E6]"
style={{ backgroundColor: value }}
/>
{value}
</div>
<svg
fill="none"
height="12"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#a)" fill="#73828C">
<path d="M7.7 1.399a.429.429 0 0 0-.828-.226l-2.571 9.429a.429.429 0 0 0 .827.225L7.699 1.4ZM2.846 3.1a.429.429 0 0 1 .055.603L.986 6l1.915 2.297a.429.429 0 0 1-.659.549L.1 6.274a.429.429 0 0 1 0-.548l2.143-2.572a.429.429 0 0 1 .604-.055ZM9.154 3.1a.429.429 0 0 0-.055.603L11.014 6 9.099 8.297a.429.429 0 0 0 .659.549L11.9 6.274a.429.429 0 0 0 0-.548L9.758 3.154a.429.429 0 0 0-.604-.055Z" />
</g>
<defs>
<clipPath id="a">
<path d="M0 0h12v12H0z" fill="#fff" />
</clipPath>
</defs>
</svg>
</div>
);
};

const Range = ({ value }: { value: number }) => {
return (
<div className={cn('w-full flex items-center gap-2')}>
<div>0</div>
<div className="relative flex items-center w-full h-1.5 px-2 bg-white border rounded border-slate-200">
<div
className="absolute z-20 w-4 h-4 -ml-2 bg-white border rounded-full shadow-md border-slate-200"
style={{ left: `${value * 100}%` }}
/>
<div
className="absolute left-0 z-10 h-full bg-green-500 rounded-full"
style={{ width: `${value * 100}%` }}
/>
</div>
<div>100</div>
</div>
);
};
Loading

0 comments on commit 0a45c54

Please sign in to comment.