228 lines
7.7 KiB
TypeScript
228 lines
7.7 KiB
TypeScript
import React from 'react';
|
|
import { Stack, Box, Typography, Tooltip, IconButton, Chip, alpha } from '@mui/material';
|
|
import {
|
|
AutoAwesome as AutoAwesomeIcon,
|
|
HelpOutline as HelpOutlineIcon,
|
|
AttachMoney as AttachMoneyIcon,
|
|
} from '@mui/icons-material';
|
|
import { Knobs } from '../types';
|
|
|
|
interface CreateHeaderProps {
|
|
subscription: any;
|
|
duration: number;
|
|
speakers: number;
|
|
knobs: Knobs;
|
|
estimatedCost: {
|
|
ttsCost: number;
|
|
avatarCost: number;
|
|
videoCost: number;
|
|
researchCost: number;
|
|
total: number;
|
|
};
|
|
}
|
|
|
|
export const CreateHeader: React.FC<CreateHeaderProps> = ({
|
|
subscription,
|
|
duration,
|
|
speakers,
|
|
knobs,
|
|
estimatedCost,
|
|
}) => {
|
|
return (
|
|
<Stack direction="row" spacing={2} alignItems="flex-start" justifyContent="space-between" flexWrap="wrap" gap={2}>
|
|
<Stack direction="row" spacing={2} alignItems="flex-start" sx={{ flex: 1, minWidth: { xs: "100%", md: "60%" } }}>
|
|
<Box
|
|
sx={{
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 2,
|
|
background: "linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<AutoAwesomeIcon sx={{ color: "#667eea", fontSize: "1.75rem" }} />
|
|
</Box>
|
|
<Box sx={{ flex: 1 }}>
|
|
<Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 0.5 }}>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
color: "#0f172a",
|
|
fontWeight: 700,
|
|
fontSize: { xs: "1.5rem", md: "1.75rem" },
|
|
letterSpacing: "-0.02em",
|
|
lineHeight: 1.2,
|
|
}}
|
|
>
|
|
Create New Podcast Episode
|
|
</Typography>
|
|
<Tooltip
|
|
title={
|
|
<Box>
|
|
<Typography variant="body2" sx={{ fontWeight: 600, mb: 0.5 }}>
|
|
Tips for best results:
|
|
</Typography>
|
|
<Typography variant="body2" component="div" sx={{ fontSize: "0.875rem" }}>
|
|
• Provide one clear topic OR a single blog URL (we won't auto-run anything).<br />
|
|
• Keep it concise—one sentence topic works best.<br />
|
|
• We start analysis only after you confirm, so you stay in control.
|
|
</Typography>
|
|
</Box>
|
|
}
|
|
arrow
|
|
placement="top"
|
|
componentsProps={{
|
|
tooltip: {
|
|
sx: {
|
|
bgcolor: "#0f172a",
|
|
color: "#ffffff",
|
|
maxWidth: 300,
|
|
fontSize: "0.875rem",
|
|
p: 1.5,
|
|
boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
|
|
},
|
|
},
|
|
arrow: {
|
|
sx: {
|
|
color: "#0f172a",
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<IconButton
|
|
size="small"
|
|
sx={{
|
|
color: "#64748b",
|
|
"&:hover": {
|
|
color: "#667eea",
|
|
backgroundColor: alpha("#667eea", 0.08),
|
|
}
|
|
}}
|
|
>
|
|
<HelpOutlineIcon fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
<Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap sx={{ alignItems: "center" }}>
|
|
<Tooltip
|
|
title={`Your current subscription plan: ${subscription?.tier || "free"}. Upgrade for more features.`}
|
|
arrow
|
|
placement="top"
|
|
>
|
|
<Chip
|
|
label={`Plan: ${subscription?.tier || "free"}`}
|
|
size="small"
|
|
sx={{
|
|
background: "linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%)",
|
|
color: "#667eea",
|
|
fontWeight: 600,
|
|
border: "1px solid rgba(102, 126, 234, 0.2)",
|
|
fontSize: "0.75rem",
|
|
height: 26,
|
|
cursor: "help",
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
<Tooltip
|
|
title={`Podcast duration: ${duration} minutes. Maximum duration is 10 minutes. Recommended: 5-10 minutes for best results.`}
|
|
arrow
|
|
placement="top"
|
|
>
|
|
<Chip
|
|
label={`Duration: ${duration} min`}
|
|
size="small"
|
|
sx={{
|
|
background: alpha("#0f172a", 0.06),
|
|
color: "#0f172a",
|
|
fontWeight: 600,
|
|
border: "1px solid rgba(15, 23, 42, 0.12)",
|
|
fontSize: "0.75rem",
|
|
height: 26,
|
|
cursor: "help",
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
<Tooltip
|
|
title={`Number of speakers: ${speakers}. Supports 1-2 speakers. Each additional speaker adds avatar generation cost.`}
|
|
arrow
|
|
placement="top"
|
|
>
|
|
<Chip
|
|
label={`${speakers} speaker${speakers > 1 ? "s" : ""}`}
|
|
size="small"
|
|
sx={{
|
|
background: alpha("#0f172a", 0.06),
|
|
color: "#0f172a",
|
|
fontWeight: 600,
|
|
border: "1px solid rgba(15, 23, 42, 0.12)",
|
|
fontSize: "0.75rem",
|
|
height: 26,
|
|
cursor: "help",
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
<Tooltip
|
|
title={
|
|
<Box>
|
|
<Typography variant="body2" sx={{ fontWeight: 600, mb: 0.5 }}>
|
|
Estimated Cost Breakdown:
|
|
</Typography>
|
|
<Typography variant="body2" component="div" sx={{ fontSize: "0.875rem", lineHeight: 1.6 }}>
|
|
• Audio Generation: ${estimatedCost.ttsCost}<br />
|
|
• Avatar Creation: ${estimatedCost.avatarCost}<br />
|
|
• Video Rendering: ${estimatedCost.videoCost}<br />
|
|
• Research: ${estimatedCost.researchCost}<br />
|
|
<Typography variant="body2" sx={{ fontWeight: 600, mt: 0.5, pt: 0.5, borderTop: "1px solid rgba(255,255,255,0.2)" }}>
|
|
Total: ${estimatedCost.total}
|
|
</Typography>
|
|
<Typography variant="caption" sx={{ fontSize: "0.75rem", opacity: 0.9, mt: 0.5, display: "block" }}>
|
|
Based on {duration} min, {speakers} speaker{speakers > 1 ? "s" : ""}, {knobs.bitrate === "hd" ? "HD" : "standard"} quality
|
|
</Typography>
|
|
</Typography>
|
|
</Box>
|
|
}
|
|
arrow
|
|
placement="top"
|
|
componentsProps={{
|
|
tooltip: {
|
|
sx: {
|
|
bgcolor: "#0f172a",
|
|
color: "#ffffff",
|
|
maxWidth: 280,
|
|
fontSize: "0.875rem",
|
|
p: 1.5,
|
|
boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
|
|
},
|
|
},
|
|
arrow: {
|
|
sx: {
|
|
color: "#0f172a",
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Chip
|
|
icon={<AttachMoneyIcon sx={{ fontSize: "0.875rem !important" }} />}
|
|
label={`Est. $${estimatedCost.total}`}
|
|
size="small"
|
|
sx={{
|
|
background: "linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.12) 100%)",
|
|
color: "#059669",
|
|
fontWeight: 600,
|
|
border: "1px solid rgba(16, 185, 129, 0.2)",
|
|
fontSize: "0.75rem",
|
|
height: 26,
|
|
cursor: "help",
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|