Skip to content

Commit c19f74c

Browse files
jonx0037jonx0037
committed
feat: enhance governance comparison component with improved citation rendering and styling
1 parent 0ed447f commit c19f74c

File tree

2 files changed

+79
-15
lines changed

2 files changed

+79
-15
lines changed

‎src/components/governance-comparison.tsx‎

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import React from 'react';
22

33
const ComparisonTable = () => {
44
return (
5-
<div className="slide-container flex items-center justify-center">
6-
<div className="slide-content max-w-5xl w-full">
7-
<h2 className="text-3xl font-bold text-center text-indigo-900 mb-12">
5+
<div className="slide-container flex flex-col items-center justify-between min-h-screen p-8">
6+
<div className="slide-content max-w-6xl w-full">
7+
<h2 className="text-3xl font-bold text-center text-indigo-900 mb-8">
88
Platform Governance Evolution
99
</h2>
1010

11-
<div className="grid grid-cols-2 gap-8">
11+
<div className="grid grid-cols-2 gap-8 mb-8">
1212
{/* Pre-Musk Twitter */}
13-
<div className="card hover:shadow-xl transition-all duration-300 bg-gradient-to-br from-blue-50 to-white">
13+
<div className="card hover:shadow-xl transition-all duration-300 bg-gradient-to-br from-blue-50 to-white p-6 rounded-lg">
1414
<div className="flex items-center space-x-3 mb-6">
1515
<svg className="w-8 h-8 text-blue-500" viewBox="0 0 24 24">
1616
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" fill="currentColor"/>
@@ -20,8 +20,8 @@ const ComparisonTable = () => {
2020

2121
<ul className="space-y-4 mb-8">
2222
{[
23-
'Transparent moderation <span className="citation-hover" data-citation="Klonick, Kate. &quot;The New Governors: The People, Rules, and Processes Governing Online Speech.&quot; Harvard Law Review, vol. 131, no. 6, 2018, pp. 1598–1670.">[1]</span>',
24-
'Clear appeal process <span className="citation-hover" data-citation="Twitter. &quot;Q4 2022 Transparency Report.&quot; Transparency Center, Twitter, 2022, transparency.twitter.com/en/reports/2022-q4.">[2]</span>',
23+
'Transparent moderation <sup className="citation-ref group relative cursor-pointer"><span className="text-blue-600">[1]</span><span className="citation-popup opacity-0 group-hover:opacity-100 transition-opacity duration-200 absolute -top-16 left-0 bg-white p-3 rounded shadow-lg text-sm w-64 z-50">Klonick, Kate. "The New Governors: The People, Rules, and Processes Governing Online Speech." Harvard Law Review, vol. 131, no. 6, 2018, pp. 1598–1670.</span></sup>',
24+
'Clear appeal process <sup className="citation-ref group relative cursor-pointer"><span className="text-blue-600">[2]</span><span className="citation-popup opacity-0 group-hover:opacity-100 transition-opacity duration-200 absolute -top-16 left-0 bg-white p-3 rounded shadow-lg text-sm w-64 z-50">Twitter. "Q4 2022 Transparency Report." Transparency Center, Twitter, 2022.</span></sup>',
2525
'Human oversight',
2626
'Regular reports',
2727
'Community standards'
@@ -46,19 +46,19 @@ const ComparisonTable = () => {
4646
</div>
4747

4848
{/* Post-Musk X */}
49-
<div className="card hover:shadow-xl transition-all duration-300 bg-gradient-to-br from-slate-50 to-white">
49+
<div className="card hover:shadow-xl transition-all duration-300 bg-gradient-to-br from-slate-50 to-white p-6 rounded-lg">
5050
<div className="flex items-center space-x-3 mb-6">
5151
<span className="text-3xl font-bold text-slate-800">X</span>
5252
<h3 className="text-2xl font-bold text-slate-900">Post-Musk Era</h3>
5353
</div>
5454

5555
<ul className="space-y-4 mb-8">
5656
{[
57-
'Algorithmic filtering <span className="citation-hover" data-citation="Wang, Rui, et al. &quot;Empowered or Constrained in Platform Governance? An Analysis of Twitter Users\' Responses to Elon Musk\'s Takeover.&quot; Social Media + Society, vol. 10, no. 2, 2024, pp. 1–14.">[3]</span>',
57+
'Algorithmic filtering <sup className="citation-ref group relative cursor-pointer"><span className="text-blue-600">[3]</span><span className="citation-popup opacity-0 group-hover:opacity-100 transition-opacity duration-200 absolute -top-16 left-0 bg-white p-3 rounded shadow-lg text-sm w-64 z-50">Wang, Rui, et al. "Empowered or Constrained in Platform Governance? An Analysis of Twitter Users\' Responses to Elon Musk\'s Takeover." Social Media + Society, vol. 10, no. 2, 2024, pp. 1–14.</span></sup>',
5858
'Limited transparency',
59-
'Automated systems <span className="citation-hover" data-citation="Wang, Rui, et al. &quot;Empowered or Constrained in Platform Governance? An Analysis of Twitter Users\' Responses to Elon Musk\'s Takeover.&quot; Social Media + Society, vol. 10, no. 2, 2024, pp. 1–14.">[3]</span>',
59+
'Automated systems <sup className="citation-ref group relative cursor-pointer"><span className="text-blue-600">[3]</span><span className="citation-popup opacity-0 group-hover:opacity-100 transition-opacity duration-200 absolute -top-16 left-0 bg-white p-3 rounded shadow-lg text-sm w-64 z-50">Wang, Rui, et al. "Empowered or Constrained in Platform Governance? An Analysis of Twitter Users\' Responses to Elon Musk\'s Takeover." Social Media + Society, vol. 10, no. 2, 2024, pp. 1–14.</span></sup>',
6060
'Reduced oversight',
61-
'"Freedom of reach" <span className="citation-hover" data-citation="Musk, Elon. &quot;Interview with X News.&quot; X News, March 12, 2023, www.xnews.com/interview-elon-musk.">[4]</span>'
61+
'"Freedom of reach" <sup className="citation-ref group relative cursor-pointer"><span className="text-blue-600">[4]</span><span className="citation-popup opacity-0 group-hover:opacity-100 transition-opacity duration-200 absolute -top-16 left-0 bg-white p-3 rounded shadow-lg text-sm w-64 z-50">Musk, Elon. "Interview with X News." X News, March 12, 2023.</span></sup>'
6262
].map((item, index) => (
6363
<li key={index} className="flex items-center text-slate-700">
6464
<span className="w-2 h-2 bg-slate-500 rounded-full mr-3"></span>
@@ -81,12 +81,31 @@ const ComparisonTable = () => {
8181
</div>
8282

8383
{/* Key Insight */}
84-
<div className="mt-8 p-4 bg-indigo-50 rounded-lg border border-indigo-100 relative group">
84+
<div className="bg-indigo-50 rounded-lg p-4 border border-indigo-100 mb-8">
8585
<p className="text-center text-indigo-900 font-medium">
86-
A 47.8% decrease in appeal success rate suggests a significant shift in content moderation approach <span className="citation-hover" data-citation="Reuters. &quot;Content Moderation Staff Reduction under Musk.&quot; Reuters, December 12, 2023, www.reuters.com/tech.">[5]</span>
86+
A 47.8% decrease in appeal success rate suggests a significant shift in content moderation approach
87+
<sup className="citation-ref group relative cursor-pointer">
88+
<span className="text-blue-600">[5]</span>
89+
<span className="citation-popup opacity-0 group-hover:opacity-100 transition-opacity duration-200 absolute -top-16 left-0 bg-white p-3 rounded shadow-lg text-sm w-64 z-50">
90+
Reuters. "Content Moderation Staff Reduction under Musk." Reuters, December 12, 2023.
91+
</span>
92+
</sup>
8793
</p>
88-
<div className="opacity-0 group-hover:opacity-100 transition-opacity absolute -bottom-2 left-0 right-0 text-xs text-center text-slate-500 bg-white/90 py-1 rounded">
89-
Analysis based on <span className="citation-hover" data-citation="Klonick, Kate. &quot;The New Governors: The People, Rules, and Processes Governing Online Speech.&quot; Harvard Law Review, vol. 131, no. 6, 2018, pp. 1598–1670.">[1]</span> and <span className="citation-hover" data-citation="Wang, Rui, et al. &quot;Empowered or Constrained in Platform Governance? An Analysis of Twitter Users\' Responses to Elon Musk\'s Takeover.&quot; Social Media + Society, vol. 10, no. 2, 2024, pp. 1–14.">[3]</span>
94+
</div>
95+
96+
{/* Citations Section */}
97+
<div className="mt-auto pt-4 border-t border-gray-200">
98+
<h3 className="text-lg font-semibold text-gray-700 mb-2">References</h3>
99+
<div className="grid grid-cols-2 gap-4 text-sm text-gray-600">
100+
<div className="space-y-2">
101+
<p><span className="text-blue-600">[1]</span> Klonick, Kate. "The New Governors: The People, Rules, and Processes Governing Online Speech." <i>Harvard Law Review</i>, vol. 131, no. 6, 2018, pp. 1598–1670.</p>
102+
<p><span className="text-blue-600">[2]</span> Twitter. "Q4 2022 Transparency Report." <i>Transparency Center</i>, Twitter, 2022.</p>
103+
<p><span className="text-blue-600">[3]</span> Wang, Rui, et al. "Empowered or Constrained in Platform Governance? An Analysis of Twitter Users' Responses to Elon Musk's Takeover." <i>Social Media + Society</i>, vol. 10, no. 2, 2024, pp. 1–14.</p>
104+
</div>
105+
<div className="space-y-2">
106+
<p><span className="text-blue-600">[4]</span> Musk, Elon. "Interview with X News." <i>X News</i>, March 12, 2023.</p>
107+
<p><span className="text-blue-600">[5]</span> Reuters. "Content Moderation Staff Reduction under Musk." <i>Reuters</i>, December 12, 2023.</p>
108+
</div>
90109
</div>
91110
</div>
92111
</div>

‎src/styles/main.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,35 @@
4040
@apply bg-gradient-to-br from-blue-600 via-indigo-600 to-blue-800 text-white;
4141
}
4242

43+
/* Citation styles */
44+
.citation-ref {
45+
@apply inline-block ml-0.5 text-xs font-medium cursor-help;
46+
}
47+
48+
.citation-popup {
49+
@apply absolute -top-16 left-0 bg-white p-4 rounded-lg shadow-xl
50+
border border-gray-200 text-sm w-72 z-50
51+
transform -translate-x-1/2 left-1/2
52+
backdrop-filter backdrop-blur-sm bg-opacity-95;
53+
}
54+
55+
.citation-ref:hover .citation-popup {
56+
@apply opacity-100;
57+
}
58+
59+
.references-section {
60+
@apply mt-8 pt-6 border-t-2 border-gray-100
61+
grid grid-cols-2 gap-6 text-sm text-gray-600;
62+
}
63+
64+
.reference-item {
65+
@apply mb-3 leading-relaxed hover:bg-gray-50 p-2 rounded-lg transition-colors duration-200;
66+
}
67+
68+
.reference-number {
69+
@apply text-blue-600 font-medium mr-2;
70+
}
71+
4372
/* Menu styles */
4473
.slide-menu {
4574
@apply fixed inset-y-0 left-0 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out z-50;
@@ -225,4 +254,20 @@
225254
box-shadow: none;
226255
border: 1px solid #e2e8f0;
227256
}
257+
258+
/* Print-specific citation styles */
259+
.citation-popup {
260+
display: none !important;
261+
}
262+
263+
.references-section {
264+
break-inside: avoid;
265+
page-break-inside: avoid;
266+
border-top: 2px solid #e2e8f0;
267+
}
268+
269+
.reference-item {
270+
break-inside: avoid;
271+
page-break-inside: avoid;
272+
}
228273
}

0 commit comments

Comments
 (0)