[WIP] front api exchanges

frontend/src/components/CreateProduct/index.tsx

@@ -0,0 +1,72 @@
+import { Grid, NumberInput, Paper, Select, Stack, TextInput } from "@mantine/core";
+import { t } from "../../config/i18n";
+
+export type CreateProductProps = {
+    form: Record<string, any>;
+}
+
+export default function CreateProduct({form}: CreateProductProps) {
+    return (
+        <Stack>
+            <Grid>
+                <Grid.Col span={{ base: 12, md: 6, lg: 6 }}>
+                    <TextInput
+                        label={t("product name")}
+                        placeholder={t("product name")}
+                        radius="sm"
+                        withAsterisk
+                        {...form.getInputProps('name')}
+                    />
+                    <NumberInput
+                        label={t("product price")}
+                        placeholder={t("product price")}
+                        radius="sm"
+                        withAsterisk
+                        {...form.getInputProps('price')}
+                    />
+                    <TextInput
+                        label={t("product weight")}
+                        placeholder={t("product weight")}
+                        radius="sm"
+                        withAsterisk
+                        {...form.getInputProps('weight')}
+                    />
+                </Grid.Col>
+                <Grid.Col span={{ base: 12, md: 6, lg: 6 }}>
+                    <Select
+                        label={t("product type")}
+                        placeholder={t("product type")}
+                        radius="sm"
+                        data={[
+                            {value: "1", label: t("planned")}, 
+                            {value: "2", label: t("reccurent")}
+                        ]}
+                        defaultValue={"1"}
+                        clearable
+                        {...form.getInputProps('type')}
+                    />
+                    <NumberInput
+                        label={t("product price kg")}
+                        placeholder={t("product price kg")}
+                        radius="sm"
+                        withAsterisk
+                        {...form.getInputProps('pricekg')}
+                    />
+                     <Select
+                        label={t("product unit")}
+                        placeholder={t("product unit")}
+                        radius="sm"
+                        data={[
+                            {value: "1", label: t("grams")}, 
+                            {value: "2", label: t("kilo")},
+                            {value: "3", label: t("piece")}
+                        ]}
+                        defaultValue={"2"}
+                        clearable
+                        {...form.getInputProps('unit')}
+                    />
+                </Grid.Col>
+            </Grid>
+        </Stack>
+    );
+}