lywsvip/supabase
1
0
Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-06-08 02:25:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: migrate Modal to Dialog in www (#46417)

Browse Source 
## Problem

`Modal` is deprecated and should be migrated to `Dialog`.

## Solution

Migrate to `Dialog`. However, I haven't found any reference to the
`LaunchSection` component. If confirmed, I'll remove it instead.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Improved video playback interface implementation for better
maintainability.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46417?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Gildas Garcia
2026-05-27 14:07:17 +02:00
committed by GitHub
parent 9155357d82
commit 60dbc745c8
1 changed files with 28 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
apps/www/components/LaunchWeek/7/LaunchSection/index.tsx
View File

@@ -1,7 +1,7 @@
import { PlayIcon, TruckIcon, XIcon } from '@heroicons/react/outline'
import Image from 'next/image'
import { useState } from 'react'
import { PlayIcon, TruckIcon, XIcon } from '@heroicons/react/outline'
import { Badge, Modal } from 'ui'
import { Badge, Dialog, DialogContent, DialogHeader, DialogSection, DialogTitle } from 'ui'
import { Article, Product, WeekDayProps } from '../../types'
import _days from './../days.json'
@@ -109,33 +109,32 @@ export const LaunchSection = (props: WeekDayProps) => {
</div>
</div>
<Modal
size="xxlarge"
visible={videoVisible}
onCancel={() => setVideoVisible(false)}
hideFooter
header={
<div className="flex items-center justify-between">
<span className="text-foreground">{props.title}</span>
<XIcon
className="text-muted hover:text-foreground w-4 cursor-pointer transition"
onClick={() => setVideoVisible(false)}
/>
</div>
}
>
<div>
<div className="video-container">
<iframe
src={`https://www.youtube-nocookie.com/embed/${props.youtube_id}?autoplay=1`}
title="YouTube video player"
frameBorder={0}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
</div>
</div>
</Modal>
<Dialog open={videoVisible} onOpenChange={(open) => setVideoVisible(open)}>
<DialogContent size="xxlarge">
<DialogHeader>
<DialogTitle>
<div className="flex items-center justify-between">
<span className="text-foreground">{props.title}</span>
<XIcon
className="text-muted hover:text-foreground w-4 cursor-pointer transition"
onClick={() => setVideoVisible(false)}
/>
</div>
</DialogTitle>
</DialogHeader>
<DialogSection>
<div className="video-container">
<iframe
src={`https://www.youtube-nocookie.com/embed/${props.youtube_id}?autoplay=1`}
title="YouTube video player"
frameBorder={0}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
</div>
</DialogSection>
</DialogContent>
</Dialog>
</>
)}
</div>