forked from 77media/video-flow
兼容H5热门模板标题样式
This commit is contained in:
parent
9bea0715f3
commit
23c35f68f3
@ -8,6 +8,7 @@ import { PcTemplateModal } from "@/components/ChatInputBox/PcTemplateModal"
|
|||||||
import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService"
|
import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService"
|
||||||
import { useAppDispatch } from "@/lib/store/hooks"
|
import { useAppDispatch } from "@/lib/store/hooks"
|
||||||
import { selectTemplateById } from "@/lib/store/creationTemplateSlice"
|
import { selectTemplateById } from "@/lib/store/creationTemplateSlice"
|
||||||
|
import { useDeviceType } from "@/hooks/useDeviceType"
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A compact template showcase with a header and link to all templates.
|
* A compact template showcase with a header and link to all templates.
|
||||||
@ -17,6 +18,7 @@ import { selectTemplateById } from "@/lib/store/creationTemplateSlice"
|
|||||||
const FamousTemplate: React.FC = () => {
|
const FamousTemplate: React.FC = () => {
|
||||||
const { templateStoryList, getTemplateStoryList, isLoading } = useTemplateStoryServiceHook()
|
const { templateStoryList, getTemplateStoryList, isLoading } = useTemplateStoryServiceHook()
|
||||||
const dispatch = useAppDispatch()
|
const dispatch = useAppDispatch()
|
||||||
|
const { isDesktop } = useDeviceType()
|
||||||
|
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||||
const [initialTemplateId, setInitialTemplateId] = useState<string | undefined>(undefined)
|
const [initialTemplateId, setInitialTemplateId] = useState<string | undefined>(undefined)
|
||||||
@ -41,11 +43,11 @@ const FamousTemplate: React.FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section data-alt="famous-template" className="w-full">
|
<section data-alt="famous-template" className="w-full">
|
||||||
<div data-alt="famous-template-header" className="mb-4 flex items-center">
|
<div data-alt="famous-template-header" className={`mb-4 items-center ${isDesktop ? 'flex' : 'block'}`}>
|
||||||
<h2 data-alt="famous-template-title" className="text-xl py-4 font-semibold text-white">
|
<h2 data-alt="famous-template-title" className="text-xl py-4 font-semibold text-white">
|
||||||
Hot Templates
|
Hot Templates
|
||||||
</h2>
|
</h2>
|
||||||
<div data-alt="template-tabs" className="flex flex-wrap items-center gap-2 ml-4">
|
<div data-alt="template-tabs" className={`flex flex-wrap items-center gap-2 ${isDesktop ? 'ml-4' : 'ml-0'}`}>
|
||||||
{(["all", "music", "animation", "fantasy"] as const).map((tab) => (
|
{(["all", "music", "animation", "fantasy"] as const).map((tab) => (
|
||||||
<button
|
<button
|
||||||
key={tab}
|
key={tab}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user