initial commit

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "proseWrap": "never",
+  "trailingComma": "es5"
+}

README.md

@@ -0,0 +1,2 @@
+# line-stickers-converter
+

components/Sticker.tsx

@@ -0,0 +1,14 @@
+import { Image, Paper } from '@mantine/core';
+import { useStickerPack } from '../utils/useStickerPack';
+
+type Props = {
+  file: ReturnType<typeof useStickerPack>['files'][0];
+};
+
+export default function Sticker({ file }: Props) {
+  return (
+    <Paper>
+      <Image src={URL.createObjectURL(file.blob)} alt={file.name} />
+    </Paper>
+  );
+}

components/StickerPackHeader.tsx

@@ -0,0 +1,76 @@
+import {
+  ActionIcon,
+  Anchor,
+  Center,
+  Container,
+  Group,
+  Image,
+  Skeleton,
+  Text,
+  ThemeIcon,
+  useMantineColorScheme,
+} from '@mantine/core';
+import {
+  ChevronLeftIcon,
+  HomeIcon,
+  MoonIcon,
+  SunIcon,
+} from '@modulz/radix-icons';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useStickerPack } from '../utils/useStickerPack';
+
+type Props = Pick<ReturnType<typeof useStickerPack>, 'meta' | 'state'>;
+
+export default function StickerPackHeader({ meta, state }: Props) {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+  const [icon, setIcon] = useState<string | undefined>();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!loading && meta.icon) {
+      setIcon(URL.createObjectURL(meta.icon));
+    }
+  }, [loading, meta]);
+
+  useEffect(() => {
+    state === 'loaded' && setLoading(false);
+  }, [state]);
+
+  return (
+    <Container my="xs">
+      <Group sx={{ justifyContent: 'space-between' }}>
+        <Group spacing="xs">
+          <Link href="/" passHref>
+            <ThemeIcon variant="light" color="violet">
+              <ChevronLeftIcon />
+            </ThemeIcon>
+          </Link>
+          <Skeleton width={60} height={60} visible={loading}>
+            {icon && <Image height={60} src={icon} alt={meta.name} />}
+          </Skeleton>
+          <Center>
+            <Container padding={0}>
+              <Skeleton visible={loading}>
+                <Text weight="bold" size="sm">
+                  {meta.name}
+                </Text>
+                <Text size="sm" color="dimmed">
+                  {meta.count} stickers
+                </Text>
+              </Skeleton>
+            </Container>
+          </Center>
+        </Group>
+        <ActionIcon
+          variant="outline"
+          color={colorScheme === 'light' ? 'blue' : 'yellow'}
+          onClick={() => toggleColorScheme()}
+          title="Toggle color scheme"
+        >
+          {colorScheme === 'light' ? <MoonIcon /> : <SunIcon />}
+        </ActionIcon>
+      </Group>
+    </Container>
+  );
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig