Merge branch 'development'

Author: wzrdx

package-lock.json

@@ -29,6 +29,8 @@
         "clsx": "^2.1.1",
         "connectkit": "^1.8.2",
         "date-fns": "^4.1.0",
+        "dexie": "^4.0.11",
+        "dexie-react-hooks": "^1.1.7",
         "framer-motion": "^12.16.0",
         "lodash": "^4.17.21",
         "react": "^18.2.0",

package.json

@@ -21,7 +21,7 @@ function Overview() {
     return (
         <div className="w-full flex-1">
             <div className="grid w-full grid-cols-3 gap-5">
-                <CardWithHeader icon={<RiMoneyDollarCircleLine />} title="Balance">
+                <CardWithHeader icon={<RiMoneyDollarCircleLine className="-m-[1px] text-[20px]" />} title="Balance">
                     <div className="col h-full w-full gap-4">
                         <ValueWithLabel label="Amount in wallet" value={fBI(usdcBalance, 6)} prefix="$USDC" />
 

src/components/account/Overview.tsx

@@ -0,0 +1,58 @@
+import { COLOR_TYPES } from '@data/colorTypes';
+import { SelectItem } from '@heroui/select';
+import Label from '@shared/Label';
+import StyledSelect from '@shared/StyledSelect';
+import { Controller, useFormContext } from 'react-hook-form';
+
+export default function ColorSelect() {
+    const { control } = useFormContext();
+
+    return (
+        <div className="col w-full gap-2">
+            <Label value="Color" />
+
+            <Controller
+                name="color"
+                control={control}
+                render={({ field, fieldState }) => (
+                    <StyledSelect
+                        items={COLOR_TYPES}
+                        selectedKeys={field.value ? [field.value] : []}
+                        onSelectionChange={(keys) => {
+                            const selectedKey = Array.from(keys)[0] as string;
+                            field.onChange(selectedKey);
+                        }}
+                        onBlur={field.onBlur}
+                        isInvalid={!!fieldState.error}
+                        errorMessage={fieldState.error?.message}
+                        placeholder="Select a color"
+                        renderValue={(items) => {
+                            return items.map((item) => (
+                                <ColorOption
+                                    key={item.key}
+                                    colorHex={String(item.key as string)}
+                                    colorName={String(item.textValue as string)}
+                                />
+                            ));
+                        }}
+                    >
+                        {COLOR_TYPES.map((color) => (
+                            <SelectItem key={color.hex} textValue={color.name}>
+                                <ColorOption colorHex={color.hex} colorName={color.name} />
+                            </SelectItem>
+                        ))}
+                    </StyledSelect>
+                )}
+            />
+        </div>
+    );
+}
+
+function ColorOption({ colorHex, colorName }: { colorHex: string; colorName: string }) {
+    return (
+        <div className="row gap-2 py-1">
+            <div className="mt-[1px] h-2.5 w-2.5 rounded-full" style={{ backgroundColor: colorHex }}></div>
+            <div className="font-medium">{colorName}</div>
+        </div>
+    );
+}

src/components/create-project/ColorSelect.tsx

@@ -0,0 +1,45 @@
+import { SlateCard } from '@shared/cards/SlateCard';
+import InputWithLabel from '@shared/InputWithLabel';
+import SubmitButton from '@shared/SubmitButton';
+import SupportFooter from '@shared/SupportFooter';
+import { RiBox3Line } from 'react-icons/ri';
+import ColorSelect from './ColorSelect';
+
+function ProjectForm() {
+    return (
+        <div className="col gap-12">
+            <div className="col items-center gap-8">
+                <div className="col items-center gap-4">
+                    <div className="flex">
+                        <div className="rounded-full bg-primary p-2.5 text-2xl text-white">
+                            <RiBox3Line />
+                        </div>
+                    </div>
+
+                    <div className="col gap-1.5 text-center">
+                        <div className="big-title">New Project</div>
+
+                        <div className="max-w-[260px] text-[15px] text-slate-500">
+                            Deploy a project with multiple jobs across the decentralized edge
+                        </div>
+                    </div>
+                </div>
+
+                <div className="col w-full gap-4">
+                    <SlateCard>
+                        <div className="col gap-4">
+                            <InputWithLabel name="name" label="Name" placeholder="Project" />
+                            <ColorSelect />
+                        </div>
+                    </SlateCard>
+                </div>
+
+                <SubmitButton label="Create Project" />
+            </div>
+
+            <SupportFooter />
+        </div>
+    );
+}
+
+export default ProjectForm;