77 lines
1.6 KiB
TypeScript
77 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { Col, Row } from 'antd'
|
|
import classNames from 'classnames'
|
|
import * as React from 'react'
|
|
import { useCallback, useEffect, useState } from 'react'
|
|
import { Paragraph } from '@/components/Typography/Paragraph'
|
|
|
|
import '../css/FanClubCard.scss'
|
|
|
|
interface FanClubCardProps {
|
|
title?: string
|
|
subTitle?: string
|
|
image?: string
|
|
onSaveFanClub?: (data: any) => void
|
|
}
|
|
|
|
const FanClubCard = ({
|
|
title,
|
|
subTitle,
|
|
image,
|
|
onSaveFanClub
|
|
}: FanClubCardProps) => {
|
|
const [photo, setPhoto] = useState<MediaUpload>({})
|
|
|
|
useEffect(() => {
|
|
setPhoto({ url: image })
|
|
}, [])
|
|
const uploadPhotoSuccess = useCallback(
|
|
(file: MediaUpload) => {
|
|
setPhoto(file)
|
|
const data = {
|
|
order: 0,
|
|
thumbnail: file.url
|
|
}
|
|
onSaveFanClub?.(data)
|
|
},
|
|
[onSaveFanClub]
|
|
)
|
|
const removePhoto = useCallback(() => {
|
|
setPhoto({})
|
|
const data = {
|
|
order: 0,
|
|
thumbnail: ''
|
|
}
|
|
onSaveFanClub?.(data)
|
|
}, [onSaveFanClub])
|
|
return (
|
|
<div className="fan-club-card">
|
|
<Row align="middle">
|
|
<Col flex={'1'}>
|
|
<Paragraph
|
|
preset={'bold32'}
|
|
className={classNames(
|
|
'fan-club-card__title m__b--8',
|
|
'leading-42'
|
|
)}
|
|
>
|
|
{title}
|
|
</Paragraph>
|
|
<Paragraph
|
|
className="m__b--8 opacity--80 fan-club-card__title"
|
|
preset={'regular18'}
|
|
>
|
|
{subTitle}
|
|
</Paragraph>
|
|
</Col>
|
|
<Col>
|
|
<p>HELLO</p>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FanClubCard
|