feat: using styles with stitches

.prettierrc

@@ -1,7 +1,7 @@
 {
-  "semi": false,
+  "semi": true,
   "printWidth": 120,
   "singleQuote": true,
   "trailingComma": "es5",
-  "bracketSpacing": false
+  "bracketSpacing": true
 }

package.json

@@ -25,16 +25,19 @@
   "scripts": {
     "clean": "rimraf .parcel-cache dist",
     "prebuild": "npm run clean",
-    "build": "NODE_ENV=production parcel build",
+    "build": "NODE_ENV=production parcel build --reporter @parcel/reporter-bundle-analyzer",
+    "prestart": "npm run clean",
     "start": "parcel watch",
     "test": "jest"
   },
   "dependencies": {
-    "browser-monads-ts": "^1.2.5",
-    "clsx": "^1.1.1"
+    "@radix-ui/react-aspect-ratio": "^0.1.4",
+    "@stitches/react": "^1.2.7",
+    "browser-monads-ts": "^1.2.5"
   },
   "devDependencies": {
     "@parcel/packager-ts": "^2.3.2",
+    "@parcel/reporter-bundle-analyzer": "^2.3.2",
     "@parcel/transformer-typescript-types": "^2.3.2",
     "@types/react": "^17.0.39",
     "parcel": "^2.3.2",

src/components/icons/youtube-icon.tsx

@@ -0,0 +1,20 @@
+// Dependencies
+import * as React from 'react';
+
+function YouTubeIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg height="1em" viewBox="0 0.03 2498 2502.47" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M0 1864.11v.11c1.5 55.5 2 111.32 11.32 166.47 9.92 58.35 24.1 115.25 51.15 168.21q54.86 107.52 150.21 181.66c45.52 35.5 95.25 63.69 150.3 81.47 80.26 25.89 163.07 35.81 247.09 36.3 52.42.33 104.81 1.64 157.25 1.42 380.82-1.6 761.65 2.75 1142.49-2.35 50.53-.68 100.24-6.85 149.84-15.92 95.06-17.4 179.07-58 250.95-122.09 83.77-74.71 140.29-166.16 165.81-276.52 16.69-72.14 20.87-145.32 21.58-218.77v-14.65c0-5.68-2.16-1247.91-2.36-1264.33-.55-45.1-3.88-89.87-12.33-134.25-10.29-54.08-24.82-106.78-50.71-155.7-27.35-51.7-61.6-98.17-104-138.79-64.89-62.23-139.78-106.23-227-129.51-78.74-21-159.07-25.68-240-25.6a2.45 2.45 0 0 1-.45-1.24H636.4c0 .42 0 .83-.07 1.24-45.93.84-91.92.49-137.61 6.16-50.05 6.22-99.63 15.59-147 33.09-74.62 27.6-139.46 70.59-194.84 128-62.75 65-107 140.22-130.44 227.79C5.49 474.44.93 554.12.82 634.37"
+        fill="#fff"
+      />
+      <path d="M0 .79h2498v2498H0z" fill="none" />
+      <path
+        d="m1293.24 1938.65-409.54-7.49c-132.6-2.61-265.53 2.6-395.53-24.44-197.76-40.4-211.77-238.49-226.43-404.65-20.2-233.6-12.38-471.44 25.74-703.09C309 669 393.69 591.44 524.66 583c442.12-30.63 887.18-27 1328.32-12.71 46.59 1.31 93.5 8.47 139.44 16.62 226.77 39.75 232.3 264.23 247 453.2 14.66 190.92 8.47 382.82-19.55 572.44-22.48 157-65.49 288.66-247 301.37-227.42 16.62-449.62 30-677.68 25.74.01-1.01-1.3-1.01-1.95-1.01zm-240.77-397.48c171.38-98.4 339.49-195.16 509.89-292.9-171.7-98.4-339.49-195.16-509.89-292.9z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export { YouTubeIcon };

src/components/react-youtube-lite/index.ts

@@ -0,0 +1 @@
+export { default as ReactYouTubeLite } from './react-youtube-lite';

src/components/react-youtube-lite/react-youtube-lite.styles.ts

@@ -0,0 +1,48 @@
+// Dependencies
+import * as AspectRatio from '@radix-ui/react-aspect-ratio';
+
+// Internals
+import { YouTubeIcon } from '../icons/youtube-icon';
+import { styled } from '../../stitches.config';
+
+const StyledAspectRatio = styled(AspectRatio.Root, {
+  backgroundColor: '#000',
+  backgroundPosition: 'center',
+  backgroundSize: 'cover',
+  contain: 'content',
+  cursor: 'pointer',
+  '&::before': {
+    content: '""',
+    backgroundImage:
+      'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==)',
+    backgroundRepeat: 'repeat-x',
+    backgroundPosition: 'top',
+    boxSizing: 'border-box',
+    display: 'block',
+    height: 60,
+    paddingBottom: 50,
+    position: 'absolute',
+    top: 0,
+    transition: 'all 0.2s cubic-bezier(0, 0, 0.2, 1)',
+    width: '100%',
+  },
+});
+
+const StyledYouTubeIcon = styled(YouTubeIcon, {
+  color: '#212121',
+  height: 'auto',
+  left: '50%',
+  opacity: 0.8,
+  position: 'absolute',
+  top: '50%',
+  transform: 'translate3d(-50%, -50%, 0)',
+  transition: 'color 0.2s cubic-bezier(0, 0, 0.2, 1)',
+  width: 70,
+  zIndex: 1,
+  [`${StyledAspectRatio}:hover &`]: {
+    backgroundColor: '#f00',
+    opacity: 1,
+  },
+});
+
+export { StyledAspectRatio, StyledYouTubeIcon };