feat: add TikTok embed support

src/app/components/url-preview/TikTokEmbed.css.tsx

@@ -0,0 +1,116 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, color, config, toRem } from 'folds';
+
+export const TikTokEmbed = style([
+  DefaultReset,
+  {
+    width: toRem(360),
+    maxWidth: '100%',
+    backgroundColor: color.SurfaceVariant.Container,
+    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+    borderRadius: config.radii.R300,
+    overflow: 'hidden',
+  },
+]);
+
+export const TikTokEmbedHeader = style([
+  DefaultReset,
+  {
+    padding: `${config.space.S200} ${config.space.S300}`,
+    backgroundColor: color.SurfaceVariant.ContainerActive,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: config.space.S200,
+  },
+]);
+
+export const TikTokEmbedInfo = style([
+  DefaultReset,
+  {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: config.space.S100,
+    flex: 1,
+    minWidth: 0,
+  },
+]);
+
+export const TikTokEmbedTitle = style({
+  color: color.Primary.Main,
+  textDecoration: 'none',
+  fontWeight: config.fontWeight.W500,
+  ':hover': {
+    textDecoration: 'underline',
+  },
+});
+
+export const TikTokEmbedAuthor = style({
+  color: color.SurfaceVariant.OnContainer,
+  textDecoration: 'none',
+  opacity: 0.8,
+  ':hover': {
+    textDecoration: 'underline',
+    opacity: 1,
+  },
+});
+
+export const TikTokEmbedLink = style({
+  color: color.Success.Main,
+  textDecoration: 'none',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  ':hover': {
+    textDecoration: 'underline',
+  },
+});
+
+export const TikTokThumbnailContainer = style([
+  DefaultReset,
+  {
+    position: 'relative',
+    width: '100%',
+    height: toRem(550),
+    backgroundColor: '#000',
+    display: 'block',
+  },
+]);
+
+export const TikTokThumbnailButton = style([
+  DefaultReset,
+  {
+    position: 'relative',
+    width: '100%',
+    height: toRem(550),
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    backgroundColor: '#000',
+    display: 'block',
+    overflow: 'hidden',
+  },
+]);
+
+export const TikTokThumbnail = style([
+  DefaultReset,
+  {
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    objectFit: 'cover',
+    objectPosition: 'center',
+  },
+]);
+
+export const TikTokEmbedContainer = style([
+  DefaultReset,
+  {
+    width: '100%',
+    height: toRem(550),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#000',
+  },
+]);