mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: migrate tailwind to v4
This commit is contained in:
swve
parent
6d770698d0
commit
81c4190b00
87 changed files with 773 additions and 620 deletions
|
|
@ -367,21 +367,21 @@ export default function OrgEditImages() {
|
|||
<TabsList className="grid w-full grid-cols-3 p-1 bg-gray-100 rounded-lg">
|
||||
<TabsTrigger
|
||||
value="logo"
|
||||
className="data-[state=active]:bg-white data-[state=active]:shadow-sm transition-all flex items-center space-x-2"
|
||||
className="data-[state=active]:bg-white data-[state=active]:shadow-xs transition-all flex items-center space-x-2"
|
||||
>
|
||||
<StarIcon size={16} />
|
||||
<span>Logo</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="thumbnail"
|
||||
className="data-[state=active]:bg-white data-[state=active]:shadow-sm transition-all flex items-center space-x-2"
|
||||
className="data-[state=active]:bg-white data-[state=active]:shadow-xs transition-all flex items-center space-x-2"
|
||||
>
|
||||
<ImageIcon size={16} />
|
||||
<span>Thumbnail</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="previews"
|
||||
className="data-[state=active]:bg-white data-[state=active]:shadow-sm transition-all flex items-center space-x-2"
|
||||
className="data-[state=active]:bg-white data-[state=active]:shadow-xs transition-all flex items-center space-x-2"
|
||||
>
|
||||
<Images size={16} />
|
||||
<span>Previews</span>
|
||||
|
|
@ -390,7 +390,7 @@ export default function OrgEditImages() {
|
|||
|
||||
<TabsContent value="logo" className="mt-2">
|
||||
<div className="flex flex-col space-y-5 w-full">
|
||||
<div className="w-full bg-gradient-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-8">
|
||||
<div className="w-full bg-linear-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-8">
|
||||
<div className="flex flex-col justify-center items-center space-y-8">
|
||||
<div className="relative group">
|
||||
<div
|
||||
|
|
@ -416,9 +416,9 @@ export default function OrgEditImages() {
|
|||
disabled={isLogoUploading}
|
||||
className={cn(
|
||||
"font-medium text-sm px-6 py-2.5 rounded-full",
|
||||
"bg-gradient-to-r from-blue-500 to-blue-600 text-white",
|
||||
"bg-linear-to-r from-blue-500 to-blue-600 text-white",
|
||||
"hover:from-blue-600 hover:to-blue-700",
|
||||
"shadow-sm hover:shadow transition-all duration-300",
|
||||
"shadow-xs hover:shadow-sm transition-all duration-300",
|
||||
"flex items-center space-x-2",
|
||||
isLogoUploading && "opacity-75 cursor-not-allowed"
|
||||
)}
|
||||
|
|
@ -443,7 +443,7 @@ export default function OrgEditImages() {
|
|||
|
||||
<TabsContent value="thumbnail" className="mt-2">
|
||||
<div className="flex flex-col space-y-5 w-full">
|
||||
<div className="w-full bg-gradient-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-8">
|
||||
<div className="w-full bg-linear-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-8">
|
||||
<div className="flex flex-col justify-center items-center space-y-8">
|
||||
<div className="relative group">
|
||||
<div
|
||||
|
|
@ -469,9 +469,9 @@ export default function OrgEditImages() {
|
|||
disabled={isThumbnailUploading}
|
||||
className={cn(
|
||||
"font-medium text-sm px-6 py-2.5 rounded-full",
|
||||
"bg-gradient-to-r from-purple-500 to-purple-600 text-white",
|
||||
"bg-linear-to-r from-purple-500 to-purple-600 text-white",
|
||||
"hover:from-purple-600 hover:to-purple-700",
|
||||
"shadow-sm hover:shadow transition-all duration-300",
|
||||
"shadow-xs hover:shadow-sm transition-all duration-300",
|
||||
"flex items-center space-x-2",
|
||||
isThumbnailUploading && "opacity-75 cursor-not-allowed"
|
||||
)}
|
||||
|
|
@ -496,7 +496,7 @@ export default function OrgEditImages() {
|
|||
|
||||
<TabsContent value="previews" className="mt-4">
|
||||
<div className="flex flex-col space-y-5 w-full">
|
||||
<div className="w-full bg-gradient-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-6">
|
||||
<div className="w-full bg-linear-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-6">
|
||||
<div className="flex flex-col justify-center items-center space-y-6">
|
||||
<DragDropContext onDragEnd={handleDragEnd}>
|
||||
<Droppable droppableId="previews" direction="horizontal">
|
||||
|
|
@ -520,7 +520,7 @@ export default function OrgEditImages() {
|
|||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
className={cn(
|
||||
"relative group flex-shrink-0",
|
||||
"relative group shrink-0",
|
||||
"w-48",
|
||||
snapshot.isDragging ? "scale-105 z-50" : "hover:scale-102",
|
||||
)}
|
||||
|
|
@ -529,7 +529,7 @@ export default function OrgEditImages() {
|
|||
onClick={() => removePreview(preview.id)}
|
||||
className={cn(
|
||||
"absolute -top-2 -right-2 bg-red-500 hover:bg-red-600 text-white rounded-full p-1.5",
|
||||
"opacity-0 group-hover:opacity-100 z-10 shadow-sm",
|
||||
"opacity-0 group-hover:opacity-100 z-10 shadow-xs",
|
||||
"transition-opacity duration-200"
|
||||
)}
|
||||
>
|
||||
|
|
@ -539,7 +539,7 @@ export default function OrgEditImages() {
|
|||
{...provided.dragHandleProps}
|
||||
className={cn(
|
||||
"absolute -top-2 -left-2 bg-gray-600 hover:bg-gray-700 text-white rounded-full p-1.5",
|
||||
"opacity-0 group-hover:opacity-100 cursor-grab active:cursor-grabbing z-10 shadow-sm",
|
||||
"opacity-0 group-hover:opacity-100 cursor-grab active:cursor-grabbing z-10 shadow-xs",
|
||||
"transition-opacity duration-200"
|
||||
)}
|
||||
>
|
||||
|
|
@ -551,7 +551,7 @@ export default function OrgEditImages() {
|
|||
`w-full ${PREVIEW_HEIGHT} bg-contain bg-no-repeat bg-center rounded-xl bg-white`,
|
||||
"border border-gray-200 hover:border-gray-300",
|
||||
"transition-colors duration-200",
|
||||
snapshot.isDragging ? "shadow-lg" : "shadow-sm hover:shadow-md"
|
||||
snapshot.isDragging ? "shadow-lg" : "shadow-xs hover:shadow-md"
|
||||
)}
|
||||
style={{
|
||||
backgroundImage: `url(${getOrgPreviewMediaDirectory(org?.org_uuid, preview.id)})`,
|
||||
|
|
@ -561,7 +561,7 @@ export default function OrgEditImages() {
|
|||
<div className={cn(
|
||||
`w-full ${PREVIEW_HEIGHT} relative rounded-xl overflow-hidden`,
|
||||
"border border-gray-200 hover:border-gray-300 transition-colors duration-200",
|
||||
snapshot.isDragging ? "shadow-lg" : "shadow-sm hover:shadow-md"
|
||||
snapshot.isDragging ? "shadow-lg" : "shadow-xs hover:shadow-md"
|
||||
)}>
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
|
|
@ -583,7 +583,7 @@ export default function OrgEditImages() {
|
|||
{provided.placeholder}
|
||||
{previews.length < 4 && (
|
||||
<div className={cn(
|
||||
"flex-shrink-0 w-48",
|
||||
"shrink-0 w-48",
|
||||
previews.length === 0 && "m-0"
|
||||
)}>
|
||||
<Dialog open={videoDialogOpen} onOpenChange={(open) => {
|
||||
|
|
|
|||
|
|
@ -288,7 +288,7 @@ const OrgEditLanding = () => {
|
|||
onChange={() => setIsLandingEnabled(!isLandingEnabled)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-hidden peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
||||
</label>
|
||||
<Button
|
||||
variant="default"
|
||||
|
|
@ -328,10 +328,10 @@ const OrgEditLanding = () => {
|
|||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
onClick={() => setSelectedSection(index)}
|
||||
className={`p-4 bg-white/80 backdrop-blur-sm rounded-lg cursor-pointer border ${
|
||||
className={`p-4 bg-white/80 backdrop-blur-xs rounded-lg cursor-pointer border ${
|
||||
selectedSection === index
|
||||
? 'border-blue-500 bg-blue-50 ring-2 ring-blue-500/20 shadow-sm'
|
||||
: 'border-gray-200 hover:border-gray-300 hover:bg-gray-50/50 hover:shadow-sm'
|
||||
? 'border-blue-500 bg-blue-50 ring-2 ring-blue-500/20 shadow-xs'
|
||||
: 'border-gray-200 hover:border-gray-300 hover:bg-gray-50/50 hover:shadow-xs'
|
||||
} ${snapshot.isDragging ? 'shadow-lg ring-2 ring-blue-500/20 rotate-2' : ''}`}
|
||||
>
|
||||
<div className="flex items-center justify-between group">
|
||||
|
|
@ -888,7 +888,7 @@ const HeroSectionEditor: React.FC<{
|
|||
<TabsContent value="buttons" className="space-y-4 mt-4">
|
||||
<div className="space-y-3">
|
||||
{section.buttons.map((button, index) => (
|
||||
<div key={index} className="grid grid-cols-[1fr,1fr,auto] gap-2 p-4 border rounded-lg">
|
||||
<div key={index} className="grid grid-cols-[1fr_1fr_auto] gap-2 p-4 border rounded-lg">
|
||||
<div className="space-y-2">
|
||||
<Label>Button Text & Colors</Label>
|
||||
<Input
|
||||
|
|
@ -1297,7 +1297,7 @@ const LogosSectionEditor: React.FC<{
|
|||
</div>
|
||||
|
||||
{section.logos.map((logo, index) => (
|
||||
<div key={index} className="grid grid-cols-[1fr,1fr,auto] gap-2">
|
||||
<div key={index} className="grid grid-cols-[1fr_1fr_auto] gap-2">
|
||||
<div className="space-y-2">
|
||||
<Input
|
||||
value={logo.url}
|
||||
|
|
@ -1400,7 +1400,7 @@ const PeopleSectionEditor: React.FC<{
|
|||
<Label>People</Label>
|
||||
<div className="space-y-4 mt-2">
|
||||
{section.people.map((person, index) => (
|
||||
<div key={index} className="grid grid-cols-[1fr,1fr,1fr,auto] gap-4 p-4 border rounded-lg">
|
||||
<div key={index} className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 p-4 border rounded-lg">
|
||||
<div className="space-y-2">
|
||||
<Label>Name</Label>
|
||||
<Input
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue