diff --git a/uniro_frontend/src/components/customButton.tsx b/uniro_frontend/src/components/customButton.tsx
new file mode 100644
index 0000000..3f00198
--- /dev/null
+++ b/uniro_frontend/src/components/customButton.tsx
@@ -0,0 +1,35 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+
+interface CustopmButtonProps extends ButtonHTMLAttributes
{
+ children: ReactNode;
+ variant?: "primary" | "secondary" | "disabled";
+}
+
+export default function Button({ children, variant = "primary", ...rest }: CustopmButtonProps) {
+ let buttonStyle: string;
+
+ switch (variant) {
+ case "primary":
+ buttonStyle = "cursor-pointer bg-primary-500 text-gray-100 active:bg-primary-600";
+ break;
+ case "secondary":
+ buttonStyle = "cursor-pointer bg-gray-100 text-primary-500 border border-gray-400 active:bg-gray-200";
+ break;
+ case "disabled":
+ buttonStyle = "bg-gray-300 text-gray-700";
+ break;
+ default:
+ buttonStyle = "cursor-pointer bg-primary-500 text-gray-100 active:bg-primary-600";
+ break;
+ }
+
+ return (
+
+ );
+}
diff --git a/uniro_frontend/src/components/customInput.tsx b/uniro_frontend/src/components/customInput.tsx
new file mode 100644
index 0000000..24c440c
--- /dev/null
+++ b/uniro_frontend/src/components/customInput.tsx
@@ -0,0 +1,60 @@
+import { ChangeEvent, InputHTMLAttributes, useCallback, useState } from "react";
+import Search from "../../public/icons/search.svg?react";
+import ChevronLeft from "../../public/icons/chevron-left.svg?react";
+import Mic from "../../public/icons/mic.svg?react";
+import Close from "../../public/icons/close-circle.svg?react";
+
+interface CustomInputProps extends InputHTMLAttributes {
+ onLengthChange: (e: string) => void;
+ placeholder: string;
+ handleVoiceInput: () => void;
+}
+
+export default function Input({ onLengthChange, placeholder, handleVoiceInput, ...rest }: CustomInputProps) {
+ const [isFocus, setIsFocus] = useState(false);
+ const [tempValue, setTempValue] = useState("");
+ const [currentValue, setCurrentValue] = useState("");
+
+ const onFoucs = () => setIsFocus(true);
+ const onBlur = () => setIsFocus(false);
+
+ const resetInput = () => {
+ setCurrentValue("");
+ setTempValue("");
+ };
+
+ const handleChange = (e: ChangeEvent) => {
+ const currentInput: string = e.target.value;
+ setTempValue(currentInput);
+ if (currentValue.length !== currentInput.length) {
+ setCurrentValue(currentInput);
+ onLengthChange(currentInput);
+ }
+ };
+
+ return (
+
+ {isFocus ? : }
+
+ {currentValue.length === 0 ? (
+
+ ) : (
+
+ )}
+
+ );
+}
diff --git a/uniro_frontend/src/components/landingButton.tsx b/uniro_frontend/src/components/landingButton.tsx
new file mode 100644
index 0000000..cf666be
--- /dev/null
+++ b/uniro_frontend/src/components/landingButton.tsx
@@ -0,0 +1,14 @@
+import { ButtonHTMLAttributes } from "react";
+import ChevronRight from "../../public/icons/chevron-right.svg?react";
+
+export default function LandingButton({ ...rest }: ButtonHTMLAttributes) {
+ return (
+
+ );
+}
diff --git a/uniro_frontend/src/hooks/useModal.tsx b/uniro_frontend/src/hooks/useModal.tsx
new file mode 100644
index 0000000..b48ce40
--- /dev/null
+++ b/uniro_frontend/src/hooks/useModal.tsx
@@ -0,0 +1,36 @@
+import React, { ReactNode, useCallback, useState } from "react";
+
+export default function useModal(): [React.FC<{ children: ReactNode }>, boolean, () => void, () => void] {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const open = useCallback(() => {
+ setIsOpen(true);
+ }, []);
+
+ const close = useCallback(() => {
+ setIsOpen(false);
+ }, []);
+
+ const Modal = useCallback(
+ ({ children }: { children: React.ReactNode }) => {
+ if (!isOpen) return null;
+
+ return (
+
+ );
+ },
+ [isOpen, close],
+ );
+
+ return [Modal, isOpen, open, close];
+}
diff --git a/uniro_frontend/src/index.css b/uniro_frontend/src/index.css
index 7a3abc8..742a9a4 100644
--- a/uniro_frontend/src/index.css
+++ b/uniro_frontend/src/index.css
@@ -1,10 +1,34 @@
@import "tailwindcss";
@font-face {
- font-family: "AppleSDGothicNeoB";
+ font-family: "AppleSDGothicNeo";
+ font-style: normal;
+ font-weight: 700;
+ src: url("/fonts/AppleSDGothicNeo/AppleSDGothicNeoB.woff") format("woff");
+ unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
+}
+
+@font-face {
+ font-family: "AppleSDGothicNeo";
+ font-style: normal;
+ font-weight: 500;
+ src: url("/fonts/AppleSDGothicNeo/AppleSDGothicNeoM.woff") format("woff");
+ unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
+}
+
+@font-face {
+ font-family: "AppleSDGothicNeo";
font-style: normal;
font-weight: 400;
- src: url("/fonts/AppleSDGothicNeoB/AppleSDGothicNeoB.woff") format("woff");
+ src: url("/fonts/AppleSDGothicNeo/AppleSDGothicNeoR.woff") format("woff");
+ unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
+}
+
+@font-face {
+ font-family: "AppleSDGothicNeo";
+ font-style: normal;
+ font-weight: 600;
+ src: url("/fonts/AppleSDGothicNeo/AppleSDGothicNeoSB.woff") format("woff");
unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
}
@@ -16,7 +40,8 @@
}
* {
- font-family: "SF Pro Display", "AppleSDGothicNeoB";
+ font-family: "SF Pro Display", "AppleSDGothicNeo";
+ outline: none;
}
@theme {
diff --git a/uniro_frontend/src/vite-env.d.ts b/uniro_frontend/src/vite-env.d.ts
index 11f02fe..b1f45c7 100644
--- a/uniro_frontend/src/vite-env.d.ts
+++ b/uniro_frontend/src/vite-env.d.ts
@@ -1 +1,2 @@
///
+///
diff --git a/uniro_frontend/vite.config.ts b/uniro_frontend/vite.config.ts
index af42d7b..0b4fe9d 100644
--- a/uniro_frontend/vite.config.ts
+++ b/uniro_frontend/vite.config.ts
@@ -1,8 +1,9 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
+import svgr from "vite-plugin-svgr";
// https://vite.dev/config/
export default defineConfig({
- plugins: [react(), tailwindcss()],
+ plugins: [react(), tailwindcss(), svgr()],
});