diff --git a/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx b/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx index 25eee8934..b58e3b6e9 100644 --- a/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx +++ b/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx @@ -3,6 +3,7 @@ import { matchPath, useLocation } from 'react-router-dom'; import { ROUTES } from '@/shared/config'; import { Loader } from '@/shared/ui/Loader'; +import { CollectionCreateFormSkeleton } from '@/features/collections/createCollection'; import { EditProfileFormSkeleton } from '@/features/profile/editProfileForm'; import { QuestionCreateFormSkeleton } from '@/features/question/createQuestion'; @@ -75,6 +76,8 @@ const SkeletonGenerator = () => { return ; case ROUTES.admin.questions.create.page: return ; + case ROUTES.admin.collections.create.page: + return ; case ROUTES.admin.questions.page: return ; case ROUTES.admin.specializations.page: diff --git a/src/entities/collection/index.ts b/src/entities/collection/index.ts index 1456b1e58..032dc2ebb 100644 --- a/src/entities/collection/index.ts +++ b/src/entities/collection/index.ts @@ -8,7 +8,6 @@ export { LS_INIT_COLLECTION_ID } from './model/constants/collection'; export { getCollectionRoute } from '@/entities/collection/lib/getCollectionRoute'; export { collectionsMock } from './api/__mock__/data'; export { collectionHandlers } from './api/__mock__/index'; -export { CollectionForm } from './ui/CollectionForm/CollectionForm'; export * from './api/collectionApi'; export { ChooseCollectionAccess } from './ui/ChooseCollectionAccess/ChooseCollectionAccess'; @@ -16,3 +15,5 @@ export { CollectionPreview } from './ui/CollectionPreview/CollectionPreview'; export { PreviewCollectionsItemSkeleton } from './ui/PreviewCollectionItem/PreviewCollectionsItem.skeleton'; export { CollectionsPreviewSkeleton } from './ui/CollectionPreview/CollectionPreview.sekeleton'; export { CollectionSelect } from './ui/CollectionSelect/CollectionSelect'; +export { CollectionForm } from './ui/CollectionForm/CollectionForm'; +export { CollectionFormSkeleton } from './ui/CollectionForm/CollectionForm.skeleton'; diff --git a/src/entities/collection/ui/CollectionForm/CollectionForm.module.css b/src/entities/collection/ui/CollectionForm/CollectionForm.module.css index 797f1e80b..f635d883f 100644 --- a/src/entities/collection/ui/CollectionForm/CollectionForm.module.css +++ b/src/entities/collection/ui/CollectionForm/CollectionForm.module.css @@ -21,4 +21,23 @@ width: 100%; min-width: 100px; max-width: 408px; +} + +.skeleton-form-field { + height: 48px; +} + +.skeleton-textarea { + margin-top: 18px; +} + +.skeleton-keywords-control { + margin-bottom: 24px; +} + + +@media (width < 1064px) { + .skeleton-keywords-control { + margin-bottom: 0; + } } \ No newline at end of file diff --git a/src/entities/collection/ui/CollectionForm/CollectionForm.skeleton.tsx b/src/entities/collection/ui/CollectionForm/CollectionForm.skeleton.tsx new file mode 100644 index 000000000..2eeb2f384 --- /dev/null +++ b/src/entities/collection/ui/CollectionForm/CollectionForm.skeleton.tsx @@ -0,0 +1,84 @@ +import { Flex } from '@/shared/ui/Flex'; +import { FormControlSkeleton } from '@/shared/ui/FormControl'; +import { FormFieldSkeleton } from '@/shared/ui/FormField'; +import { ImageLoaderWithoutCropperSkeleton } from '@/shared/ui/ImageLoaderWithoutCropper'; +import { InputSkeleton } from '@/shared/ui/Input'; +import { KeywordInputSkeleton } from '@/shared/ui/KeywordInput'; +import { KeywordSelectSkeleton } from '@/shared/ui/KeywordSelect'; +import { RadioSkeleton } from '@/shared/ui/Radio'; +import { TextSkeleton } from '@/shared/ui/Text'; +import { TextAreaSkeleton } from '@/shared/ui/TextArea'; + +import { CompanySelectSkeleton } from '@/entities/company/@x/collection'; +import { ChooseQuestionsDrawerSkeleton } from '@/entities/question/@x/collection'; +import { SpecializationSelectSkeleton } from '@/entities/specialization/@x/collection'; +import { ChooseTasksDrawerSkeleton } from '@/entities/task/@x/collection'; + +import styles from './CollectionForm.module.css'; + +export const CollectionFormSkeleton = () => { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/entities/company/@x/collection.ts b/src/entities/company/@x/collection.ts index 2ebb689d7..9ecd72795 100644 --- a/src/entities/company/@x/collection.ts +++ b/src/entities/company/@x/collection.ts @@ -1,2 +1,3 @@ export type { Company } from '../model/types/companyTypes'; export { CompanySelect } from '../ui/CompanySelect/CompanySelect'; +export { CompanySelectSkeleton } from '../ui/CompanySelect/CompanySelect.skeleton'; diff --git a/src/entities/company/index.ts b/src/entities/company/index.ts index 3300a2ead..646f48d32 100644 --- a/src/entities/company/index.ts +++ b/src/entities/company/index.ts @@ -2,6 +2,7 @@ export { CompanyCard } from './ui/CompanyCard/CompanyCard'; export { CompanyCardSkeleton } from './ui/CompanyCard/CompanyCard.skeleton'; export { CompanySelect } from './ui/CompanySelect/CompanySelect'; +export { CompanySelectSkeleton } from './ui/CompanySelect/CompanySelect.skeleton'; export { CompanyCompactList } from './ui/CompanyCompactList/CompanyCompactList'; export { CompanyCompactListSkeleton } from './ui/CompanyCompactList/CompanyCompactList.skeleton'; export { PublicCompanySelect } from './ui/PublicCompanySelect/PublicCompanySelect'; diff --git a/src/entities/company/ui/CompanySelect/CompanySelect.skeleton.tsx b/src/entities/company/ui/CompanySelect/CompanySelect.skeleton.tsx new file mode 100644 index 000000000..65337de75 --- /dev/null +++ b/src/entities/company/ui/CompanySelect/CompanySelect.skeleton.tsx @@ -0,0 +1,5 @@ +import { SelectWithChipsSkeleton } from '@/shared/ui/SelectWithChips'; + +export const CompanySelectSkeleton = () => { + return ; +}; diff --git a/src/entities/question/@x/collection.ts b/src/entities/question/@x/collection.ts index 6e651a784..51846e8a3 100644 --- a/src/entities/question/@x/collection.ts +++ b/src/entities/question/@x/collection.ts @@ -1,3 +1,4 @@ export type { Question, GeneratedQuestionDto } from '../model/types/question'; export { ChooseQuestionsDrawer } from '../ui/ChooseQuestionsDrawer/ChooseQuestionsDrawer'; +export { ChooseQuestionsDrawerSkeleton } from '../ui/ChooseQuestionsDrawer/ChooseQuestionsDrawer.skeleton'; export { GENERATED_QUESTIONS_LS_KEY } from '../model/constants/question'; diff --git a/src/entities/question/index.ts b/src/entities/question/index.ts index e74394f5f..193a9cbcd 100644 --- a/src/entities/question/index.ts +++ b/src/entities/question/index.ts @@ -35,6 +35,7 @@ export { PreviewQuestionsItem } from './ui/PreviewQuestionsItem/PreviewQuestions export { PreviewQuestionsItemSkeleton } from './ui/PreviewQuestionsItem/PreviewQuestionsItem.skeleton'; export { QuestionAdditionalInfo } from './ui/QuestionAdditionalInfo/QuestionAdditionalInfo'; export { QuestionAdditionalInfoSkeleton } from './ui/QuestionAdditionalInfo/QuestionAdditionalInfo.skeleton'; +export { ChooseQuestionsDrawerSkeleton } from './ui/ChooseQuestionsDrawer/ChooseQuestionsDrawer.skeleton'; export { ProgressBlock } from './ui/ProgressBlock/ProgressBlock'; export { ProgressBlockSkeleton } from './ui/ProgressBlock/ProgressBlock.skeleton'; export { questionsMock } from './api/__mocks__/data'; diff --git a/src/entities/question/ui/ChooseQuestionsDrawer/ChooseQuestionsDrawer.skeleton.tsx b/src/entities/question/ui/ChooseQuestionsDrawer/ChooseQuestionsDrawer.skeleton.tsx new file mode 100644 index 000000000..fc45957a4 --- /dev/null +++ b/src/entities/question/ui/ChooseQuestionsDrawer/ChooseQuestionsDrawer.skeleton.tsx @@ -0,0 +1,22 @@ +import { ButtonSkeleton } from '@/shared/ui/Button'; +import { Flex } from '@/shared/ui/Flex'; +import { TextSkeleton } from '@/shared/ui/Text'; + +import styles from './ChooseQuestionsDrawer.module.css'; + +export const ChooseQuestionsDrawerSkeleton = () => { + return ( + + + + + + + + + + + + + ); +}; diff --git a/src/entities/specialization/@x/collection.ts b/src/entities/specialization/@x/collection.ts index aa0bbee5a..569669fe9 100644 --- a/src/entities/specialization/@x/collection.ts +++ b/src/entities/specialization/@x/collection.ts @@ -1,2 +1,3 @@ export type { Specialization } from '../model/types/specialization'; export { SpecializationSelect } from '../ui/SpecializationSelect/SpecializationSelect'; +export { SpecializationSelectSkeleton } from '../ui/SpecializationSelect/SpecializationSelect.skeleton'; diff --git a/src/entities/task/@x/collection.ts b/src/entities/task/@x/collection.ts index c16fa80b0..f1591792c 100644 --- a/src/entities/task/@x/collection.ts +++ b/src/entities/task/@x/collection.ts @@ -1,2 +1,3 @@ export { ChooseTasksDrawer } from '../ui/ChooseTasksDrawer'; +export { ChooseTasksDrawerSkeleton } from '../ui/ChooseTasksDrawer/ChooseTasksDrawer.skeleton'; export type { Task } from '../model/types/task'; diff --git a/src/entities/task/index.ts b/src/entities/task/index.ts index 0ba120e10..f140fc716 100644 --- a/src/entities/task/index.ts +++ b/src/entities/task/index.ts @@ -36,7 +36,7 @@ export { TaskCategorySelectSkeleton } from './ui/TaskCategorySelect/TaskCategory export { TaskStructuresField } from './ui/TaskStructuresField/TaskStructuresField'; export { TaskCategoryFilterList } from './ui/TaskCategoryFilterList/TaskCategoryFilterList'; export { taskCategories } from './model/constants/task'; -export { ChooseTasksDrawer } from './ui/ChooseTasksDrawer'; +export { ChooseTasksDrawer, ChooseTasksDrawerSkeleton } from './ui/ChooseTasksDrawer'; export { taskHandlers } from './api/__mocks__'; export { TaskCardSkeleton } from './ui/TaskCard/TaskCard.skeleton'; export { TaskCategoryFilterListSkeleton } from './ui/TaskCategoryFilterList/TaskCategoryFilterList.skeleton'; diff --git a/src/entities/task/ui/ChooseTasksDrawer/ChooseTasksDrawer.skeleton.tsx b/src/entities/task/ui/ChooseTasksDrawer/ChooseTasksDrawer.skeleton.tsx new file mode 100644 index 000000000..e45e05996 --- /dev/null +++ b/src/entities/task/ui/ChooseTasksDrawer/ChooseTasksDrawer.skeleton.tsx @@ -0,0 +1,22 @@ +import { Flex } from "@/shared/ui/Flex"; +import { TextSkeleton } from "@/shared/ui/Text"; +import { ButtonSkeleton } from "@/shared/ui/Button"; + +import styles from './ChooseTasksDrawer.module.css'; + +export const ChooseTasksDrawerSkeleton = () => { + return ( + + + + + + + + + + + + + ); +}; \ No newline at end of file diff --git a/src/entities/task/ui/ChooseTasksDrawer/index.ts b/src/entities/task/ui/ChooseTasksDrawer/index.ts index b0f894edd..1f27b1f4c 100644 --- a/src/entities/task/ui/ChooseTasksDrawer/index.ts +++ b/src/entities/task/ui/ChooseTasksDrawer/index.ts @@ -1 +1,2 @@ export { ChooseTasksDrawer } from './ChooseTasksDrawer'; +export { ChooseTasksDrawerSkeleton } from './ChooseTasksDrawer.skeleton'; diff --git a/src/features/collections/createCollection/index.ts b/src/features/collections/createCollection/index.ts index 9d91f5fe0..f33c42e5e 100644 --- a/src/features/collections/createCollection/index.ts +++ b/src/features/collections/createCollection/index.ts @@ -1,3 +1,4 @@ export { CollectionCreateForm } from './ui/CollectionCreateForm/CollectionCreateForm'; +export { CollectionCreateFormSkeleton } from './ui/CollectionCreateForm/CollectionCreateForm.skeleton'; export { getCreateCollectionsApiErrorMessage } from './lib/utils/getCreateCollectionsApiErrorMessage'; export { createCollectionHandlers } from './api/__mocks__'; diff --git a/src/features/collections/createCollection/ui/CollectionCreateForm/CollectionCreateForm.skeleton.tsx b/src/features/collections/createCollection/ui/CollectionCreateForm/CollectionCreateForm.skeleton.tsx new file mode 100644 index 000000000..5507fc455 --- /dev/null +++ b/src/features/collections/createCollection/ui/CollectionCreateForm/CollectionCreateForm.skeleton.tsx @@ -0,0 +1,17 @@ +import { CardSkeleton } from '@/shared/ui/Card'; +import { Flex } from '@/shared/ui/Flex'; + +import { CollectionFormSkeleton } from '@/entities/collection'; + +import { CollectionCreateFormHeaderSkeleton } from '../../ui/CollectionCreateFormHeader/CollectionCreateFormHeader.skeleton'; + +export const CollectionCreateFormSkeleton = () => { + return ( + + + + + + + ); +}; diff --git a/src/features/collections/createCollection/ui/CollectionCreateFormHeader/CollectionCreateFormHeader.skeleton.tsx b/src/features/collections/createCollection/ui/CollectionCreateFormHeader/CollectionCreateFormHeader.skeleton.tsx new file mode 100644 index 000000000..de0066f0c --- /dev/null +++ b/src/features/collections/createCollection/ui/CollectionCreateFormHeader/CollectionCreateFormHeader.skeleton.tsx @@ -0,0 +1,12 @@ +import { BackButtonSkeleton } from '@/shared/ui/BackButton'; +import { ButtonSkeleton } from '@/shared/ui/Button'; +import { Flex } from '@/shared/ui/Flex'; + +export const CollectionCreateFormHeaderSkeleton = () => { + return ( + + + + + ); +}; diff --git a/src/pages/admin/collection/collectionCreate/ui/CollectionCreatePage/CollectionCreatePage.tsx b/src/pages/admin/collection/collectionCreate/ui/CollectionCreatePage/CollectionCreatePage.tsx index 71eff38f1..ae2bdd96b 100644 --- a/src/pages/admin/collection/collectionCreate/ui/CollectionCreatePage/CollectionCreatePage.tsx +++ b/src/pages/admin/collection/collectionCreate/ui/CollectionCreatePage/CollectionCreatePage.tsx @@ -1,10 +1,17 @@ import { CollectionCreateForm } from '@/features/collections/createCollection'; +import { CollectionCreateFormSkeleton } from '@/features/collections/createCollection'; import { PageWrapper } from '@/widgets/PageWrapper'; const CollectionCreatePage = () => { return ( - }> + } + content={} + > {({ content }) => content} ); diff --git a/src/shared/ui/Button/Button.skeleton.tsx b/src/shared/ui/Button/Button.skeleton.tsx index ecd943193..7bc626cee 100644 --- a/src/shared/ui/Button/Button.skeleton.tsx +++ b/src/shared/ui/Button/Button.skeleton.tsx @@ -13,8 +13,8 @@ export const ButtonSkeleton = ({ fullWidth, size = 'medium', destructive, - width, -}: ButtonProps & { width?: number }) => { + width +}: ButtonProps & { width?: string | number }) => { const tagName = getTagName(variant); return ( diff --git a/src/shared/ui/Flex/Flex.module.css b/src/shared/ui/Flex/Flex.module.css index b970c4cce..dc1e87554 100644 --- a/src/shared/ui/Flex/Flex.module.css +++ b/src/shared/ui/Flex/Flex.module.css @@ -62,6 +62,10 @@ flex-wrap: nowrap; } +.gap2 { + gap: 2px; +} + .gap4 { gap: 4px; } @@ -126,6 +130,10 @@ gap: 52px; } +.gap56 { + gap: 56px; +} + .gap60 { gap: 60px; } diff --git a/src/shared/ui/Flex/constants.ts b/src/shared/ui/Flex/constants.ts index bc5cb9612..8755111c0 100644 --- a/src/shared/ui/Flex/constants.ts +++ b/src/shared/ui/Flex/constants.ts @@ -29,6 +29,7 @@ export const wrapClasses: Record = { }; export const gapClasses: Record = { + '2': styles.gap2, '4': styles.gap4, '6': styles.gap6, '8': styles.gap8, @@ -45,6 +46,7 @@ export const gapClasses: Record = { '40': styles.gap40, '48': styles.gap48, '52': styles.gap52, + '56': styles.gap56, '60': styles.gap60, '100': styles.gap100, '120': styles.gap120, diff --git a/src/shared/ui/Flex/types.ts b/src/shared/ui/Flex/types.ts index a4825cc1f..3a6f38973 100644 --- a/src/shared/ui/Flex/types.ts +++ b/src/shared/ui/Flex/types.ts @@ -9,6 +9,7 @@ export type FlexWrap = 'wrap' | 'nowrap'; export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse'; export type FlexGap = + | '2' | '4' | '6' | '8' @@ -25,6 +26,7 @@ export type FlexGap = | '40' | '48' | '52' + | '56' | '60' | '100' | '120'; diff --git a/src/shared/ui/FormField/FormField.skeleton.tsx b/src/shared/ui/FormField/FormField.skeleton.tsx index ae73ecd35..bb988296f 100644 --- a/src/shared/ui/FormField/FormField.skeleton.tsx +++ b/src/shared/ui/FormField/FormField.skeleton.tsx @@ -6,11 +6,16 @@ import { TextSkeleton } from '@/shared/ui/Text'; import { FormFieldProps } from './FormField'; import styles from './FormField.module.css'; +interface FormFieldSkeletonProps extends Partial { + countTextFields?: number; +} + export const FormFieldSkeleton = ({ children, direction = 'row', isLimitWidth, -}: Partial) => { + countTextFields = 1, +}: FormFieldSkeletonProps) => { return ( - + + {Array.from({ length: countTextFields }).map((_, index) => ( + + ))} + {children} diff --git a/src/shared/ui/ImageLoaderWithoutCropper/ImageLoaderWithoutCropper.module.css b/src/shared/ui/ImageLoaderWithoutCropper/ImageLoaderWithoutCropper.module.css index 80d8042c9..662a8f90f 100644 --- a/src/shared/ui/ImageLoaderWithoutCropper/ImageLoaderWithoutCropper.module.css +++ b/src/shared/ui/ImageLoaderWithoutCropper/ImageLoaderWithoutCropper.module.css @@ -55,6 +55,13 @@ transform: translate(-50%, -50%); } +.file-loader-skeleton { + flex: 1 1 458px; + min-width: 0; + max-width: 458px; + min-height: 114px; +} + @media (width <= 768px) { .picture-wrapper { flex-wrap: wrap; diff --git a/src/shared/ui/ImageLoaderWithoutCropper/ImageLoaderWithoutCropper.skeleton.tsx b/src/shared/ui/ImageLoaderWithoutCropper/ImageLoaderWithoutCropper.skeleton.tsx new file mode 100644 index 000000000..afa6c29f6 --- /dev/null +++ b/src/shared/ui/ImageLoaderWithoutCropper/ImageLoaderWithoutCropper.skeleton.tsx @@ -0,0 +1,14 @@ +import { FileLoaderSkeleton } from '../FileLoader'; +import { Flex } from '../Flex'; +import { ImageWithWrapperSkeleton } from '../ImageWithWrapper'; + +import styles from './ImageLoaderWithoutCropper.module.css'; + +export const ImageLoaderWithoutCropperSkeleton = () => { + return ( + + + + + ); +}; diff --git a/src/shared/ui/ImageLoaderWithoutCropper/index.ts b/src/shared/ui/ImageLoaderWithoutCropper/index.ts index 5d04d24f5..32f51b42d 100644 --- a/src/shared/ui/ImageLoaderWithoutCropper/index.ts +++ b/src/shared/ui/ImageLoaderWithoutCropper/index.ts @@ -1 +1,2 @@ export { ImageLoaderWithoutCropper } from './ImageLoaderWithoutCropper'; +export { ImageLoaderWithoutCropperSkeleton } from './ImageLoaderWithoutCropper.skeleton'; diff --git a/src/shared/ui/ImageWithWrapper/ImageWithWrapper.skeleton.tsx b/src/shared/ui/ImageWithWrapper/ImageWithWrapper.skeleton.tsx index 4f91614ad..adb1466fe 100644 --- a/src/shared/ui/ImageWithWrapper/ImageWithWrapper.skeleton.tsx +++ b/src/shared/ui/ImageWithWrapper/ImageWithWrapper.skeleton.tsx @@ -2,9 +2,25 @@ import classNames from 'classnames'; import { Skeleton } from '@/shared/ui/Skeleton'; -import { ImageWithWrapperProps } from './ImageWithWrapper'; +import { SkeletonBlockProps } from '../Skeleton/Skeleton'; + import styles from './ImageWithWrapper.module.css'; -export const ImageWithWrapperSkeleton = ({ className }: ImageWithWrapperProps) => { - return ; +interface ImageWithWrapperSkeletonProps + extends Pick {} + +export const ImageWithWrapperSkeleton = ({ + className, + width, + height, + borderRadius, +}: ImageWithWrapperSkeletonProps) => { + return ( + + ); }; diff --git a/src/shared/ui/KeywordInput/KeywordInput.skeleton.tsx b/src/shared/ui/KeywordInput/KeywordInput.skeleton.tsx index 8b3244984..65967d809 100644 --- a/src/shared/ui/KeywordInput/KeywordInput.skeleton.tsx +++ b/src/shared/ui/KeywordInput/KeywordInput.skeleton.tsx @@ -8,7 +8,7 @@ export const KeywordInputSkeleton = () => { return ( - + diff --git a/src/shared/ui/SelectWithChips/SelectWithChips.skeleton.tsx b/src/shared/ui/SelectWithChips/SelectWithChips.skeleton.tsx new file mode 100644 index 000000000..7cbc1d848 --- /dev/null +++ b/src/shared/ui/SelectWithChips/SelectWithChips.skeleton.tsx @@ -0,0 +1,5 @@ +import { SelectSkeleton } from '../Dropdown/Select/Select.skeleton'; + +export const SelectWithChipsSkeleton = () => { + return ; +}; diff --git a/src/shared/ui/SelectWithChips/index.ts b/src/shared/ui/SelectWithChips/index.ts index 1ea53885c..6d8dadf2f 100644 --- a/src/shared/ui/SelectWithChips/index.ts +++ b/src/shared/ui/SelectWithChips/index.ts @@ -1,3 +1,3 @@ export { SelectWithChips } from './SelectWithChips'; - +export { SelectWithChipsSkeleton } from './SelectWithChips.skeleton'; export { selectWithChipsTestIds } from './constants'; diff --git a/src/shared/ui/Skeleton/Skeleton.tsx b/src/shared/ui/Skeleton/Skeleton.tsx index a90cda6c1..b873a8a64 100644 --- a/src/shared/ui/Skeleton/Skeleton.tsx +++ b/src/shared/ui/Skeleton/Skeleton.tsx @@ -5,7 +5,7 @@ import styles from './Skeleton.module.css'; type SkeletonVariant = 'default' | 'blur'; -interface SkeletonBlockProps { +export interface SkeletonBlockProps { width?: string | number; height?: string | number; borderRadius?: string | number; diff --git a/src/shared/ui/TextArea/TextArea.skeleton.tsx b/src/shared/ui/TextArea/TextArea.skeleton.tsx new file mode 100644 index 000000000..19e8dbca9 --- /dev/null +++ b/src/shared/ui/TextArea/TextArea.skeleton.tsx @@ -0,0 +1,18 @@ +import { Skeleton } from '../Skeleton'; +import type { SkeletonBlockProps } from '../Skeleton/Skeleton'; + +type TextAreaSkeletonProps = Pick< + SkeletonBlockProps, + 'width' | 'height' | 'className' | 'borderRadius' +>; + +export const TextAreaSkeleton = ({ + width, + height, + className, + borderRadius, +}: TextAreaSkeletonProps) => { + return ( + + ); +}; diff --git a/src/shared/ui/TextArea/index.ts b/src/shared/ui/TextArea/index.ts index fdf76b35f..48d91fdc6 100644 --- a/src/shared/ui/TextArea/index.ts +++ b/src/shared/ui/TextArea/index.ts @@ -1 +1,2 @@ export { TextArea } from './TextArea'; +export { TextAreaSkeleton } from './TextArea.skeleton';