Add core UI components and layout for media platform
Initializes the client-side application with fundamental UI components, including navigation, cards for articles and auctions, and various elements for user interaction and display. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/bVdKIaU
This commit is contained in:
kimjaehyeon0101
142
client/src/components/ProfileModal.tsx
Normal file
142
client/src/components/ProfileModal.tsx
Normal file
@ -0,0 +1,142 @@
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import type { MediaOutlet } from "@shared/schema";
|
||||
|
||||
interface ProfileModalProps {
|
||||
outlet: MediaOutlet;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function ProfileModal({ outlet, isOpen, onClose }: ProfileModalProps) {
|
||||
const getProfileContent = () => {
|
||||
// Sample profile content - in a real app this would come from the database
|
||||
const profiles: Record<string, any> = {
|
||||
"alex-karp": {
|
||||
summary: [
|
||||
"Co-founder and CEO of Palantir Technologies, a leading data analytics company",
|
||||
"Known for his outspoken views on artificial intelligence and data privacy",
|
||||
"Advocate for Western democratic values in technology and business practices"
|
||||
],
|
||||
background: "Alexander Karp is an American billionaire businessman who co-founded Palantir Technologies in 2003. He earned a PhD in philosophy from Stanford University and a JD from Stanford Law School. Before Palantir, he worked as an investor and consultant.",
|
||||
highlights: [
|
||||
"Co-founded Palantir Technologies (2003)",
|
||||
"Led company through IPO in 2020",
|
||||
"Built partnerships with government agencies and enterprises",
|
||||
"Advocate for responsible AI development"
|
||||
],
|
||||
achievements: [
|
||||
"Built Palantir into a multi-billion dollar company",
|
||||
"Recognized leader in big data and AI ethics",
|
||||
"Frequent speaker on technology and society"
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
return profiles[outlet.slug] || {
|
||||
summary: [
|
||||
`Leading figure in the ${outlet.category} category`,
|
||||
`Influential voice in their respective field`,
|
||||
`Key contributor to industry developments`
|
||||
],
|
||||
background: `${outlet.name} is a prominent entity in the ${outlet.category} space. ${outlet.description}`,
|
||||
highlights: [
|
||||
"Industry leadership",
|
||||
"Innovative contributions",
|
||||
"Market influence",
|
||||
"Thought leadership"
|
||||
],
|
||||
achievements: [
|
||||
"Recognized expertise in their field",
|
||||
"Significant market impact",
|
||||
"Influential industry voice"
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
const profile = getProfileContent();
|
||||
|
||||
const getProfileImage = () => {
|
||||
if (outlet.imageUrl) return outlet.imageUrl;
|
||||
|
||||
// Default professional images
|
||||
if (outlet.category === "people") {
|
||||
return "https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&w=120&h=120&fit=crop&crop=face";
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto" data-testid="modal-profile">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Profile Information</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="text-center mb-6">
|
||||
{getProfileImage() ? (
|
||||
<img
|
||||
src={getProfileImage()!}
|
||||
alt={`${outlet.name} Profile`}
|
||||
className="w-24 h-24 rounded-full mx-auto mb-4 object-cover cursor-pointer hover:scale-105 transition-transform"
|
||||
onClick={() => window.open(getProfileImage()!, '_blank')}
|
||||
data-testid="img-profile-large"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-24 h-24 bg-primary/20 rounded-full mx-auto mb-4 flex items-center justify-center">
|
||||
<span className="text-primary font-bold text-2xl">
|
||||
{outlet.name.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<h3 className="text-xl font-bold">{outlet.name}</h3>
|
||||
<p className="text-muted-foreground">{outlet.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-muted rounded-lg p-4 mb-6">
|
||||
<h4 className="font-semibold mb-2">3-Line Summary</h4>
|
||||
<ul className="text-sm space-y-1">
|
||||
{profile.summary.map((line: string, index: number) => (
|
||||
<li key={index}>• {line}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2">Background</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{profile.background}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2">Key Highlights</h4>
|
||||
<ul className="text-sm text-muted-foreground space-y-1">
|
||||
{profile.highlights.map((highlight: string, index: number) => (
|
||||
<li key={index}>• {highlight}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2">Achievements</h4>
|
||||
<ul className="text-sm text-muted-foreground space-y-1">
|
||||
{profile.achievements.map((achievement: string, index: number) => (
|
||||
<li key={index}>• {achievement}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-center">
|
||||
<Button onClick={onClose} data-testid="button-close-profile">
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user