From dd18b1fa6590aa465a4f05c463dec9fff7c3c451 Mon Sep 17 00:00:00 2001
From: Denny <denny.george90@gmail.com>
Date: Fri, 14 Jul 2023 12:15:56 +0530
Subject: [PATCH] feat: create ui to copy paste slurs for instagram and thread
 users. #297

---
 .../src/components/molecules/Footer.jsx       |   5 +-
 .../src/components/molecules/NavBar.jsx       |  23 +-
 .../src/pages/hidden-words-for-instagram.jsx  |  99 ++++++
 .../src/pages/hidden-words-for-thread.jsx     |  99 ++++++
 uli-website/src/slurs/hindi.json              | 117 +++++++
 uli-website/src/slurs/hinglish.json           | 303 ++++++++++++++++++
 uli-website/src/slurs/tamil.json              |  81 +++++
 7 files changed, 714 insertions(+), 13 deletions(-)
 create mode 100644 uli-website/src/pages/hidden-words-for-instagram.jsx
 create mode 100644 uli-website/src/pages/hidden-words-for-thread.jsx
 create mode 100644 uli-website/src/slurs/hindi.json
 create mode 100644 uli-website/src/slurs/hinglish.json
 create mode 100644 uli-website/src/slurs/tamil.json

diff --git a/uli-website/src/components/molecules/Footer.jsx b/uli-website/src/components/molecules/Footer.jsx
index a3333436..9808ee68 100644
--- a/uli-website/src/components/molecules/Footer.jsx
+++ b/uli-website/src/components/molecules/Footer.jsx
@@ -10,13 +10,14 @@ export default function Footer() {
         margin={{ top: "small", bottom: "small" }}
         width={"large"}
         direction={"row-responsive"}
-        align={"center"}
         gap="small"
       >
         <NavLink to="https://twitter.com/tattlemade">Twitter</NavLink>
         <NavLink to="/privacy-policy">Privacy Policy</NavLink>
         <NavLink to="/blog">Blog</NavLink>
-        <NavLink to="https://github.com/tattle-made/OGBV/tree/main/uli-website">GitHub</NavLink>
+        <NavLink to="https://github.com/tattle-made/OGBV/tree/main/uli-website">
+          GitHub
+        </NavLink>
       </Box>
     </Box>
   );
