feat: add GeneralView

src/views/GeneralView.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import DataTable from "@/components/DataTable.vue";
+import TextBlock from "@/components/TextBlock.vue";
+
+const dob = new Date("1987-12-08");
+const locale = "en-US";
+const dateFormat = new Intl.DateTimeFormat(locale, {
+  year: "numeric",
+  month: "long",
+  day: "2-digit",
+});
+
+const height = 227;
+const weight = 175;
+
+const toImperial = (cm: number): string => {
+  const realFeet = (cm * 0.3937) / 12;
+  const feet = Math.floor(realFeet);
+  const inches = Math.round((realFeet - feet) * 12);
+
+  return `${feet}'${inches}"`;
+};
+
+const toInch = (cm: number): string => {
+  return `${Math.round(cm / 2.45)} in`;
+};
+
+const toLbs = (kg: number): number => {
+  const nearExact = kg / 0.45359237;
+  const lbs = Math.floor(nearExact);
+
+  return lbs;
+};
+
+const heads = ["Key", "Value"];
+const data = [
+  ["Full Name", "Viktor Kraastav"],
+  ["Date of Birth", dateFormat.format(dob)],
+  ["Sex/Gender", "male ♂️"],
+  ["Height", `${height} cm (${toImperial(height)})`],
+  ["Weight", `${weight} kg (${toLbs(weight)} lbs)`],
+];
+
+const sexHeads = ["Key", "Value"];
+const sexData = [
+  ["Sexuality", "Gay"],
+  ["Preferred position", "Bottom"]
+]
+</script>
+
+<template>
+  <DataTable :headings="heads" :data="data"></DataTable>
+
+  <TextBlock>
+    <h2>Personality</h2>
+    <p>
+      Viktor is not a man of many words, his manner of expression is simple and
+      direct, and sometimes a little blunt. This brash manner doesn't go down
+      well with everyone and regularly gets him into trouble.
+    </p>
+
+    <p>
+      At the same time, this is also an expression of his exuberant
+      self-confidence. He won't take any crap from anyone and doesn't hesitate
+      to give someone a piece of his mind. If that results in fisticuffs, he'll
+      deal with them.
+    </p>
+
+    <p>
+      All this may make him look like a really unpleasant fellow, but he greatly
+      appreciates the company of people he trusts. He is very selective about
+      whom he counts among this group of people, though. He appreciates personal
+      contact, preferably over a few beers at his favorite bar.
+    </p>
+
+    <p>
+      He likes things to be simple, which is why he is not a big fan of
+      high-tech. He does have a smartphone, but he hates using it as much as he
+      dislikes the fact he’s dependent on owning one.
+    </p>
+  </TextBlock>
+
+  <TextBlock>
+    <h2>Sexuality</h2>
+
+    <DataTable :headings="sexHeads" :data="sexData"></DataTable>
+
+    <p>
+      As a teenager, Viktor noticed that he felt a bit differently about the boys in his class. Especially in gym class, his eyes tended to linger longer on his classmates as they rough-housed in the locker room, as pubescent boys do. However, he could never quite come to terms with the idea that he might be a little different from his friends, who were all beginning to take an interest in girls, unlike him, who was more interested in his buddies.
+    </p>
+
+    <p>
+      As he got older, he slowly learned to come to terms with the fact that he saw more in his buddies than just friends. However, he still kept a low profile.
+    </p>
+
+    <p>
+      Until one evening at a party, when one of his friends complained that he wouldn't get any from his girlfriend. Both of them were already well intoxicated and Viktor made him the slurred proposal that he would help him out as his bro. At first his buddy was irritated by the offer, but eventually agreed. The two snuck into a bedroom at the host's place, where Viktor would let his buddy unload all the pent-up pressure inside him. He wouldn’t remember much of the party, but what he didn’t forget how good it felt to give himself to another man.
+    </p>
+  </TextBlock>
+</template>