Skip to content

Commit fc4f355

Browse files
jonx0037jonx0037
committed
refactor: improve citation styling in governance comparison slide
1 parent d3a1825 commit fc4f355

File tree

1 file changed

+70
-54
lines changed

1 file changed

+70
-54
lines changed

‎src/components/governance-comparison.tsx‎

Lines changed: 70 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,36 @@ const ComparisonTable = () => {
1919
</div>
2020

2121
<ul className="space-y-4 mb-8">
22-
{[
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 -bottom-24 left-0 bg-white p-4 rounded-lg shadow-xl text-sm w-72 z-50 border border-blue-100">[1]Klonick, Kate. "The New Governors: The People, Rules, and Processes Governing Online Speech." Harvard Law Review, December 15, 2018.</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 -bottom-24 left-0 bg-white p-4 rounded-lg shadow-xl text-sm w-72 z-50 border border-blue-100">[2]Twitter. "Q4 2022 Transparency Report." Transparency Center, Twitter, December 31, 2022.</span></sup>',
25-
'Human oversight',
26-
'Regular reports',
27-
'Community standards'
28-
].map((item, index) => (
29-
<li key={index} className="flex items-center text-slate-700">
30-
<span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
31-
<span dangerouslySetInnerHTML={{ __html: item }}></span>
32-
</li>
33-
))}
22+
<li className="flex items-start text-slate-700">
23+
<span className="w-2 h-2 bg-blue-500 rounded-full mr-3 mt-2"></span>
24+
<div>
25+
<span>Transparent moderation</span>
26+
<div className="text-sm text-blue-600 hover:text-blue-800 transition-colors duration-200">
27+
[1]Klonick, Kate. "The New Governors: The People, Rules, and Processes Governing Online Speech." Harvard Law Review, December 15, 2018.
28+
</div>
29+
</div>
30+
</li>
31+
<li className="flex items-start text-slate-700">
32+
<span className="w-2 h-2 bg-blue-500 rounded-full mr-3 mt-2"></span>
33+
<div>
34+
<span>Clear appeal process</span>
35+
<div className="text-sm text-blue-600 hover:text-blue-800 transition-colors duration-200">
36+
[2]Twitter. "Q4 2022 Transparency Report." Transparency Center, Twitter, December 31, 2022.
37+
</div>
38+
</div>
39+
</li>
40+
<li className="flex items-center text-slate-700">
41+
<span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
42+
<span>Human oversight</span>
43+
</li>
44+
<li className="flex items-center text-slate-700">
45+
<span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
46+
<span>Regular reports</span>
47+
</li>
48+
<li className="flex items-center text-slate-700">
49+
<span className="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
50+
<span>Community standards</span>
51+
</li>
3452
</ul>
3553

3654
<div className="bg-blue-100 rounded-lg p-4 space-y-2">
@@ -53,18 +71,41 @@ const ComparisonTable = () => {
5371
</div>
5472

5573
<ul className="space-y-4 mb-8">
56-
{[
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 -bottom-24 left-0 bg-white p-4 rounded-lg shadow-xl text-sm w-72 z-50 border border-blue-100">[3]Wang, Rui, et al. "Empowered or Constrained in Platform Governance?" Social Media + Society, March 15, 2024.</span></sup>',
58-
'Limited transparency',
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 -bottom-24 left-0 bg-white p-4 rounded-lg shadow-xl text-sm w-72 z-50 border border-blue-100">[3]Wang, Rui, et al. "Empowered or Constrained in Platform Governance?" Social Media + Society, March 15, 2024.</span></sup>',
60-
'Reduced oversight',
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 -bottom-24 left-0 bg-white p-4 rounded-lg shadow-xl text-sm w-72 z-50 border border-blue-100">[4]Musk, Elon. "Interview with X News." X News, March 12, 2023.</span></sup>'
62-
].map((item, index) => (
63-
<li key={index} className="flex items-center text-slate-700">
64-
<span className="w-2 h-2 bg-slate-500 rounded-full mr-3"></span>
65-
<span dangerouslySetInnerHTML={{ __html: item }}></span>
66-
</li>
67-
))}
74+
<li className="flex items-start text-slate-700">
75+
<span className="w-2 h-2 bg-slate-500 rounded-full mr-3 mt-2"></span>
76+
<div>
77+
<span>Algorithmic filtering</span>
78+
<div className="text-sm text-blue-600 hover:text-blue-800 transition-colors duration-200">
79+
[3]Wang, Rui, et al. "Empowered or Constrained in Platform Governance?" Social Media + Society, March 15, 2024.
80+
</div>
81+
</div>
82+
</li>
83+
<li className="flex items-center text-slate-700">
84+
<span className="w-2 h-2 bg-slate-500 rounded-full mr-3"></span>
85+
<span>Limited transparency</span>
86+
</li>
87+
<li className="flex items-start text-slate-700">
88+
<span className="w-2 h-2 bg-slate-500 rounded-full mr-3 mt-2"></span>
89+
<div>
90+
<span>Automated systems</span>
91+
<div className="text-sm text-blue-600 hover:text-blue-800 transition-colors duration-200">
92+
[3]Wang, Rui, et al. "Empowered or Constrained in Platform Governance?" Social Media + Society, March 15, 2024.
93+
</div>
94+
</div>
95+
</li>
96+
<li className="flex items-center text-slate-700">
97+
<span className="w-2 h-2 bg-slate-500 rounded-full mr-3"></span>
98+
<span>Reduced oversight</span>
99+
</li>
100+
<li className="flex items-start text-slate-700">
101+
<span className="w-2 h-2 bg-slate-500 rounded-full mr-3 mt-2"></span>
102+
<div>
103+
<span>"Freedom of reach"</span>
104+
<div className="text-sm text-blue-600 hover:text-blue-800 transition-colors duration-200">
105+
[4]Musk, Elon. "Interview with X News." X News, March 12, 2023.
106+
</div>
107+
</div>
108+
</li>
68109
</ul>
69110

70111
<div className="bg-slate-100 rounded-lg p-4 space-y-2">
@@ -82,36 +123,11 @@ const ComparisonTable = () => {
82123

83124
{/* Key Insight */}
84125
<div className="bg-indigo-50 rounded-lg p-4 border border-indigo-100 mb-8">
85-
<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
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 -bottom-24 left-0 bg-white p-4 rounded-lg shadow-xl text-sm w-72 z-50 border border-blue-100">
90-
[5]Reuters. "Content Moderation Staff Reduction under Musk." Reuters, December 12, 2023.
91-
</span>
92-
</sup>
93-
</p>
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-4">References</h3>
99-
<div className="grid grid-cols-1 gap-3 text-sm text-gray-600">
100-
<p className="p-2 hover:bg-gray-50 rounded-lg transition-colors duration-200">
101-
<span className="text-blue-600 font-semibold">[1]</span> Klonick, Kate. "The New Governors: The People, Rules, and Processes Governing Online Speech." Harvard Law Review, December 15, 2018.
102-
</p>
103-
<p className="p-2 hover:bg-gray-50 rounded-lg transition-colors duration-200">
104-
<span className="text-blue-600 font-semibold">[2]</span> Twitter. "Q4 2022 Transparency Report." Transparency Center, Twitter, December 31, 2022.
105-
</p>
106-
<p className="p-2 hover:bg-gray-50 rounded-lg transition-colors duration-200">
107-
<span className="text-blue-600 font-semibold">[3]</span> Wang, Rui, et al. "Empowered or Constrained in Platform Governance?" Social Media + Society, March 15, 2024.
108-
</p>
109-
<p className="p-2 hover:bg-gray-50 rounded-lg transition-colors duration-200">
110-
<span className="text-blue-600 font-semibold">[4]</span> Musk, Elon. "Interview with X News." X News, March 12, 2023.
111-
</p>
112-
<p className="p-2 hover:bg-gray-50 rounded-lg transition-colors duration-200">
113-
<span className="text-blue-600 font-semibold">[5]</span> Reuters. "Content Moderation Staff Reduction under Musk." Reuters, December 12, 2023.
114-
</p>
126+
<div className="text-center text-indigo-900 font-medium flex flex-col items-center">
127+
<p>A 47.8% decrease in appeal success rate suggests a significant shift in content moderation approach</p>
128+
<div className="text-sm text-blue-600 hover:text-blue-800 transition-colors duration-200 mt-2">
129+
[5]Reuters. "Content Moderation Staff Reduction under Musk." Reuters, December 12, 2023.
130+
</div>
115131
</div>
116132
</div>
117133
</div>

0 commit comments

Comments
 (0)