FilesExpand file tree

 main

/

fragment-web.tsx

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

65 lines (62 loc) · 1.99 KB

 main

/

fragment-web.tsx

Copy path

Top

File metadata and controls

• Code
• Blame

65 lines (62 loc) · 1.99 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

import { CopyButton } from './ui/copy-button'

import { Button } from '@/components/ui/button'

import {

Tooltip,

TooltipContent,

TooltipProvider,

TooltipTrigger,

} from '@/components/ui/tooltip'

import { ExecutionResultWeb } from '@/lib/types'

import { RotateCw } from 'lucide-react'

import { useState } from 'react'

export function FragmentWeb({ result }: { result: ExecutionResultWeb }) {

const [iframeKey, setIframeKey] = useState(0)

if (!result) return null

function refreshIframe() {

setIframeKey((prevKey) => prevKey + 1)

}

return (

<div className="flex flex-col w-full h-full">

<iframe

key={iframeKey}

className="h-full w-full"

sandbox="allow-forms allow-scripts allow-same-origin"

loading="lazy"

src={result.url}

/>

<div className="p-2 border-t">

<div className="flex items-center bg-muted dark:bg-white/10 rounded-2xl">

<TooltipProvider>

<Tooltip delayDuration={0}>

<TooltipTrigger asChild>

<Button

variant="link"

className="text-muted-foreground"

onClick={refreshIframe}

>

<RotateCw className="h-4 w-4" />

</Button>

</TooltipTrigger>

<TooltipContent>Refresh</TooltipContent>

</Tooltip>

</TooltipProvider>

<span className="text-muted-foreground text-xs flex-1 text-ellipsis overflow-hidden whitespace-nowrap">

{result.url}

</span>

<TooltipProvider>

<Tooltip delayDuration={0}>

<TooltipTrigger asChild>

<CopyButton

variant="link"

content={result.url}

className="text-muted-foreground"

/>

</TooltipTrigger>

<TooltipContent>Copy URL</TooltipContent>

</Tooltip>

</TooltipProvider>

</div>

</div>

</div>

)

}