Refactor PillLabel component usage and improve workspace card layout

Author: filiptronicek

components/dashboard/src/components/PillLabel.tsx

@@ -4,6 +4,8 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
+import { cn } from "@podkit/lib/cn";
+
 export type PillType = "info" | "warn" | "success" | "neutral";
 
 const PillClsMap: Record<PillType, string> = {
@@ -27,6 +29,6 @@ const PillClsMap: Record<PillType, string> = {
  */
 export default function PillLabel(props: { children?: React.ReactNode; type?: PillType; className?: string }) {
     const type = props.type || "info";
-    const style = `px-3 py-0.5 text-xs uppercase rounded-xl font-semibold ${PillClsMap[type]} ${props.className}`;
-    return <span className={style}>{props.children}</span>;
+    const className = cn(`px-3 py-0.5 text-xs uppercase rounded-xl font-semibold ${PillClsMap[type]}`, props.className);
+    return <span className={className}>{props.children}</span>;
 }

components/dashboard/src/workspaces/Workspaces.tsx

@@ -36,6 +36,7 @@ import { useSuggestedRepositories } from "../data/git-providers/suggested-reposi
 import { useUserLoader } from "../hooks/use-user-loader";
 import { cn } from "@podkit/lib/cn";
 import { useInstallationConfiguration } from "../data/installation/default-workspace-image-query";
+import PillLabel from "../components/PillLabel";
 
 const WorkspacesPage: FunctionComponent = () => {
     const [limit, setLimit] = useState(50);
@@ -146,20 +147,21 @@ const WorkspacesPage: FunctionComponent = () => {
                         Getting started
                     </Subheading>
 
-                    <div className="flex flex-wrap gap-5 lg:px-28 px-4">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:px-28 px-4">
                         <Card onClick={() => setVideoModalVisible(true)}>
                             <GraduationCap className="flex-shrink-0" size={24} />
-                            <div>
+                            <div className="min-w-0">
                                 <CardTitle>Learn how Gitpod works</CardTitle>
                                 <CardDescription>
-                                    We’ve put together resources for you to get the most our of Gitpod.
+                                    We've put together resources for you to get the most our of Gitpod.
                                 </CardDescription>
                             </div>
                         </Card>
+
                         {orgSettings?.onboardingSettings?.internalLink ? (
                             <Card href={orgSettings.onboardingSettings.internalLink} isLinkExternal>
                                 <Building className="flex-shrink-0" size={24} />
-                                <div>
+                                <div className="min-w-0">
                                     <CardTitle>Learn more about Gitpod at {org?.name}</CardTitle>
                                     <CardDescription>
                                         Read through the internal Gitpod landing page of your organization.
@@ -169,17 +171,18 @@ const WorkspacesPage: FunctionComponent = () => {
                         ) : (
                             <Card href={"/new?showExamples=true"}>
                                 <Code className="flex-shrink-0" size={24} />
-                                <div>
+                                <div className="min-w-0">
                                     <CardTitle>Open a sample repository</CardTitle>
                                     <CardDescription>
                                         Explore a sample repository to quickly experience Gitpod.
                                     </CardDescription>
                                 </div>
                             </Card>
                         )}
+
                         <Card href="https://www.gitpod.io/docs/introduction" isLinkExternal>
                             <Book className="flex-shrink-0" size={24} />
-                            <div>
+                            <div className="min-w-0">
                                 <CardTitle>Visit the docs</CardTitle>
                                 <CardDescription>
                                     We have extensive documentation to help if you get stuck.
@@ -194,15 +197,36 @@ const WorkspacesPage: FunctionComponent = () => {
                                 Suggested
                             </Subheading>
 
-                            <div className="flex flex-wrap gap-5 lg:px-28 px-4">
-                                {recentRepos.map((repo) => (
-                                    <Card key={repo.url} href={`/new#${repo.url}`} className="border-[#D79A45] border">
-                                        <div>
-                                            <CardTitle>{repo.configurationName || repo.repoName}</CardTitle>
-                                            <CardDescription>{repo.url}</CardDescription>
-                                        </div>
-                                    </Card>
-                                ))}
+                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:px-28 px-4">
+                                {[
+                                    ...recentRepos,
+                                    // todo: add org-selected repos
+                                ]
+                                    .slice(0, 3)
+                                    .map((repo) => (
+                                        <Card
+                                            key={repo.url}
+                                            href={`/new#${repo.url}`}
+                                            className="border-[#D79A45] border hover:bg-pk-surface-tertiary transition-colors w-full"
+                                        >
+                                            <div className="min-w-0 w-full space-y-1.5">
+                                                <CardTitle className="flex flex-row items-center gap-2 w-full">
+                                                    <span className="truncate block min-w-0 text-base">
+                                                        {repo.configurationName || repo.repoName}
+                                                    </span>
+                                                    <PillLabel
+                                                        className="capitalize bg-kumquat-light shrink-0 text-sm"
+                                                        type="warn"
+                                                    >
+                                                        Recommended
+                                                    </PillLabel>
+                                                </CardTitle>
+                                                <CardDescription className="truncate text-sm opacity-75">
+                                                    {repo.url}
+                                                </CardDescription>
+                                            </div>
+                                        </Card>
+                                    ))}
                             </div>
                         </>
                     )}
@@ -376,11 +400,11 @@ const WorkspacesPage: FunctionComponent = () => {
 
 export default WorkspacesPage;
 
-const CardTitle = ({ children }: { children: React.ReactNode }) => {
-    return <span className="text-lg font-semibold text-pk-content-primary">{children}</span>;
+const CardTitle = ({ children, className }: { className?: string; children: React.ReactNode }) => {
+    return <span className={cn("text-lg font-semibold text-pk-content-primary", className)}>{children}</span>;
 };
-const CardDescription = ({ children }: { children: React.ReactNode }) => {
-    return <p className="text-pk-content-secondary">{children}</p>;
+const CardDescription = ({ children, className }: { className?: string; children: React.ReactNode }) => {
+    return <p className={cn("text-pk-content-secondary", className)}>{children}</p>;
 };
 type CardProps = {
     children: React.ReactNode;
@@ -391,7 +415,7 @@ type CardProps = {
 };
 const Card = ({ children, href, isLinkExternal, className: classNameFromProps, onClick }: CardProps) => {
     const className = cn(
-        "bg-pk-surface-secondary flex gap-3 py-4 px-5 flex-grow basis-[300px] sm:basis-[45%] lg:basis-[30%] rounded-xl max-w-[400px] text-left",
+        "bg-pk-surface-secondary flex gap-3 py-4 px-5 rounded-xl text-left w-full h-full",
         classNameFromProps,
     );