Initial commit: SAPIENS Stock service

components/recent-developments.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+export function RecentDevelopments() {
+  const developments = [
+    {
+      id: 1,
+      title: "European Registrations Plummet Despite EV Boom",
+      summary:
+        "Tesla registrations crashed 23% year-over-year in August across Europe to 14,831 units, while the broader European electric vehicle market surged 26%. European Automobile Manufacturers' Association data shows Tesla's eight-month European registration...",
+      timeAgo: "10 hours ago",
+      type: "negative",
+      avatar: "🇪🇺",
+    },
+    {
+      id: 2,
+      title: "Musk Acquires Billion-Dollar Stake After Compensation Vote",
+      summary:
+        "CEO Elon Musk purchased $1 billion worth of Tesla stock in mid-September, marking his first such acquisition since 2020. The move follows the board's proposed compensation package potentially worth $900 billion, which could make Musk the world's first...",
+      timeAgo: "4 hours ago",
+      type: "positive",
+      avatar: "💰",
+    },
+    {
+      id: 3,
+      title: "CFO Taneja Divests Nearly Million Shares Recently",
+      summary:
+        "Tesla CFO Vaibhav Taneja sold shares worth approximately $918,000 in another recent divestment, marking the latest in a series of similar transactions over the past year. The sale occurs ahead of Tesla's November 5 annual shareholder meeting.",
+      timeAgo: "9 hours ago",
+      type: "neutral",
+      avatar: "👤",
+    },
+  ]
+
+  return (
+    <div className="bg-card border border-border rounded-lg p-4">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-lg font-semibold">Recent Developments</h2>
+        <span className="text-sm text-muted-foreground">Updated 3 hours ago</span>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {developments.map((item) => (
+          <div
+            key={item.id}
+            className="bg-accent/30 rounded-lg p-4 hover:bg-accent/50 transition-colors cursor-pointer"
+          >
+            <div className="flex items-start space-x-3 mb-3">
+              <div className="flex-shrink-0">
+                <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center text-sm">
+                  {item.avatar}
+                </div>
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center space-x-2 mb-1">
+                  {item.type === "positive" && <div className="w-2 h-2 rounded-full bg-green-500"></div>}
+                  {item.type === "negative" && <div className="w-2 h-2 rounded-full bg-red-500"></div>}
+                  {item.type === "neutral" && <div className="w-2 h-2 rounded-full bg-gray-500"></div>}
+                  <span className="text-xs text-muted-foreground">{item.timeAgo}</span>
+                </div>
+              </div>
+            </div>
+
+            <h3 className="font-medium text-foreground mb-3 text-sm leading-tight">{item.title}</h3>
+
+            <p className="text-xs text-muted-foreground leading-relaxed line-clamp-4">{item.summary}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}