Skip to content

Commit

Permalink
[filigran-website] Fix build
Browse files Browse the repository at this point in the history
  • Loading branch information
@jpkha
jpkha committed Oct 11, 2024
1 parent 1466382 commit c2e3993
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 43 deletions.
10 changes: 8 additions & 2 deletions projects/filigran-website/components/colorBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@ interface ColorBoxProps {
colorValue: string
colorBackground: string
primary: boolean
selectedColor: ({colorBackground: string, colorValue: string}) => void
selectedColor: ({
colorBackground,
colorValue,
}: {
colorBackground: string
colorValue: string
}) => void
}
const ColorBox: React.FunctionComponent<ColorBoxProps> = ({
colorName,
Expand All @@ -17,7 +23,7 @@ const ColorBox: React.FunctionComponent<ColorBoxProps> = ({
selectedColor,
}) => {
const {toast} = useToast()
const onClick = (value) => {
const onClick = (value: string) => {
navigator.clipboard.writeText('#' + value)
toast({
title: 'Copied !',
Expand Down
42 changes: 25 additions & 17 deletions projects/filigran-website/components/example/color.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -610,10 +610,11 @@ export function Colors() {
<h1>Colors</h1>

<h2>Gray palette</h2>
<div className="flex gap-s">
<div className="gap-s flex">
{grayPalette.map((color) => {
return (
<ColorBox
key={color.colorName}
selectedColor={(color) => handleClick(color)}
colorName={color.colorName}
colorValue={color.colorValue}
Expand All @@ -627,10 +628,11 @@ export function Colors() {
<h2>Palettes</h2>
<div className="flex flex-row">
<div>
<div className="flex gap-s">
<div className="gap-s flex">
{darkbluePalette.map((color) => {
return (
<ColorBox
key={color.colorName}
selectedColor={(color) => handleClick(color)}
colorName={color.colorName}
colorValue={color.colorValue}
Expand All @@ -641,10 +643,11 @@ export function Colors() {
})}
</div>

<div className="flex gap-s">
<div className="gap-s flex">
{bluePalette.map((color) => {
return (
<ColorBox
key={color.colorName}
selectedColor={(color) => handleClick(color)}
colorName={color.colorName}
colorValue={color.colorValue}
Expand All @@ -655,10 +658,11 @@ export function Colors() {
})}
</div>

<div className="flex gap-s">
<div className="gap-s flex">
{turquoisePalette.map((color) => {
return (
<ColorBox
key={color.colorName}
selectedColor={(color) => handleClick(color)}
colorName={color.colorName}
colorValue={color.colorValue}
Expand All @@ -669,10 +673,11 @@ export function Colors() {
})}
</div>

<div className="flex gap-s">
<div className="gap-s flex">
{greenPalette.map((color) => {
return (
<ColorBox
key={color.colorName}
selectedColor={(color) => handleClick(color)}
colorName={color.colorName}
colorValue={color.colorValue}
Expand All @@ -683,10 +688,11 @@ export function Colors() {
})}
</div>

<div className="flex gap-s">
<div className="gap-s flex">
{redPalette.map((color) => {
return (
<ColorBox
key={color.colorName}
selectedColor={(color) => handleClick(color)}
colorName={color.colorName}
colorValue={color.colorValue}
Expand All @@ -697,10 +703,11 @@ export function Colors() {
})}
</div>

<div className="flex gap-s">
<div className="gap-s flex">
{orangePalette.map((color) => {
return (
<ColorBox
key={color.colorName}
selectedColor={(color) => handleClick(color)}
colorName={color.colorName}
colorValue={color.colorValue}
Expand All @@ -711,10 +718,11 @@ export function Colors() {
})}
</div>

<div className="flex gap-s">
<div className="gap-s flex">
{yellowPalette.map((color) => {
return (
<ColorBox
key={color.colorName}
selectedColor={(color) => handleClick(color)}
colorName={color.colorName}
colorValue={color.colorValue}
Expand All @@ -726,18 +734,18 @@ export function Colors() {
</div>

<h2>Some gradients</h2>
<div className="mb-10 flex gap-xl">
<div className="h-20 w-60 rounded bg-gradient-to-r from-darkblue-900 to-darkblue-600"></div>
<div className="h-20 w-60 rounded bg-gradient-to-r from-darkblue to-turquoise"></div>
<div className="gap-xl mb-10 flex">
<div className="from-darkblue-900 to-darkblue-600 h-20 w-60 rounded bg-gradient-to-r"></div>
<div className="from-darkblue to-turquoise h-20 w-60 rounded bg-gradient-to-r"></div>
</div>
<div className="mb-20 flex gap-xl">
<div className="h-20 w-60 rounded bg-gradient-to-r from-darkblue-900 via-darkblue-600 to-turquoise"></div>
<div className="h-20 w-60 rounded bg-gradient-to-r from-blue to-turquoise-300"></div>
<div className="gap-xl mb-20 flex">
<div className="from-darkblue-900 via-darkblue-600 to-turquoise h-20 w-60 rounded bg-gradient-to-r"></div>
<div className="from-blue to-turquoise-300 h-20 w-60 rounded bg-gradient-to-r"></div>
</div>
</div>

<div className="ml-xl flex flex-col gap-m">
<div className="flex flex-row items-center gap-m">
<div className="ml-xl gap-m flex flex-col">
<div className="gap-m flex flex-row items-center">
<div>
<Button
className=""
Expand All @@ -764,7 +772,7 @@ export function Colors() {
contrastRatio && (
<div className="ml-0 flex flex-col">
<div
className={`flex w-80 flex-col rounded border p-xl ${selectedColor1?.colorBackground}`}
className={`p-xl flex w-80 flex-col rounded border ${selectedColor1?.colorBackground}`}
style={{color: '#' + selectedColor2?.colorValue}}>
<div>Example text</div>
<div className="text-lg">Example text</div>
Expand Down
42 changes: 18 additions & 24 deletions projects/filigran-website/components/example/example-combobox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,37 +106,31 @@ export function ExampleCombobox() {
<strong>onValueChange</strong>
</td>
<td>
<em>() => void</em>
<em>{`() => void`}</em>
</td>
<td>-</td>
<td>
The triggered function when a value is choosen.
</td>
<td>The triggered function when a value is choosen.</td>
</tr>
<tr>
<td>
<strong>onInputChange</strong>
</td>
<td>
<em>() => void</em>
</td>
<td>-</td>
<td>
The triggered function when the input changes.
</td>
<td>
<strong>onInputChange</strong>
</td>
<td>
<em>{`() => void`}</em>
</td>
<td>-</td>
<td>The triggered function when the input changes.</td>
</tr>

<tr>
<td>
<strong>value</strong>
</td>
<td>
<em>string</em>
</td>
<td>-</td>
<td>
The selectedValue.
</td>
<td>
<strong>value</strong>
</td>
<td>
<em>string</em>
</td>
<td>-</td>
<td>The selectedValue.</td>
</tr>
</tbody>
</table>
Expand Down

0 comments on commit c2e3993

Please sign in to comment.