diff --git a/uli-website/src/components/molecules/NavBar.jsx b/uli-website/src/components/molecules/NavBar.jsx
index 8673c6a5..c6e96a5e 100644
--- a/uli-website/src/components/molecules/NavBar.jsx
+++ b/uli-website/src/components/molecules/NavBar.jsx
@@ -12,7 +12,6 @@ const NavBarByLang = {
       <NavLink to={"/about"}>About</NavLink>
       <NavLink to={"/faq"}>FAQ</NavLink>
       <NavLink to={"/research"}>Research</NavLink>
-
     </Box>
   ),
   hi: (
@@ -53,17 +52,19 @@ export default function NavBar() {
   }, []);
 
   return (
-    <Box align="center" pad={"small"}>
+    <Box align="center" pad={"medium"}>
       <Box width={"large"} direction={"row-responsive"} gap={"small"}>
-        <NavLink to={"/"}>
-          <Text size={"small"}>English</Text>
-        </NavLink>
-        <NavLink to={"/ta/"}>
-          <Text size={"small"}>Tamil</Text>
-        </NavLink>
-        <NavLink to={"/hi/"}>
-          <Text size={"small"}>Hindi</Text>
-        </NavLink>
+        <Text>
+          <NavLink to={"/"}>
+            <Text size={"small"}>English</Text>
+          </NavLink>{" "}
+          <NavLink to={"/ta/"}>
+            <Text size={"small"}>Tamil</Text>
+          </NavLink>{" "}
+          <NavLink to={"/hi/"}>
+            <Text size={"small"}>Hindi</Text>
+          </NavLink>
+        </Text>
       </Box>
       <Box
         margin={{ top: "small" }}
diff --git a/uli-website/src/pages/hidden-words-for-instagram.jsx b/uli-website/src/pages/hidden-words-for-instagram.jsx
new file mode 100644
index 00000000..2a7a6bbd
--- /dev/null
+++ b/uli-website/src/pages/hidden-words-for-instagram.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import {
+  Box,
+  Heading,
+  Text,
+  Paragraph,
+  Anchor,
+  CheckBoxGroup,
+  Button,
+  TextArea,
+} from "grommet";
+import AppShell from "../components/molecules/AppShell";
+import slurHindi from "../slurs/hindi.json";
+import slurHinglish from "../slurs/hinglish.json";
+import slurTamil from "../slurs/tamil.json";
+import { CTALinkPlainPrimary } from "../components/atoms/UliCore";
+
+const options = {
+  hindi: {
+    label: "Hindi",
+    slurs: slurHindi,
+  },
+  tamil: {
+    label: "Tamil",
+    slurs: slurTamil,
+  },
+  hinglish: {
+    label: "Hinglish",
+    slurs: slurHinglish,
+  },
+};
+
+const HiddenWordsForInstagram = () => {
+  const selectOptions = Object.keys(options).map((option) => {
+    return { label: options[option].label, value: option };
+  });
+  const defaultOptions = selectOptions.map((option) => option.value);
+  const [choices, setChoices] = useState(defaultOptions);
+
+  function clickCopyToClipboard() {
+    navigator.clipboard.writeText(
+      choices.map((choice) => options[choice].slurs.join(", ")).join(", ")
+    );
+  }
+
+  return (
+    <AppShell>
+      <Box align="center" margin={"large"}>
+        <Box width={"large"}>
+          <Heading level={1}>Hidden Words for Instagram</Heading>
+          <Paragraph fill>
+            Instagram now allows you to filter out words that you don't want to
+            see on your feed. Uli's slur list can assist you in adding a list of
+            slurs in Indian languages. If you are being targetted or abused on
+            social media in Indian languages, consider adding these words to
+            your list of "hidden words" on Instagram
+          </Paragraph>
+
+          <Box direction="row-responsive" gap={"medium"} align="center">
+            <Text> Choose Languages</Text>
+            <CheckBoxGroup
+              direction={"row-responsive"}
+              gap="small"
+              options={selectOptions}
+              value={choices}
+              onChange={({ value, option }) => {
+                setChoices(value);
+              }}
+            ></CheckBoxGroup>
+            <Box flex={"grow"}></Box>
+            <Button onClick={clickCopyToClipboard}>
+              <CTALinkPlainPrimary>
+                <Text>Copy to Clipboard</Text>
+              </CTALinkPlainPrimary>
+            </Button>
+          </Box>
+          <Box height={"1.2em"} />
+          <Box height={"50vh"}>
+            <TextArea
+              fill
+              value={choices
+                .map((choice) => options[choice].slurs.join(", "))
+                .join(", ")}
+            />
+          </Box>
+          <Heading level={2}>Contribute</Heading>
+          <Paragraph fill margin={"none"}>
+            These slurs were crowdsourced from social media users in India who
+            are on the receiving end of abuse. If you would like to share your
+            list of words with us and grow this list, reach out to us at
+            uli_support@tattle.co.in
+          </Paragraph>
+        </Box>
+      </Box>
+    </AppShell>
+  );
+};
+
+export default HiddenWordsForInstagram;
diff --git a/uli-website/src/pages/hidden-words-for-thread.jsx b/uli-website/src/pages/hidden-words-for-thread.jsx
new file mode 100644
index 00000000..5cb51113
--- /dev/null
+++ b/uli-website/src/pages/hidden-words-for-thread.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import {
+  Box,
+  Heading,
+  Text,
+  Paragraph,
+  Anchor,
+  CheckBoxGroup,
+  Button,
+  TextArea,
+} from "grommet";
+import AppShell from "../components/molecules/AppShell";
+import slurHindi from "../slurs/hindi.json";
+import slurHinglish from "../slurs/hinglish.json";
+import slurTamil from "../slurs/tamil.json";
+import { CTALinkPlainPrimary } from "../components/atoms/UliCore";
+
+const options = {
+  hindi: {
+    label: "Hindi",
+    slurs: slurHindi,
+  },
+  tamil: {
+    label: "Tamil",
+    slurs: slurTamil,
+  },
+  hinglish: {
+    label: "Hinglish",
+    slurs: slurHinglish,
+  },
+};
+
+const HiddenWordsForThread = () => {
+  const selectOptions = Object.keys(options).map((option) => {
+    return { label: options[option].label, value: option };
+  });
+  const defaultOptions = selectOptions.map((option) => option.value);
+  const [choices, setChoices] = useState(defaultOptions);
+
+  function clickCopyToClipboard() {
+    navigator.clipboard.writeText(
+      choices.map((choice) => options[choice].slurs.join(", ")).join(", ")
+    );
+  }
+
+  return (
+    <AppShell>
+      <Box align="center" margin={"large"}>
+        <Box width={"large"}>
+          <Heading level={1}>Hidden Words for Thread</Heading>
+          <Paragraph fill>
+            Meta's Thread now allows you to filter out words that you don't want
+            to see on your feed. Uli's slur list can assist you in adding a list
+            of slurs in Indian languages. If you are being targetted or abused
+            on social media in Indian languages, consider adding these words to
+            your list of "hidden words" on Thread
+          </Paragraph>
+
+          <Box direction="row-responsive" gap={"medium"} align="center">
+            <Text> Choose Languages</Text>
+            <CheckBoxGroup
+              direction={"row-responsive"}
+              gap="small"
+              options={selectOptions}
+              value={choices}
+              onChange={({ value, option }) => {
+                setChoices(value);
+              }}
+            ></CheckBoxGroup>
+            <Box flex={"grow"}></Box>
+            <Button onClick={clickCopyToClipboard}>
+              <CTALinkPlainPrimary>
+                <Text>Copy to Clipboard</Text>
+              </CTALinkPlainPrimary>
+            </Button>
+          </Box>
+          <Box height={"1.2em"} />
+          <Box height={"50vh"}>
+            <TextArea
+              fill
+              value={choices
+                .map((choice) => options[choice].slurs.join(", "))
+                .join(", ")}
+            />
+          </Box>
+          <Heading level={2}>Contribute</Heading>
+          <Paragraph fill>
+            These slurs were crowdsourced from social media users in India who
+            are on the receiving end of abuse. If you would like to share your
+            list of words with us and grow this list, reach out to us at
+            uli_support@tattle.co.in
+          </Paragraph>
+        </Box>
+      </Box>
+    </AppShell>
+  );
+};
+
+export default HiddenWordsForThread;
diff --git a/uli-website/src/slurs/hindi.json b/uli-website/src/slurs/hindi.json
new file mode 100644
index 00000000..35e8a970
--- /dev/null
+++ b/uli-website/src/slurs/hindi.json
@@ -0,0 +1,117 @@
+[
+  "जिहादी",
+  "छक्का",
+  "छिनाल",
+  "रंडी",
+  "रण्डी",
+  "रांड",
+  "रंडीखाना",
+  "रण्डी रोना",
+  "लुल्ली",
+  "गांड",
+  "गा#",
+  "कुतिया",
+  "कुत्ती",
+  "बत्तमीज़",
+  "कुल्टा",
+  "हरामजादी",
+  "साली",
+  "चो#",
+  "चुदाई",
+  "मा के भोसड़े",
+  "भोस्डीके",
+  "भोछडी वाला",
+  "लोड़ू",
+  "बहन चोद",
+  "मादरचोद",
+  "लानती",
+  "छुतीये",
+  "चूतिये",
+  "चूत",
+  "लौड़ा",
+  "लौड़े",
+  "चरित्रहीन",
+  "लिब्राण्डू",
+  "नंगी पुंगी",
+  "पागल औरत",
+  "बाज़ारू औरत",
+  "बलात्कार",
+  "बदसूरत",
+  "मुजरा",
+  "जाहिल औरत",
+  "औरत-ए-जाहिल",
+  "भोसड़ीwala",
+  "भोसड़ीवाला",
+  "चंडाल चौकड़ी",
+  "म्लेच्छा",
+  "सूअर",
+  "सूअर की औलाद",
+  "दोगली",
+  "🏹🏹",
+  "पनौती",
+  "हरामी",
+  "गधी",
+  "बुरखा धत्त",
+  "बुल्ली",
+  "कलमुंही",
+  "पिछवाड़ा",
+  "काम वाली बाई",
+  "पैर की जूती",
+  "नाल",
+  "गंदी नाली",
+  "हगना",
+  "सुल्ली",
+  "हिज़रापंती",
+  "नाचने वाली",
+  "तवाइफ़",
+  "सौ टका टंच माल",
+  "किन्नर",
+  "गद्दार",
+  "चमचा",
+  "चमची",
+  "आतंकवादी",
+  "मुलिया",
+  "कटवा",
+  "चाटुकार",
+  "बहन की लोड़ी",
+  "चुस्लिम",
+  "चुस्लामि",
+  "चुसल्मान",
+  "चूस",
+  "भीमटा",
+  "भीमटी",
+  "बैल बुद्धि",
+  "हलाला",
+  "भद्दी औरत",
+  "भांड औरत",
+  "भाड़े काटट्टू",
+  "दो कौड़ी की औरत",
+  "घटिया औरत",
+  "बेहूदा औरत",
+  "चालू औरत",
+  "झूठी औरत",
+  "मर क्यों नहीं जाती",
+  "नल्ली",
+  "भूतनी के",
+  "चूत के बाल",
+  "मादरजात",
+  "भड़वा",
+  "चूची",
+  "टट्टी",
+  "गटर पैदाइश",
+  "मुँह में ले",
+  "मूत",
+  "नाजायज़",
+  "कटा लुंड",
+  "काला टेंट",
+  "जूता खायेगी",
+  "बुरखे वाली",
+  "काली कलूटी",
+  "काले तवे",
+  "मोटी भैंस",
+  "देहातन",
+  "देहाती औरत",
+  "गणिका",
+  "हबशी",
+  "ओला हु उबर"
+]
diff --git a/uli-website/src/slurs/hinglish.json b/uli-website/src/slurs/hinglish.json
new file mode 100644
index 00000000..94f1c929
--- /dev/null
+++ b/uli-website/src/slurs/hinglish.json
@@ -0,0 +1,303 @@
+[
+  "ABLANARI",
+  "AblaNari",
+  "ablanari",
+  "chakka",
+  "jihidis",
+  "jihadis",
+  "jihadi",
+  "Jihidis",
+  "Jihadis",
+  "jihadi",
+  "zehadi",
+  "jehadan",
+  "jihadinon",
+  "Chakko",
+  "chakki",
+  "chaka",
+  "Chinal",
+  "Randi",
+  "ramdi",
+  "Randie",
+  "randya",
+  "randikhana",
+  "r&d-khana",
+  "randi ke beej",
+  "Lulli",
+  "Gasti",
+  "Meetha",
+  "Halwa",
+  "Gud",
+  "Gaandu",
+  "Gaand",
+  "Gandiaal",
+  "Dheela Lun@",
+  "lodu",
+  "kutiya",
+  "kutti",
+  "Chudail",
+  "Badchalan",
+  "Battameez",
+  "kulta",
+  "haramjadi",
+  "dyan",
+  "saali",
+  "sali",
+  "chod",
+  "chodu bhagat",
+  "chudai",
+  "chooda",
+  "chuda",
+  "Bhdsk",
+  "2BHK",
+  "Bhosi ke",
+  "bsdk",
+  "bhonsdi ke",
+  "bhosad",
+  "bhosdiwale",
+  "maa ka bhosra",
+  "Lodu",
+  "bhenchod",
+  "Madarchod",
+  "Maderchod",
+  "mcp",
+  "mc",
+  "Lanti",
+  "choo$iya",
+  "chutiye",
+  "chutiya",
+  "Chut",
+  "hutiye",
+  "chutie",
+  "chutia",
+  "chut ke dhakkan",
+  "chut marli",
+  "chutan",
+  "<3da",
+  "Lavde",
+  "Gandu",
+  "Rakhail",
+  "librandu",
+  "chal phut",
+  "nangi poongi",
+  "pagal aurat",
+  "bazaru",
+  "bazari aurat",
+  "ola hi uber hai",
+  "balatkar",
+  "Ugly",
+  "Mujra",
+  "mujra",
+  "jaahil aurat",
+  "Mulli",
+  "hilana",
+  "hilaogi",
+  "Mlechcha",
+  "Suar",
+  "suar ki aulad",
+  "doghli",
+  "Panauti",
+  "panooti",
+  "harami",
+  "gadhi",
+  "रनडwa",
+  "🅱️ulli",
+  "kalmuhi",
+  "pichwada",
+  "jhadu",
+  "bai",
+  "kaam wali bai",
+  "pair ki jutti",
+  "naali",
+  "hagna",
+  "tukde tukde gang",
+  "Sulli",
+  "नाचने वाली",
+  "Tawaif",
+  "sau taka tunch maal",
+  "Skirt waali bai",
+  "Dhimmi hood",
+  "Dhimmihood",
+  "izzlam",
+  "gaddar",
+  "chamcha",
+  "chamchi",
+  "aatankwadi",
+  "Mulliya",
+  "Uncut",
+  "chatukar",
+  "Bahan Ke loudi",
+  "Kachra",
+  "Chuslim",
+  "chuslami",
+  "Chusalmans",
+  "chus",
+  "Bhimta",
+  "bheem-meem walas",
+  "bail budhi",
+  "Budhdhi",
+  "हलाला",
+  "bhadi aurat",
+  "bhanndh aurat",
+  "bhadi ka tattu",
+  "2 Kaudi ki aurat",
+  "Gatiya",
+  "Ghatiya aurat",
+  "behuda aurat",
+  "chalu aurat",
+  "jhuti aurat",
+  "Kaali aurat",
+  "Kaali bhaand",
+  "marr kyun nahi jaati",
+  "nalli",
+  "dimaag se paidal",
+  "bhootni",
+  "bhootni ke",
+  "choot ke baal",
+  "madarjaat",
+  "bhadva",
+  "bhadvi",
+  "bhandve",
+  "chuchi",
+  "tatti",
+  "maa ka boba chusu",
+  "mooh",
+  "munh mein le",
+  "mutth",
+  "najayaz paidaish",
+  "najayaz aulaad",
+  "Gutter ki paidaish",
+  "kata Lund",
+  "kala tent",
+  "joota khayegi",
+  "burkhe waali",
+  "ladki kahin ka",
+  "victim card",
+  "Aurat card",
+  "kali kalutti",
+  "Kale tawe",
+  "naali saaf kar",
+  "moti bhains",
+  "sukkhi haddi",
+  "Pataka",
+  "choodiyan pehen lo",
+  "abba ka naam",
+  "Ganika",
+  "gaand phadna",
+  "chewtypa",
+  "trocuty_act",
+  "RandiKutiya",
+  "sulli",
+  "Rice bags",
+  "ola u uber",
+  "lovejihad",
+  "dull-it",
+  "toxic aunty",
+  "Presstitutes",
+  "libtard",
+  "bimbo",
+  "slims",
+  "Black Pepper",
+  "faggot",
+  "Sissy",
+  "whore",
+  "chrislamocommies",
+  "piddilover",
+  "Dynast Sycophants",
+  "Deshdrohi Chinese",
+  "Pak agents",
+  "Chinese Corona",
+  "Chinks",
+  "chinky",
+  "Feminazi",
+  "Mulli",
+  "R@ndi",
+  "halala",
+  "Half M",
+  "Scumreds",
+  "scumbags",
+  "burnol",
+  "anti national tukde",
+  "pheminist",
+  "dented-painted",
+  "Muzlim",
+  "Buzlim",
+  "Izzlam",
+  "pissfull",
+  "Simp",
+  "Bitch",
+  "Ms",
+  "sekoolar",
+  "sickular",
+  "sc0undrel",
+  "R@pe",
+  "R@p3",
+  "Characterless woman",
+  "Drama Queen",
+  "Ferrorists",
+  "Cunt",
+  "Slut",
+  "pussy",
+  "ugly",
+  "stupid",
+  "promiscuous",
+  "crazy",
+  "fat",
+  "fag",
+  "homo",
+  "hoe",
+  "motherfucker",
+  "sisterfucker",
+  "bastard",
+  "b@st@rd",
+  "bint",
+  "dyke",
+  "gash",
+  "muslimette",
+  "muttah",
+  "scag",
+  "gender nigger",
+  "assfucker",
+  "boobs",
+  "boobies",
+  "Melons",
+  "lesbain",
+  "moslem",
+  "nasty",
+  "redlight",
+  "nymph",
+  "piss",
+  "pimp",
+  "poop",
+  "pube",
+  "puke",
+  "retarded",
+  "slave",
+  "sissy",
+  "ola uh uber",
+  "pu55i",
+  "pu55y",
+  "mothafuck",
+  "mothafucka",
+  "mothafuckaz",
+  "mothafucked",
+  "mothafucker",
+  "mothafuckin",
+  "mothafucking",
+  "mothafuckings",
+  "motherfuck",
+  "motherfucked",
+  "motherfucker",
+  "motherfuckin",
+  "motherfucking",
+  "motherfuckings",
+  "lesbain",
+  "lesbayn",
+  "lesbian",
+  "lesbin",
+  "lesbo",
+  "nastyslut",
+  "nastywhore",
+  "nastybitch",
+  "nastyho"
+]
diff --git a/uli-website/src/slurs/tamil.json b/uli-website/src/slurs/tamil.json
new file mode 100644
index 00000000..f4646d72
--- /dev/null
+++ b/uli-website/src/slurs/tamil.json
@@ -0,0 +1,81 @@
+[
+  "முட்டாஉபி",
+  "பெரியாராவது_மயிராவது",
+  "பாலியல்_ஜல்சா_கட்சி",
+  "பொம்பள பொருக்கி",
+  "ங்கோத்தா",
+  "கோத்தா",
+  "கோத்தா",
+  "கொம்மா",
+  "தாயோளி",
+  "தேவ்டியா பையா",
+  "தேவ்டியா",
+  "பொட்டை",
+  "சாமான்",
+  "சூத்து",
+  "லெஸ்பியன்",
+  "ஊம்பு",
+  "புண்ட",
+  "திருட்டு_பள்ளன்",
+  "ஐட்டம்",
+  "அயிட்டம்",
+  "சாமான்",
+  "கூதி",
+  "ஆட்டக்காரி",
+  "வேசை",
+  "வேச",
+  "பொதுச் சொத்து",
+  "ஊர் மேய்றது",
+  "நடத்தை கெட்டது",
+  "பொட்டை",
+  "க்ரோஸ்ஸி",
+  "தாயோளி",
+  "குஜ்ஜிலீஸ்",
+  "மாங்கா",
+  "கோழி",
+  "முலை",
+  "பறத்தாயோலி",
+  "ஓக்க",
+  "தேவடியா மவன்",
+  "தேவடியா பசங்களா",
+  "புண்டை",
+  "புண்ட",
+  "பொட்டை நாய்",
+  "வாயில பூல விடுவேன்",
+  "தேவிடியா புண்ட",
+  "புண்டை சைடு",
+  "உங்கம்மாவை ஓக்க",
+  "தேவிடியாளுக்கு பொறந்தவன்",
+  "சூத்தடி",
+  "ஒன்பது",
+  "பொன்ஸ்",
+  "ஆப்ப மாமி",
+  "கம்பு துண்டு",
+  "கல்லு",
+  "ஆம்புள கள்ளன்",
+  "அலி",
+  "அரவாணி",
+  "பின்துவாரி",
+  "பொடியன் மாஸ்டர்",
+  "டிகி",
+  "குரும்ப",
+  "அத்தை",
+  "லூசு",
+  "கூFire",
+  "ஓத்த",
+  "Sunflowerண்டை",
+  "லூசு கூ",
+  "OSISORU",
+  "thevdiyaa",
+  "thevdiya",
+  "gommala",
+  "Pundamavane",
+  "pundai",
+  "otha",
+  "Koodhi",
+  "pottai",
+  "Potta Alith",
+  "Aththai",
+  "athai",
+  "loosu"
+]