feat: news admin — collapsible cards, photo preview; user side — sort by date, show more

src/components/sections/News.tsx

@@ -106,12 +106,19 @@ function CompactArticle({
   );
 }
 
+const INITIAL_VISIBLE = 4;
+
 export function News({ data }: NewsProps) {
   const [selected, setSelected] = useState<NewsItem | null>(null);
+  const [showAll, setShowAll] = useState(false);
 
   if (!data.items || data.items.length === 0) return null;
 
-  const [featured, ...rest] = data.items;
+  // Sort by date, newest first
+  const sorted = [...data.items].sort((a, b) => (b.date || "").localeCompare(a.date || ""));
+  const [featured, ...rest] = sorted;
+  const visibleRest = showAll ? rest : rest.slice(0, INITIAL_VISIBLE - 1);
+  const hasMore = rest.length > INITIAL_VISIBLE - 1 && !showAll;
 
   return (
     <section id="news" className="section-glow relative section-padding">
@@ -129,12 +136,12 @@ export function News({ data }: NewsProps) {
             />
           </Reveal>
 
-          {rest.length > 0 && (
+          {visibleRest.length > 0 && (
             <Reveal>
               <div className="rounded-2xl bg-neutral-50/80 px-5 sm:px-6 dark:bg-white/[0.02]">
-                {rest.map((item) => (
+                {visibleRest.map((item) => (
                   <CompactArticle
-                    key={item.title}
+                    key={item.title + item.date}
                     item={item}
                     onClick={() => setSelected(item)}
                   />
@@ -142,6 +149,19 @@ export function News({ data }: NewsProps) {
               </div>
             </Reveal>
           )}
+
+          {hasMore && (
+            <Reveal>
+              <div className="text-center">
+                <button
+                  onClick={() => setShowAll(true)}
+                  className="rounded-full border border-white/10 bg-white/[0.03] px-6 py-2.5 text-sm font-medium text-neutral-400 hover:text-white hover:border-white/25 transition-colors cursor-pointer"
+                >
+                  Показать ещё ({rest.length - INITIAL_VISIBLE + 1})
+                </button>
+              </div>
+            </Reveal>
+          )}
         </div>
       </div>