No articles found.
++ {article.excerpt} +
+ )} + {article.author && ( ++ By {article.author} +
+ )} ++ {article.excerpt} +
+ )} + {article.author && ( ++ By {article.author} +
+ )} + + ); + } + + // Compact variant: small text-only card (NYT 5-column row) + return ( + + {article.image && ( ++ By {article.author} +
+ )} + + ); +}; diff --git a/components/Opinion/OpinionScrollBar.tsx b/components/Opinion/OpinionScrollBar.tsx new file mode 100644 index 0000000..cab6cd0 --- /dev/null +++ b/components/Opinion/OpinionScrollBar.tsx @@ -0,0 +1,213 @@ +'use client'; + +import { useState, useEffect, useRef } from 'react'; +import Link from 'next/link'; +import Image from 'next/image'; + +type Props = { + title: string; +}; + +const shareOptions = [ + { label: 'Copy link', icon: 'link' }, + { label: 'Email', icon: 'email' }, + { label: 'Facebook', icon: 'facebook' }, + { label: 'X', icon: 'x' }, + { label: 'LinkedIn', icon: 'linkedin' }, + { label: 'WhatsApp', icon: 'whatsapp' }, + { label: 'Reddit', icon: 'reddit' }, +]; + +function ShareIcon({ type, className }: { type: string; className?: string }) { + const cls = className || 'w-5 h-5'; + switch (type) { + case 'link': + return ( + + ); + case 'email': + return ( + + ); + case 'facebook': + return ( + + ); + case 'bluesky': + return ( + + ); + case 'x': + return ( + + ); + case 'linkedin': + return ( + + ); + case 'whatsapp': + return ( + + ); + case 'reddit': + return ( + + ); + default: + return null; + } +} + +export default function OpinionScrollBar({ title }: Props) { + const [visible, setVisible] = useState(false); + const [shareOpen, setShareOpen] = useState(false); + const [copied, setCopied] = useState(false); + const dropdownRef = useRef