mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-07 12:33:36 +09:00
Oleg Isonen
ebe80ee682
## Description Improving onboarding experience: - Intro video as a first item in resources of the dashboard - Hover/focus states of resource items more nice https://github.com/webstudio-is/webstudio/assets/52824/9ba48b1d-950e-49ca-b2fd-44c1a3ead5dc ## Code Review - [ ] hi @TrySound , I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 5de6) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env.example` and the `builder/env-check.js` if mandatory
50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import {
|
|
css,
|
|
Dialog,
|
|
DialogContent,
|
|
DialogTrigger,
|
|
Flex,
|
|
Text,
|
|
theme,
|
|
} from "@webstudio-is/design-system";
|
|
import { CreateProject } from "./project-dialogs";
|
|
|
|
const contentStyle = css({
|
|
maxWidth: "none",
|
|
width: "80vw",
|
|
aspectRatio: "16/9",
|
|
});
|
|
|
|
const iframeStyle = css({
|
|
width: "100%",
|
|
height: "100%",
|
|
border: 0,
|
|
});
|
|
|
|
export const EmptyState = () => (
|
|
<Flex
|
|
align="center"
|
|
justify="center"
|
|
direction="column"
|
|
gap="6"
|
|
css={{ height: theme.spacing[27] }}
|
|
>
|
|
<Text variant="brandMediumTitle" as="h1" align="center">
|
|
What will you create?
|
|
</Text>
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<CreateProject buttonText="Create First Project" />
|
|
</DialogTrigger>
|
|
<DialogContent className={contentStyle()}>
|
|
<iframe
|
|
className={iframeStyle()}
|
|
src="https://www.youtube-nocookie.com/embed/aL2sBSb3ghg?si=siExeIRt-YI_ypuA&autoplay=true"
|
|
allowFullScreen
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Flex>
|
|
);
|