pakcages

website/src/components/select-tutorial-framework/index.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import {
+    PreferredUIPackage,
+    availableUIPackages,
+    UIPackageIcons,
+} from "../../context/TutorialUIPackageContext/index";
+import { useTutorialUIPackage } from "../../hooks/use-tutorial-ui-package";
+import styles from "./styles.module.css";
+import clsx from "clsx";
+
+type CardProps = {
+    name: string;
+    title?: string;
+    selected?: boolean;
+    onClick?: () => void;
+};
+
+const Card = ({ name, title, selected, onClick }: CardProps) => {
+    const Icon = UIPackageIcons[name];
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className={clsx(
+                "not-prose",
+                "w-[112px] h-[112px]",
+                "2xl:w-[138px] 2xl:h-[140px]",
+                "flex flex-col",
+                "py-4",
+                "rounded-lg",
+                "justify-center",
+                "items-center",
+                "gap-2",
+                "shadow-lg",
+                "border-2 dark:border-gray-700 border-gray-200",
+                selected && "dark:border-refine-blue border-refine-blue",
+                selected && "ring-4 ring-refine-blue ring-opacity-50",
+            )}
+        >
+            <div className={clsx("max-w-[48px] max-h-[48px]")}>
+                <Icon
+                    className={clsx(
+                        "w-full h-full",
+                        "text-gray-400 dark:text-gray-600",
+                    )}
+                    withBrandColor={selected}
+                />
+            </div>
+            {title && (
+                <span
+                    className={clsx(
+                        selected && "text-gray-900 dark:text-gray-0",
+                        !selected && "text-gray-500 dark:text-gray-600",
+                    )}
+                >
+                    {title}
+                </span>
+            )}
+        </button>
+    );
+};
+
+const names: Record<PreferredUIPackage, string> = {
+    headless: "Headless",
+    antd: "Ant Design",
+    mui: "Material UI",
+    mantine: "Mantine",
+    "chakra-ui": "Chakra UI",
+};
+
+export const SelectTutorialFramework = ({ small, ...props }) => {
+    const { preferred, setPreferred } = useTutorialUIPackage();
+
+    return (
+        <div {...props}>
+            <div className={clsx(styles.cards, small && styles.cardsSmall)}>
+                {availableUIPackages.map((uiPackage) => (
+                    <Card
+                        key={uiPackage}
+                        title={small ? undefined : names[uiPackage]}
+                        name={uiPackage}
+                        selected={preferred === uiPackage}
+                        onClick={() => setPreferred(uiPackage)}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};

website/src/components/select-tutorial-framework/styles.module.css

@@ -0,0 +1,63 @@
+.card {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 12.5%;
+    border-radius: 12.5%;
+    border: 1px solid var(--ifm-color-emphasis-200);
+    transition: all 0.2s;
+    text-align: center;
+    background: var(--tutorial-card-bg);
+    filter: grayscale(0);
+}
+
+.cardGray {
+    filter: grayscale(0.95);
+}
+
+.cardSelected {
+    background: var(--tutorial-card-bg-hover);
+    box-shadow: 2.7px 5.3px 10.7px 0px #2a2a4240;
+}
+
+[data-theme="dark"] .cardSelected,
+[data-theme="dark"] .card:hover {
+    border: 1px solid var(--ifm-color-primary);
+}
+
+.card:hover {
+    background: var(--tutorial-card-bg-hover);
+    box-shadow: 2.7px 5.3px 10.7px 0px #2a2a4240;
+}
+
+.card span {
+    user-select: none;
+    margin-top: 8px;
+    color: var(--ifm-font-color-base);
+    opacity: 0.6;
+    font-weight: 500;
+    font-size: 11px;
+    @apply font-montserrat;
+}
+
+.cardSelected span {
+    opacity: 1;
+}
+
+.card img {
+    object-fit: contain;
+    padding: 12.5%;
+}
+
+.cards {
+    @apply flex items-center flex-wrap gap-4 2xl:gap-8;
+}
+
+.cardsSmall {
+    max-width: 180px;
+    margin: 0 auto;
+    grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
+    gap: 4px;
+}