{children}
+
-
- );
-}
-
-export default About;
diff --git a/front/src/components/pages/about/styles.module.scss b/front/src/components/pages/about/styles.module.scss
deleted file mode 100644
index 30dcbca..0000000
--- a/front/src/components/pages/about/styles.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.about {
- padding: 10px;
-}
diff --git a/front/src/components/pages/home-page/component.tsx b/front/src/components/pages/home-page/component.tsx
new file mode 100644
index 0000000..d1911b7
--- /dev/null
+++ b/front/src/components/pages/home-page/component.tsx
@@ -0,0 +1,41 @@
+import { Heading, Paragraph } from '@components/ui';
+import { WindmillForm } from '@components/ux';
+import { WindmillFormResponse } from '@components/ux/windmill-form';
+import React, { useState } from 'react';
+
+import styles from './styles.module.scss';
+
+export function HomePage() {
+ const [result, setResult] = useStateAbout Page
- -
+
+ );
+}
diff --git a/front/src/components/pages/home-page/index.ts b/front/src/components/pages/home-page/index.ts
new file mode 100644
index 0000000..e2c7c55
--- /dev/null
+++ b/front/src/components/pages/home-page/index.ts
@@ -0,0 +1 @@
+export { HomePage } from './component';
diff --git a/front/src/components/pages/home-page/styles.module.scss b/front/src/components/pages/home-page/styles.module.scss
new file mode 100644
index 0000000..16eb3b3
--- /dev/null
+++ b/front/src/components/pages/home-page/styles.module.scss
@@ -0,0 +1,41 @@
+.page {
+ display: grid;
+ padding: 20px;
+ gap: 20px;
+ grid-template:
+ '. form result .' auto
+ / auto minmax(0, 380px) minmax(0, 700px) auto;
+}
+
+.wrapperForm {
+ grid-area: form;
+}
+
+.result {
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ border-radius: 10px;
+ background-color: var(--clr-layer-200);
+ box-shadow: 0px 1px 2px var(--clr-shadow-100);
+ gap: 20px;
+ grid-area: result;
+}
+
+.image {
+ width: 100%;
+
+ img {
+ max-width: 100%;
+ border-radius: 10px;
+ }
+}
+
+@media (width <= 1000px) {
+ .page {
+ grid-template:
+ 'form' auto
+ 'result' auto
+ / 1fr;
+ }
+}
diff --git a/front/src/components/pages/home/index.tsx b/front/src/components/pages/home/index.tsx
deleted file mode 100644
index e9139ed..0000000
--- a/front/src/components/pages/home/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Button, PasswordTextField, TextField } from '@components/ui';
-import React from 'react';
-
-import styles from './styles.module.scss';
-
-function Home() {
- return (
-
+
+
+ Result
+ {result && (
+ <>
+ {error} }
+
+ {result.power.join(' ')}
+
+ {result.image && 
}
+
+
+ )}
+ {error &&
-
- );
-}
-
-export default Home;
diff --git a/front/src/components/pages/home/styles.module.scss b/front/src/components/pages/home/styles.module.scss
deleted file mode 100644
index 2428a07..0000000
--- a/front/src/components/pages/home/styles.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.home {
- padding: 10px;
- display: flex;
- gap: 10px;
- flex-direction: column;
-}
-
-.box {
- display: flex;
- gap: 10px;
- align-items: center
-}
diff --git a/front/src/components/pages/index.tsx b/front/src/components/pages/index.tsx
index 36bf7bb..1ae4201 100644
--- a/front/src/components/pages/index.tsx
+++ b/front/src/components/pages/index.tsx
@@ -1,4 +1 @@
-import About from './about';
-import Home from './home/index';
-
-export { About, Home };
+export { HomePage } from './home-page';
diff --git a/front/src/components/ui/animation/fade/component.tsx b/front/src/components/ui/animation/fade/component.tsx
new file mode 100644
index 0000000..708b0d1
--- /dev/null
+++ b/front/src/components/ui/animation/fade/component.tsx
@@ -0,0 +1,58 @@
+import clsx from 'clsx';
+import React, { ForwardedRef, forwardRef, useEffect, useState } from 'react';
+
+import styles from './styles.module.scss';
+import { FadeProps } from './types';
+
+export function FadeInner(
+ {
+ visible,
+ duration = 200,
+ className,
+ style,
+ ...props
+ }: Omit
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {waves}
+
+ );
+}
+
+export const Ripple = forwardRef(RippleInner);
diff --git a/front/src/components/ui/animation/ripple/index.tsx b/front/src/components/ui/animation/ripple/index.tsx
new file mode 100644
index 0000000..2a421c1
--- /dev/null
+++ b/front/src/components/ui/animation/ripple/index.tsx
@@ -0,0 +1 @@
+export { Ripple } from './component';
diff --git a/front/src/components/ui/animation/ripple/parts/ripple-wave/component.tsx b/front/src/components/ui/animation/ripple/parts/ripple-wave/component.tsx
new file mode 100644
index 0000000..1227520
--- /dev/null
+++ b/front/src/components/ui/animation/ripple/parts/ripple-wave/component.tsx
@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import React, { useEffect, useState } from 'react';
+
+import styles from './style.module.scss';
+import { RippleWaveProps } from './types';
+
+export function RippleWave({ style, onDone }: RippleWaveProps) {
+ const [isMouseUp, setIsMouseUp] = useState(false);
+ const [isAnimationEnd, setIsAnimationEnd] = useState(false);
+
+ useEffect(() => {
+ const mouseUpListener = () => setIsMouseUp(true);
+ document.addEventListener('mouseup', mouseUpListener, { once: true });
+ document.addEventListener('touchend', mouseUpListener, { once: true });
+ }, []);
+
+ const visible = !isMouseUp || !isAnimationEnd;
+
+ const className = clsx(
+ styles.wave,
+ visible ? styles.visible : styles.invisible,
+ );
+
+ const handleAnimationEnd = (event: React.AnimationEvent) => {
+ if (event.animationName === styles.fadein) {
+ setIsAnimationEnd(true);
+ } else {
+ onDone();
+ }
+ };
+
+ return (
+
+ );
+}
diff --git a/front/src/components/ui/animation/ripple/parts/ripple-wave/index.ts b/front/src/components/ui/animation/ripple/parts/ripple-wave/index.ts
new file mode 100644
index 0000000..74e0c72
--- /dev/null
+++ b/front/src/components/ui/animation/ripple/parts/ripple-wave/index.ts
@@ -0,0 +1 @@
+export { RippleWave } from './component';
diff --git a/front/src/components/ui/animation/ripple/parts/ripple-wave/style.module.scss b/front/src/components/ui/animation/ripple/parts/ripple-wave/style.module.scss
new file mode 100644
index 0000000..a9319f5
--- /dev/null
+++ b/front/src/components/ui/animation/ripple/parts/ripple-wave/style.module.scss
@@ -0,0 +1,33 @@
+.wave {
+ position: absolute;
+ border-radius: 100%;
+ background-color: var(--clr-ripple);
+}
+
+.visible {
+ animation: fadein 0.3s linear;
+}
+
+.invisible {
+ animation: fadeout 0.3s linear forwards;
+}
+
+@keyframes fadein {
+ from {
+ opacity: 0;
+ scale: 0;
+ }
+ to {
+ opacity: 1;
+ scale: 1;
+ }
+}
+
+@keyframes fadeout {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
diff --git a/front/src/components/ui/animation/ripple/parts/ripple-wave/types.ts b/front/src/components/ui/animation/ripple/parts/ripple-wave/types.ts
new file mode 100644
index 0000000..3588e4d
--- /dev/null
+++ b/front/src/components/ui/animation/ripple/parts/ripple-wave/types.ts
@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react';
+
+export type RippleWaveProps = {
+ style: CSSProperties;
+ onDone: () => void;
+};
diff --git a/front/src/components/ui/animation/ripple/styles.module.scss b/front/src/components/ui/animation/ripple/styles.module.scss
new file mode 100644
index 0000000..98abe03
--- /dev/null
+++ b/front/src/components/ui/animation/ripple/styles.module.scss
@@ -0,0 +1,7 @@
+.ripple {
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+}
diff --git a/front/src/components/ui/animation/ripple/types.ts b/front/src/components/ui/animation/ripple/types.ts
new file mode 100644
index 0000000..af8def9
--- /dev/null
+++ b/front/src/components/ui/animation/ripple/types.ts
@@ -0,0 +1 @@
+export type RippleProps = {} & React.ComponentProps<'div'>;
diff --git a/front/src/components/ui/animation/ripple/utils.ts b/front/src/components/ui/animation/ripple/utils.ts
new file mode 100644
index 0000000..55e9188
--- /dev/null
+++ b/front/src/components/ui/animation/ripple/utils.ts
@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+
+export const calcRippleWaveStyle = (
+ x: number,
+ y: number,
+ ripple: HTMLDivElement,
+): CSSProperties => {
+ const wrapperRect = ripple.getBoundingClientRect();
+ const diameter = Math.max(wrapperRect.width, wrapperRect.height);
+ const radius = diameter / 2;
+ const left = x - wrapperRect.left - radius;
+ const top = y - wrapperRect.top - radius;
+ return { left, top, width: diameter, height: diameter };
+};
diff --git a/front/src/components/ui/button/component.tsx b/front/src/components/ui/button/component.tsx
new file mode 100644
index 0000000..5344602
--- /dev/null
+++ b/front/src/components/ui/button/component.tsx
@@ -0,0 +1,42 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { Ripple } from '../animation';
+import { Comet } from '../comet';
+import { RawButton } from '../raw';
+import { COMET_VARIANT_MAP } from './constants';
+import styles from './styles.module.scss';
+import { ButtonProps } from './types.js';
+
+export function Button({
+ variant = 'primary',
+ scale = 'm',
+ pending = false,
+ className,
+ children,
+ disabled,
+ ...props
+}: ButtonProps) {
+ const classNames = clsx(
+ styles.button,
+ styles[variant],
+ styles[scale],
+ { [styles.pending]: pending },
+ className,
+ );
+ return (
+
+
+ )}
+ {children}
+
+
+ );
+}
+
+export const Calendar = forwardRef(CalendarInner);
diff --git a/front/src/components/ui/calendar/index.ts b/front/src/components/ui/calendar/index.ts
new file mode 100644
index 0000000..4da8001
--- /dev/null
+++ b/front/src/components/ui/calendar/index.ts
@@ -0,0 +1,2 @@
+export { Calendar } from './component';
+export { CalendarPreview } from './preview';
diff --git a/front/src/components/ui/calendar/parts/calendar-days/component.tsx b/front/src/components/ui/calendar/parts/calendar-days/component.tsx
new file mode 100644
index 0000000..da2bc54
--- /dev/null
+++ b/front/src/components/ui/calendar/parts/calendar-days/component.tsx
@@ -0,0 +1,81 @@
+import { IconButton } from '@components/ui/icon-button';
+import { RawButton } from '@components/ui/raw';
+import { Span } from '@components/ui/span';
+import ArrowDownIcon from '@public/images/svg/arrow-down.svg';
+import ArrowUpIcon from '@public/images/svg/arrow-up.svg';
+import clsx from 'clsx';
+import React, { useMemo } from 'react';
+
+import { DAYS_OF_THE_WEEK, MONTHS } from './constants';
+import styles from './styles.module.scss';
+import { CalendarDaysProps } from './types';
+import { getCalendarDays } from './utils';
+
+export function CalendarDays({
+ value,
+ onChange,
+ min,
+ max,
+ date,
+ onMonthChange,
+}: CalendarDaysProps) {
+ const today = useMemo(() => new Date(), []);
+
+ const days = useMemo(() => {
+ return getCalendarDays({
+ year: date.getFullYear(),
+ monthIndex: date.getMonth(),
+ today,
+ selectedDateStr: value,
+ min,
+ max,
+ });
+ }, [date, min, max]);
+
+ const handleChange = (newValue: string) => {
+ onChange?.(newValue);
+ };
+
+ return (
+
+
+
+ {MONTHS[date.getMonth()]} {date.getFullYear()}
+
+ onMonthChange(-1)}
+ >
+
+ onMonthChange(1)}
+ >
+
+
+
+ );
+}
diff --git a/front/src/components/ui/calendar/parts/calendar-days/constants.ts b/front/src/components/ui/calendar/parts/calendar-days/constants.ts
new file mode 100644
index 0000000..6e53f1a
--- /dev/null
+++ b/front/src/components/ui/calendar/parts/calendar-days/constants.ts
@@ -0,0 +1,24 @@
+export const DAYS_OF_THE_WEEK = [
+ 'Mon',
+ 'Tue',
+ 'Wed',
+ 'Thu',
+ 'Fri',
+ 'Sat',
+ 'Sun',
+];
+
+export const MONTHS = [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December',
+];
diff --git a/front/src/components/ui/calendar/parts/calendar-days/index.ts b/front/src/components/ui/calendar/parts/calendar-days/index.ts
new file mode 100644
index 0000000..637fb4a
--- /dev/null
+++ b/front/src/components/ui/calendar/parts/calendar-days/index.ts
@@ -0,0 +1,2 @@
+export { CalendarDays } from './component';
+export { type CalendarDaysProps } from './types';
diff --git a/front/src/components/ui/calendar/parts/calendar-days/styles.module.scss b/front/src/components/ui/calendar/parts/calendar-days/styles.module.scss
new file mode 100644
index 0000000..46dd70c
--- /dev/null
+++ b/front/src/components/ui/calendar/parts/calendar-days/styles.module.scss
@@ -0,0 +1,85 @@
+.header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ gap: 10px;
+}
+
+.title {
+ flex: 1;
+ padding-left: 5px;
+ font-size: 18px;
+ font-weight: 500;
+}
+
+.turnButton {
+ padding: 10px;
+}
+
+.daysGrid {
+ display: grid;
+ gap: 5px;
+ grid-template-columns: repeat(7, auto);
+}
+
+.dayOfTheWeek {
+ display: flex;
+ width: 36px;
+ height: 36px;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+}
+
+.day {
+ position: relative;
+ display: flex;
+ width: 36px;
+ height: 36px;
+ align-items: center;
+ justify-content: center;
+ border-radius: 10px;
+ color: var(--clr-text-100);
+ transition: all var(--td-100) ease-in-out;
+
+ &:not(:disabled) {
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--clr-layer-300-hover);
+ }
+ }
+
+ &:disabled {
+ color: var(--clr-text-100);
+ }
+}
+
+.currentMonthDay {
+ color: var(--clr-text-300);
+}
+
+.selectedDay {
+ background-color: var(--clr-primary);
+ box-shadow: 0px 2px 2px var(--clr-shadow-200);
+ color: var(--clr-on-primary);
+
+ &:hover {
+ background-color: var(--clr-primary-hover);
+ }
+
+ .todayIndicator {
+ background-color: var(--clr-on-primary);
+ }
+}
+
+.todayIndicator {
+ position: absolute;
+ bottom: 12%;
+ left: 50%;
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ background-color: var(--clr-text-300);
+ transform: translateX(-50%);
+}
diff --git a/front/src/components/ui/calendar/parts/calendar-days/types.ts b/front/src/components/ui/calendar/parts/calendar-days/types.ts
new file mode 100644
index 0000000..ccd3598
--- /dev/null
+++ b/front/src/components/ui/calendar/parts/calendar-days/types.ts
@@ -0,0 +1,26 @@
+export type CalendarDay = {
+ number: number;
+ isDisabled: boolean;
+ isSelected: boolean;
+ isToday: boolean;
+ string: string;
+ isCurrentMonth: boolean;
+};
+
+export type CalendarDaysProps = {
+ value?: string;
+ onChange?: (value: string) => void;
+ min: Date | null;
+ max: Date | null;
+ date: Date;
+ onMonthChange: (delta: number) => void;
+};
+
+export type GetCalendarDaysParams = {
+ year: number;
+ monthIndex: number;
+ today: Date;
+ selectedDateStr?: string;
+ min: Date | null;
+ max: Date | null;
+};
diff --git a/front/src/components/ui/calendar/parts/calendar-days/utils.ts b/front/src/components/ui/calendar/parts/calendar-days/utils.ts
new file mode 100644
index 0000000..7acda21
--- /dev/null
+++ b/front/src/components/ui/calendar/parts/calendar-days/utils.ts
@@ -0,0 +1,52 @@
+import { dateToInputString } from '@utils/date';
+
+import { CalendarDay, GetCalendarDaysParams } from './types';
+
+const addDays = (date: Date, days: number) => {
+ date.setDate(date.getDate() + days);
+};
+
+const daysAreEqual = (date1: Date, date2: Date) => {
+ return (
+ date1.getDate() === date2.getDate() &&
+ date1.getMonth() === date2.getMonth() &&
+ date1.getFullYear() === date2.getFullYear()
+ );
+};
+
+export const getCalendarDays = ({
+ year,
+ monthIndex,
+ today,
+ selectedDateStr,
+ min,
+ max,
+}: GetCalendarDaysParams) => {
+ const selectedDate = new Date(selectedDateStr);
+
+ const firstDayOfMonth = new Date(year, monthIndex, 1);
+ const daysFromPrevMonth = (firstDayOfMonth.getDay() || 7) - 1;
+
+ const date = new Date(year, monthIndex, 1);
+ addDays(date, -daysFromPrevMonth);
+ const days: CalendarDay[] = [];
+
+ for (let i = 0; i < 42; i += 1) {
+ const number = date.getDate();
+ const isDisabled = (min && date < min) || (max && date > max);
+ const isSelected = daysAreEqual(date, selectedDate);
+ const isToday = daysAreEqual(date, today);
+ const string = dateToInputString(date);
+ const isCurrentMonth = date.getMonth() === monthIndex;
+ days.push({
+ number,
+ isDisabled,
+ isSelected,
+ isToday,
+ string,
+ isCurrentMonth,
+ });
+ addDays(date, 1);
+ }
+ return days;
+};
diff --git a/front/src/components/ui/calendar/parts/index.ts b/front/src/components/ui/calendar/parts/index.ts
new file mode 100644
index 0000000..1b1adc3
--- /dev/null
+++ b/front/src/components/ui/calendar/parts/index.ts
@@ -0,0 +1 @@
+export * from './calendar-days';
diff --git a/front/src/components/ui/calendar/preview.tsx b/front/src/components/ui/calendar/preview.tsx
new file mode 100644
index 0000000..5ae9f9e
--- /dev/null
+++ b/front/src/components/ui/calendar/preview.tsx
@@ -0,0 +1,19 @@
+import { PreviewArticle } from '@components/ui/preview';
+import React, { useState } from 'react';
+
+import { Calendar } from './component';
+
+export function CalendarPreview() {
+ const [date, setDate] = useState
+ {DAYS_OF_THE_WEEK.map((day) => (
+
+ {day}
+
+ ))}
+ {days.map((day, index) => (
+ handleChange(day.string)}
+ >
+ {day.number}
+ {day.isToday && }
+
+ ))}
+
+
+
+ {label}
+
+ {items.map((item, index) => (
+ handleChange(index)}
+ scale={scale}
+ />
+ ))}
+
+ );
+}
diff --git a/front/src/components/ui/checkbox-group/index.ts b/front/src/components/ui/checkbox-group/index.ts
new file mode 100644
index 0000000..541f66b
--- /dev/null
+++ b/front/src/components/ui/checkbox-group/index.ts
@@ -0,0 +1,2 @@
+export { CheckboxGroup } from './component';
+export { CheckboxGroupPreview } from './preview';
diff --git a/front/src/components/ui/checkbox-group/preview.tsx b/front/src/components/ui/checkbox-group/preview.tsx
new file mode 100644
index 0000000..f55c4e9
--- /dev/null
+++ b/front/src/components/ui/checkbox-group/preview.tsx
@@ -0,0 +1,46 @@
+import { PreviewArticle } from '@components/ui/preview';
+import React, { useState } from 'react';
+
+import { CheckboxGroup } from './component';
+
+export function CheckboxGroupPreview() {
+ const [value1, setValue1] = useState
+
+
+
+ {rightNode}
+
+ }
+ />
+
+
+ }
+ />
+
+ );
+}
diff --git a/front/src/components/ui/date-input/index.ts b/front/src/components/ui/date-input/index.ts
new file mode 100644
index 0000000..051e901
--- /dev/null
+++ b/front/src/components/ui/date-input/index.ts
@@ -0,0 +1,3 @@
+export { DateInput } from './component';
+export { DateInputPreview } from './preview';
+export { type DateInputProps } from './types';
diff --git a/front/src/components/ui/date-input/preview.tsx b/front/src/components/ui/date-input/preview.tsx
new file mode 100644
index 0000000..8625198
--- /dev/null
+++ b/front/src/components/ui/date-input/preview.tsx
@@ -0,0 +1,33 @@
+import { PreviewArticle } from '@components/ui/preview';
+import React, { useState } from 'react';
+
+import { DateInput } from './component';
+
+export function DateInputPreview() {
+ const [date, setDate] = useState
+ {leftNode}
+
+ );
+}
+
+export const Input = forwardRef(InputInner);
diff --git a/front/src/components/ui/input/index.ts b/front/src/components/ui/input/index.ts
new file mode 100644
index 0000000..8c9920f
--- /dev/null
+++ b/front/src/components/ui/input/index.ts
@@ -0,0 +1,2 @@
+export { Input } from './component';
+export { type InputProps } from './types';
diff --git a/front/src/components/ui/input/index.tsx b/front/src/components/ui/input/index.tsx
deleted file mode 100644
index 96d60a6..0000000
--- a/front/src/components/ui/input/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import clsx from 'clsx';
-import React, { useState } from 'react';
-
-import RawInput from '../raw/raw-input';
-import styles from './styles.module.scss';
-import { InputProps } from './types';
-
-export default function Input({
- scale = 'm',
- wrapper = {},
- leftNode,
- rightNode,
- className,
- ...props
-}: InputProps) {
- const [focus, setFocus] = useState
- {leftNode}
-
- );
-}
diff --git a/front/src/components/ui/input/styles.module.scss b/front/src/components/ui/input/styles.module.scss
index 2817317..c4d2fc2 100644
--- a/front/src/components/ui/input/styles.module.scss
+++ b/front/src/components/ui/input/styles.module.scss
@@ -1,29 +1,54 @@
.wrapper {
display: flex;
align-items: center;
- border-radius: 5px;
- outline: solid 0px var(--clr-accent-o50);
- transition: all 0.1s ease-in-out;
- background-color: var(--clr-layer-200);
+ border: 1px solid var(--clr-border-200);
+ background-color: var(--clr-layer-300);
+ box-shadow: 0px 2px 2px var(--clr-shadow-100);
+ outline: solid 0px var(--clr-primary-o50);
+ transition: all var(--td-100) ease-in-out;
+
+ &:not(.wrapperFocus):hover {
+ background-color: var(--clr-layer-300-hover);
+ }
}
.wrapperFocus {
- outline-width: 2px;
+ z-index: 1;
+ border-color: var(--clr-primary);
+ background-color: var(--clr-layer-200);
+ outline-width: 3px;
}
.input {
- color: var(--clr-text-100);
+ width: 100%;
+ flex: 1;
+ color: var(--clr-text-300);
outline: none;
}
+.s {
+ border-radius: 8px;
+
+ .input {
+ padding: 9px;
+ font-size: 12px;
+ }
+}
+
.m {
- padding: 10px 20px;
- font-size: 16px;
- line-height: 16px;
+ border-radius: 10px;
+
+ .input {
+ padding: 13px;
+ font-size: 16px;
+ }
}
.l {
- padding: 12px 24px;
- font-size: 20px;
- line-height: 20px;
+ border-radius: 12px;
+
+ .input {
+ padding: 17px;
+ font-size: 20px;
+ }
}
diff --git a/front/src/components/ui/input/types.ts b/front/src/components/ui/input/types.ts
index 73d6415..4b88da0 100644
--- a/front/src/components/ui/input/types.ts
+++ b/front/src/components/ui/input/types.ts
@@ -1,8 +1,10 @@
-import { RawInputProps } from '../raw/raw-input/types';
+import { Scale } from '@components/ui/types';
+
+import { RawInputProps } from '../raw';
type InputProps = {
- scale?: 'm' | 'l';
- wrapper?: React.ComponentPropsWithoutRef<'div'>;
+ scale?: Scale;
+ wrapper?: React.ComponentProps<'div'>;
leftNode?: React.ReactNode;
rightNode?: React.ReactNode;
} & RawInputProps;
diff --git a/front/src/components/ui/label/component.tsx b/front/src/components/ui/label/component.tsx
new file mode 100644
index 0000000..4802220
--- /dev/null
+++ b/front/src/components/ui/label/component.tsx
@@ -0,0 +1,36 @@
+import clsx from 'clsx';
+import React, { ForwardedRef, forwardRef } from 'react';
+
+import { Span } from '../span';
+import styles from './styles.module.scss';
+import { LabelProps } from './types';
+
+function LabelInner(
+ {
+ text,
+ scale,
+ position = 'top',
+ required = {},
+ className,
+ children,
+ ...props
+ }: Omit-
+ {options.map((option) => {
+ const isSelected =
+ selected && getOptionKey(option) === getOptionKey(selected);
+ const className = clsx(styles.button, {
+ [styles.selected]: isSelected,
+ });
+ return (
+
-
+
handleButtonClick(option)} + className={className} + > + {getOptionLabel(option)} + {isSelected && +} + +
+ );
+ })}
+
-
- {options.map((option) => (
-
-
-
handleButtonClick(option)} - className={calcButtonClassName(option)} - > - {getOptionLabel(option)} - -
- ))}
-
+
+ {label}
+
+ {items.map((item) => (
+ handleChange(item)}
+ scale={scale}
+ />
+ ))}
+
+ );
+}
diff --git a/front/src/components/ui/radio-group/index.ts b/front/src/components/ui/radio-group/index.ts
new file mode 100644
index 0000000..2f1dc6e
--- /dev/null
+++ b/front/src/components/ui/radio-group/index.ts
@@ -0,0 +1,2 @@
+export { RadioGroup } from './component';
+export { RadioGroupPreview } from './preview';
diff --git a/front/src/components/ui/radio-group/preview.tsx b/front/src/components/ui/radio-group/preview.tsx
new file mode 100644
index 0000000..7c00ca4
--- /dev/null
+++ b/front/src/components/ui/radio-group/preview.tsx
@@ -0,0 +1,46 @@
+import { PreviewArticle } from '@components/ui/preview';
+import React, { useState } from 'react';
+
+import { RadioGroup } from './component';
+
+export function RadioGroupPreview() {
+ const [value1, setValue1] = useState
+
+
+ }
+ />
+
-
-
-
-
-
- );
-}
diff --git a/front/src/components/ui/select/preview.tsx b/front/src/components/ui/select/preview.tsx
new file mode 100644
index 0000000..9fccdbe
--- /dev/null
+++ b/front/src/components/ui/select/preview.tsx
@@ -0,0 +1,44 @@
+import { PreviewArticle } from '@components/ui/preview';
+import React, { useState } from 'react';
+
+import { Select } from './component';
+
+export function SelectPreview() {
+ const [selectValue, setSelectValue] = useState